styling tweaks

app/globals.css

@@ -4,16 +4,26 @@
 
   --foreground-rgb: 20, 20, 20;
   --foreground-rgb-highlight: 0, 0, 0;
-  --background-start-rgb: 225, 230, 230;
-  --background-end-rgb: 255, 255, 255;
+  --background-rgb: 255, 255, 255;
+  --background-gradient: radial-gradient(
+    circle at 30% 0%,
+    rgb(216, 225, 242) 0%,
+    rgb(176, 187, 240) 30%,
+    rgb(255, 255, 255) 100%
+  );
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 220, 220, 220;
     --foreground-rgb-highlight: 255, 255, 255;
-    --background-start-rgb: 25, 25, 25;
-    --background-end-rgb: 0, 0, 0;
+    --background-rgb: 0, 0, 0;
+    --background-gradient: radial-gradient(
+      circle at 30% 0%,
+      rgb(27, 40, 62) 0%,
+      rgb(15, 18, 33) 30%,
+      rgb(0, 0, 0) 100%
+    );
   }
 }
 
@@ -33,12 +43,7 @@ body {
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: var(--background-gradient) rgb(var(--background-rgb));
   line-height: 1.5;
   min-height: 100vh;
   height: 100%;

app/page.module.css

@@ -21,7 +21,12 @@
 .grid {
   display: grid;
   gap: 1.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+}
+
+@media screen and (min-width: 400px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  }
 }
 
 .breakout {

app/page.tsx

@@ -2,7 +2,7 @@ import styles from './page.module.css'
 import { metadata } from './layout'
 import { Swap, Buy } from '@/components/Strategies'
 import { Content } from '@/components/Content'
-import { CalculationBase } from '@/components/CalculationBase'
+import { CalculationBase } from '@/components/CalculationBaseOutput'
 
 export default function Home() {
   return (

components/CalculationBaseOutput/CalculationBase.module.css

@@ -1,9 +1,10 @@
 .calculationBase {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  justify-content: center;
   border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
   border-left: 1px solid rgba(var(--foreground-rgb), 0.2);
   border-bottom: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   border-radius: var(--border-radius);
   margin-top: 1.5rem;
 }

components/CalculationBaseOutput/CalculationBase.tsx

@@ -13,6 +13,11 @@ export function CalculationBase() {
         1 ASI
         <br />= ${prices.asi}
       </li>
+      <li>
+        1 Fet = {ratioFetToAsi} ASI
+        <span className={styles.label}>fixed</span>
+        <br />= ${prices.fet}
+      </li>
       <li>
         1 OCEAN = {ratioOceanToAsi} ASI
         <span className={styles.label}>fixed</span>
@@ -23,11 +28,6 @@ export function CalculationBase() {
         <span className={styles.label}>fixed</span>
         <br />= ${prices.agix}
       </li>
-      <li>
-        1 Fet = {ratioFetToAsi} ASI
-        <span className={styles.label}>fixed</span>
-        <br />= ${prices.fet}
-      </li>
     </ul>
   )
 }

components/Content/Content.module.css

@@ -3,8 +3,14 @@
   margin: auto;
 }
 
-.content p {
-  margin-bottom: 1rem;
+.content p,
+.content ul,
+.content ol,
+.content h2,
+.content h3,
+.content h4,
+.content h5 {
+  margin-bottom: 1.5rem;
 }
 
 .content a {
@@ -12,15 +18,16 @@
 }
 
 .content ul {
-  list-style-type: disc;
-  margin-left: 4rem;
+  list-style-type: square;
+  margin-left: 1rem;
 }
 
 .content ol {
   list-style-type: decimal;
-  margin-left: 4rem;
+  margin-left: 1rem;
 }
 
 .content li {
   margin-bottom: 0.5rem;
+  padding-left: 0.25rem;
 }

components/FormAmount/Inputs/InputAmount.module.css

@@ -1,19 +1,18 @@
 .input {
   all: unset;
   width: 70px;
-  padding-left: 0.2rem;
-  padding-right: 0.2rem;
+  padding: 0 0.2rem;
   text-align: center;
-  background-color: rgba(var(--background-end-rgb), 0.4);
+  background-color: rgba(var(--background-rgb), 0.4);
 }
 
 .input:hover {
-  background-color: rgba(var(--background-end-rgb), 0.5);
+  background-color: rgba(var(--background-rgb), 0.5);
 }
 
 .input:focus-within {
   outline: none;
-  background-color: rgba(var(--background-end-rgb), 0.9);
+  background-color: rgba(var(--background-rgb), 0.9);
   color: rgb(var(--foreground-rgb-highlight));
 }
 

components/Strategies/styles.module.css

@@ -8,4 +8,5 @@
   margin-bottom: 1.5rem;
   font-size: 1.1rem;
   min-height: 52px;
+  line-height: 1.75;
 }

content.md

@@ -1,11 +1,15 @@
+The **→ lines** show what you would get with the displayed token amount at the moment of the ASI swap, along with the converted value based on the current market price of FET.
+
 The fiat values are fetched from [Coingecko](https://coingecko.com), and the token swap estimations directly from [Uniswap](https://uniswap.org) v3 swap routes.
 
-All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions.
-
-There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk.
+### All About Token Merge
 
 Find everything about the token merger in every team's announcement posts:
 
 - [Ocean Protocol: Ocean Protocol is joining the Superintelligence Alliance](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24)
 - [Fetch.ai: Superintelligence Alliance Token Merge $ASI](https://fetch.ai/blog/superintelligence-alliance-token-merge-asi)
 - [SingularityNET: Introducing the Artificial Superintelligence Alliance](https://blog.singularitynet.io/introducing-the-artificial-superintelligence-alliance-40a4dea01e62)
+
+### Disclaimer
+
+All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions. There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk.