feat(design): single-page consolidation, drop typeface picker
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.
This commit is contained in:
+14
-9
@@ -17,8 +17,6 @@
|
||||
--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;
|
||||
--font-body: var(--font-sans);
|
||||
|
||||
/* Breakpoints */
|
||||
--breakpoint-xs: 576px;
|
||||
|
||||
@@ -44,14 +42,9 @@ html {
|
||||
line-height: 1.5;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* Typeface picker overrides */
|
||||
html[data-typeface="sans"] { --font-body: var(--font-sans); }
|
||||
html[data-typeface="serif"] { --font-body: var(--font-serif); line-height: 1.6; }
|
||||
html[data-typeface="mono"] { --font-body: var(--font-mono); font-size: 15px; letter-spacing: -0.01em; }
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -82,11 +75,23 @@ 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;
|
||||
opacity 120ms linear, text-decoration-color 120ms linear,
|
||||
outline-color 120ms linear;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Reference in New Issue
Block a user