style tweaks

This commit is contained in:
Matthias Kretschmann 2024-03-31 03:08:51 +01:00
parent c64c8d91e0
commit 5ed62c9668
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 33 additions and 17 deletions

View File

@ -37,7 +37,7 @@ html,
body { body {
max-width: 100vw; max-width: 100vw;
overflow-x: hidden; overflow-x: hidden;
font-family: var(--font-firaCode); font-family: var(--font-hanken-grotesk);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }

View File

@ -1,8 +1,18 @@
import type { Metadata } from 'next' 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' 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 = { export const metadata: Metadata = {
title: 'ASI Calculator', title: 'ASI Calculator',
@ -16,7 +26,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={firaCode.className}>{children}</body> <body className={hankenGrotesk.variable}>{children}</body>
</html> </html>
) )
} }

View File

@ -13,7 +13,7 @@
border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2); border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2);
border-right: 1px solid rgba(var(--foreground-rgb), 0.2); border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
padding: 1rem; padding: 1rem;
font-size: 0.8rem; font-size: 0.9rem;
} }
.label { .label {

View File

@ -1,9 +1,8 @@
.input { .input {
all: unset; all: unset;
width: 70px; width: 60px;
padding: 0 0.2rem; padding: 0 0.2rem;
text-align: center; text-align: center;
background-color: rgba(var(--background-rgb), 0.4);
} }
.input:hover { .input:hover {
@ -13,19 +12,14 @@
.input:focus-within { .input:focus-within {
outline: none; outline: none;
background-color: rgba(var(--background-rgb), 0.9); background-color: rgba(var(--background-rgb), 0.9);
color: rgb(var(--foreground-rgb-highlight));
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.input {
background-color: rgba(var(--foreground-rgb), 0.15);
}
.input:hover { .input:hover {
background-color: rgba(var(--foreground-rgb), 0.2); background-color: rgba(var(--foreground-rgb), 0.1);
} }
.input:focus-within { .input:focus-within {
background-color: rgba(var(--foreground-rgb), 0.3); background-color: rgba(var(--foreground-rgb), 0.2);
} }
} }

View File

@ -1,7 +1,7 @@
.select { .select {
display: inline-block; display: inline-block;
all: unset; all: unset;
padding: 0 0.75rem; padding: 0 0.75rem 0 0;
} }
.selectWrapper { .selectWrapper {

View File

@ -4,9 +4,21 @@
padding: 1.25rem 1.5rem; 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 { .title {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.1rem; font-size: 1.1rem;
min-height: 52px; min-height: 52px;
line-height: 1.75; color: rgb(var(--foreground-rgb-highlight));
} }

View File

@ -4,7 +4,7 @@ The fiat values are fetched from [Coingecko](https://coingecko.com), and the tok
### All About Token Merge ### 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) - [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) - [Fetch.ai: Superintelligence Alliance Token Merge $ASI](https://fetch.ai/blog/superintelligence-alliance-token-merge-asi)