From 5ed62c96682c8a7a35792ff303661fdeb62f8fe6 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 31 Mar 2024 03:08:51 +0100 Subject: [PATCH] style tweaks --- app/globals.css | 2 +- app/layout.tsx | 16 +++++++++++++--- .../CalculationBase.module.css | 2 +- .../FormAmount/Inputs/InputAmount.module.css | 12 +++--------- .../FormAmount/Inputs/InputToken.module.css | 2 +- components/Strategies/styles.module.css | 14 +++++++++++++- content.md | 2 +- 7 files changed, 33 insertions(+), 17 deletions(-) diff --git a/app/globals.css b/app/globals.css index 76ffffc..25bdf84 100644 --- a/app/globals.css +++ b/app/globals.css @@ -37,7 +37,7 @@ html, body { max-width: 100vw; overflow-x: hidden; - font-family: var(--font-firaCode); + font-family: var(--font-hanken-grotesk); text-rendering: optimizeLegibility; } diff --git a/app/layout.tsx b/app/layout.tsx index 9993651..aa551e2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,8 +1,18 @@ import type { Metadata } from 'next' -import { Fira_Code } from 'next/font/google' +import { + Fira_Code, + Space_Grotesk, + Jost, + Fira_Sans, + Inter, + Hanken_Grotesk +} from 'next/font/google' import './globals.css' -const firaCode = Fira_Code({ subsets: ['latin'], variable: '--font-firaCode' }) +const hankenGrotesk = Hanken_Grotesk({ + subsets: ['latin'], + variable: '--font-hanken-grotesk' +}) export const metadata: Metadata = { title: 'ASI Calculator', @@ -16,7 +26,7 @@ export default function RootLayout({ }>) { return ( - {children} + {children} ) } diff --git a/components/CalculationBaseOutput/CalculationBase.module.css b/components/CalculationBaseOutput/CalculationBase.module.css index 54b004d..0021ebe 100644 --- a/components/CalculationBaseOutput/CalculationBase.module.css +++ b/components/CalculationBaseOutput/CalculationBase.module.css @@ -13,7 +13,7 @@ border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2); border-right: 1px solid rgba(var(--foreground-rgb), 0.2); padding: 1rem; - font-size: 0.8rem; + font-size: 0.9rem; } .label { diff --git a/components/FormAmount/Inputs/InputAmount.module.css b/components/FormAmount/Inputs/InputAmount.module.css index b8147d7..e920d9c 100644 --- a/components/FormAmount/Inputs/InputAmount.module.css +++ b/components/FormAmount/Inputs/InputAmount.module.css @@ -1,9 +1,8 @@ .input { all: unset; - width: 70px; + width: 60px; padding: 0 0.2rem; text-align: center; - background-color: rgba(var(--background-rgb), 0.4); } .input:hover { @@ -13,19 +12,14 @@ .input:focus-within { outline: none; background-color: rgba(var(--background-rgb), 0.9); - color: rgb(var(--foreground-rgb-highlight)); } @media (prefers-color-scheme: dark) { - .input { - background-color: rgba(var(--foreground-rgb), 0.15); - } - .input:hover { - background-color: rgba(var(--foreground-rgb), 0.2); + background-color: rgba(var(--foreground-rgb), 0.1); } .input:focus-within { - background-color: rgba(var(--foreground-rgb), 0.3); + background-color: rgba(var(--foreground-rgb), 0.2); } } diff --git a/components/FormAmount/Inputs/InputToken.module.css b/components/FormAmount/Inputs/InputToken.module.css index 5a25a3f..beee7f0 100644 --- a/components/FormAmount/Inputs/InputToken.module.css +++ b/components/FormAmount/Inputs/InputToken.module.css @@ -1,7 +1,7 @@ .select { display: inline-block; all: unset; - padding: 0 0.75rem; + padding: 0 0.75rem 0 0; } .selectWrapper { diff --git a/components/Strategies/styles.module.css b/components/Strategies/styles.module.css index 9fec285..9bd491a 100644 --- a/components/Strategies/styles.module.css +++ b/components/Strategies/styles.module.css @@ -4,9 +4,21 @@ padding: 1.25rem 1.5rem; } +/* .results form { + border-color: transparent; +} + +.results input { + background: none; +} + +.results:hover form { + border-color: rgba(var(--foreground-rgb), 0.2); +} */ + .title { margin-bottom: 1.5rem; font-size: 1.1rem; min-height: 52px; - line-height: 1.75; + color: rgb(var(--foreground-rgb-highlight)); } diff --git a/content.md b/content.md index 0194d99..4108f59 100644 --- a/content.md +++ b/content.md @@ -4,7 +4,7 @@ The fiat values are fetched from [Coingecko](https://coingecko.com), and the tok ### All About Token Merge -Find everything about the token merger in every team's announcement posts: +You can find all the details about the token merger in every team's announcement post: - [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)