migrate to utopia fluid type and space scales across all CSS

This commit is contained in:
Pontoporeia
2026-04-07 15:13:48 +02:00
parent ad06bbbcaf
commit f6977384b9
9 changed files with 383 additions and 352 deletions

View File

@@ -85,7 +85,7 @@ body > header {
}
body > header nav {
padding: 1.44rem 1.5rem;
padding: var(--space-s) var(--space-s);
display: flex;
align-items: center;
justify-content: space-between;
@@ -94,13 +94,13 @@ body > header nav {
.nav-left {
display: flex;
align-items: center;
gap: 3rem;
gap: var(--space-l);
}
.nav-left-links,
.nav-right-links {
display: flex;
gap: 3rem;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
@@ -109,17 +109,16 @@ body > header nav {
body > header nav > a {
font-family: var(--font-display);
font-size: 1.21rem;
font-size: var(--step-0);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
/* font-weight: 400; */
}
body > header nav > ul {
display: flex;
gap: 3rem;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
@@ -127,12 +126,11 @@ body > header nav > ul {
}
body > header nav ul a {
font-size: 1.04rem;
font-size: var(--step--1);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
/* font-weight: 400; */
transition: opacity 0.15s;
}
@@ -162,8 +160,8 @@ body > header nav ul a[aria-current="page"] {
body > header form[role="search"] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1.5rem;
gap: var(--space-2xs);
padding: var(--space-3xs) var(--space-s);
border: 1px solid var(--accent-primary);
border-radius: 0;
background: var(--bg-primary);
@@ -182,10 +180,10 @@ body > header form[role="search"] svg {
body > header form[role="search"] input {
flex: 1;
border: none;
font-size: 1.04rem;
font-size: var(--step--1);
color: var(--text-primary);
background: transparent;
padding: 0.15rem 0;
padding: var(--space-3xs) 0;
font-family: inherit;
}
@@ -216,10 +214,10 @@ body > header form[role="search"] input::placeholder {
top: -999px;
left: 1rem;
z-index: 9999;
padding: 0.5rem 1rem;
padding: var(--space-2xs) var(--space-s);
background: var(--accent-primary);
color: var(--text-primary);
font-size: 0.99rem;
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 4px;