[docs] update index page

ananthakumaran · Jan 15, 2024 · 09bb797 · 09bb797
1 parent 5b36104
commit 09bb797
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 37 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -101,7 +101,10 @@ hide:
 
 
 <div class="feature-card" markdown>
-<div class="feature-card-left" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-logo" markdown>
+:fontawesome-regular-file-lines:{ .feature-card-icon }
+</div>
+<div class="feature-card-right" markdown>
 # Plain Text
 
 All your financial data is stored in plain text files. Of course, we
@@ -110,10 +113,6 @@ enough guard rails to make data entry easy and error free. The editor
 comes with syntax highlighting, auto completion, error checking and
 auto formatting.
 </div>
-
-<div class="feature-card-right feature-card-icon feature-card-icon-logo" markdown>
-:fontawesome-regular-file-lines:{ .feature-card-icon }
-</div>
 </div>
 
 
@@ -132,18 +131,17 @@ in your system. Checkout the [manifesto](./manifesto.md) for more.
 </div>
 
 <div class="feature-card" markdown>
-<div class="feature-card-left" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-asset" markdown>
+:octicons-graph-24:{ .feature-card-icon }
+</div>
+<div class="feature-card-right" markdown>
 # Price Tracking
 
 Paisa supports various [price](./reference/commodities.md) data providers, so it can keep track of
 the latest price of all your assets. It also allows the user to enter
 the price manually, so you can use it to revalue your assets like
 house, car, land, etc.
 </div>
-
-<div class="feature-card-right feature-card-icon feature-card-icon-asset" markdown>
-:octicons-graph-24:{ .feature-card-icon }
-</div>
 </div>
 
 
@@ -165,7 +163,10 @@ category and make sure you don't overspend.
 </div>
 
 <div class="feature-card" markdown>
-<div class="feature-card-left" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-income" markdown>
+:material-microsoft-excel:{ .feature-card-icon }
+</div>
+<div class="feature-card-right" markdown>
 # Data Import
 
 You don't have to sit and manually enter all your transactions. You
@@ -176,9 +177,6 @@ setup the import template, it will hardly take 5 minutes to import and
 categorize all your transactions each month.
 </div>
 
-<div class="feature-card-right feature-card-icon feature-card-icon-income" markdown>
-:material-microsoft-excel:{ .feature-card-icon }
-</div>
 </div>
 
 
@@ -199,7 +197,10 @@ and will update automatically when you change the data in your ledger.
 </div>
 
 <div class="feature-card" markdown>
-<div class="feature-card-left" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-logo" markdown>
+:octicons-goal-16:{ .feature-card-icon }
+</div>
+<div class="feature-card-right" markdown>
 # Goals
 
 Want to know how much you need to save for your next vacation? or how
@@ -210,9 +211,6 @@ the other hand, if you have a deadline, paisa can tell you how much
 you need to save each month to achieve your goal.
 </div>
 
-<div class="feature-card-right feature-card-icon feature-card-icon-logo" markdown>
-:octicons-goal-16:{ .feature-card-icon }
-</div>
 </div>
 
 <div class="feature-card" markdown>
@@ -232,3 +230,5 @@ day of the quarter, etc.
 
 </div>
 </div>
+
+<p></p>
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -244,34 +244,27 @@
 
 .feature-card p {
   max-width: 22rem;
-  text-align: justify;
-}
-
-.feature-card-left {
-  width: 50%;
+  text-align: left;
 }
 
+.feature-card-left,
 .feature-card-right {
-  width: 50%;
+  width: 70%;
 }
 
-@media screen and (max-width: 1275px) {
-  .feature-card-left,
-  .feature-card-right {
-    width: 70%;
-  }
-
-  .feature-card-left.feature-card-icon,
-  .feature-card-right.feature-card-icon {
-    width: 30%;
-  }
+.feature-card-left.feature-card-icon,
+.feature-card-right.feature-card-icon {
+  width: 30%;
 }
 
 .feature-card-icon {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1.5rem;
+  align-items: start;
+  justify-content: end;
+}
+
+.feature-card-icon p {
+  margin: 0 2rem 0 0;
 }
 
 .feature-card-icon .twemoji {
@@ -292,27 +285,51 @@
   color: var(--logo-color);
 }
 
+.feature-card-icon-logo {
+  border-left: 1px dashed var(--logo-color);
+}
+
 .feature-card-icon-asset .twemoji {
   background-color: var(--account-color-asset-background);
   color: var(--account-color-asset);
 }
 
+.feature-card-icon-asset {
+  border-left: 1px dashed var(--account-color-asset);
+}
+
 .feature-card-icon-expense .twemoji {
   background-color: var(--account-color-expense-background);
   color: var(--account-color-expense);
 }
 
+.feature-card-icon-expense {
+  border-left: 1px dashed var(--account-color-expense);
+}
+
 .feature-card-icon-liability .twemoji {
   background-color: var(--account-color-liability-background);
   color: var(--account-color-liability);
 }
 
+.feature-card-icon-liability {
+  border-left: 1px dashed var(--account-color-liability);
+}
+
 .feature-card-icon-equity .twemoji {
   background-color: var(--account-color-equity-background);
   color: var(--account-color-equity);
 }
 
+.feature-card-icon-equity {
+  border-left: 1px dashed var(--account-color-equity);
+}
+
 .feature-card-icon-income .twemoji {
   background-color: var(--account-color-income-background);
   color: var(--account-color-income);
 }
+
+.feature-card-icon-income {
+  border-left: 1px dashed var(--account-color-income);
+}