lerko
141d66d7bb
Merge projects + homelab + timeline into one scrollable page. Remove typeface picker (sans/serif/mono), keep theme toggle. Nav simplified to name + toggle. Hero gains anchor links for in-page navigation (#projects, #journey, #homelab). Old pages become meta-refresh redirects. Timeline redesigned as two-column grid layout — date left, content right — cutting vertical space ~50%. Focus states added for keyboard nav. Tags dropped from timeline entries.
103 lines
2.4 KiB
CSS
103 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/* Slate (dark, default) */
|
|
--color-bg: #1A1B1E;
|
|
--color-surface: #22242A;
|
|
--color-surface-raised: #2A2D34;
|
|
--color-border: #33363E;
|
|
--color-border-bright: #3E4148;
|
|
--color-text: #D4D4D8;
|
|
--color-text-label: #9CA0AA;
|
|
--color-text-dim: #888D9B;
|
|
|
|
/* Typography */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
|
|
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
|
/* Breakpoints */
|
|
--breakpoint-xs: 576px;
|
|
|
|
/* Character-grid spacing — horizontal (ch) */
|
|
--spacing-1ch: 1ch;
|
|
--spacing-2ch: 2ch;
|
|
--spacing-3ch: 3ch;
|
|
--spacing-4ch: 4ch;
|
|
|
|
/* Character-grid spacing — vertical (lh, requires line-height:1.5 on html) */
|
|
--spacing-qtr-lh: 0.25lh;
|
|
--spacing-half-lh: 0.5lh;
|
|
--spacing-1lh: 1lh;
|
|
--spacing-2lh: 2lh;
|
|
--spacing-3lh: 3lh;
|
|
--spacing-4lh: 4lh;
|
|
}
|
|
|
|
/* Base */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* Bone (light) overrides */
|
|
:root:not(.dark) {
|
|
--color-bg: #FAF8F5;
|
|
--color-surface: #F3F0EB;
|
|
--color-surface-raised: #EBE8E3;
|
|
--color-border: #E0DCD5;
|
|
--color-border-bright: #D4D0C8;
|
|
--color-text: #2C2C2C;
|
|
--color-text-label: #6B6560;
|
|
--color-text-dim: #787068;
|
|
}
|
|
|
|
/* Link underlines */
|
|
a {
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
text-decoration-color: var(--color-border-bright);
|
|
}
|
|
a:hover {
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
/* Focus states */
|
|
a:focus-visible {
|
|
text-decoration-color: currentColor;
|
|
outline: 2px solid var(--color-border-bright);
|
|
outline-offset: 2px;
|
|
}
|
|
button:focus-visible {
|
|
outline: 2px solid var(--color-border-bright);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Default transitions */
|
|
a,
|
|
button {
|
|
transition: color 120ms linear, border-color 120ms linear,
|
|
opacity 120ms linear, text-decoration-color 120ms linear,
|
|
outline-color 120ms linear;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|