lerko/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(design): reader view — strip terminal chrome, add typography controls

Browse Source 
Replace monospace-terminal aesthetic with clean reader layout. System
sans-serif default, typeface picker (sans/serif/mono) with per-face
optical tuning. Warm color palettes (slate dark, bone light), crafted
link underlines, WCAG AA contrast on all text tiers. Semantic HTML
throughout: proper heading hierarchy, <time> elements, role=group,
<dl>/<table>/<article> where appropriate. Net -140 lines.
This commit is contained in:
Tyler Koenig
2026-05-24 18:28:02 -04:00
parent 0c5d9e03b1
commit 32455bf7a7
11 changed files with 267 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/globals.css
+40 -51
View File
@@ -3,28 +3,21 @@
@variant dark (&:where(.dark, .dark *));
@theme {
/* macOS Classic Dark (default) */
--color-bg: #131313;
--color-surface: #1e1d1e;
--color-surface-raised: #272727;
--color-border: #3a3a3a;
--color-border-bright: #404040;
--color-text: #caccca;
--color-text-label: #9e9e9e;
--color-text-dim: #8f8f8f;
--color-accent-green: #62ba46;
--color-accent-red: #c74028;
/* Timeline type colors — dark */
--color-timeline-career: #62ba46;
--color-timeline-education: #c28b12;
--color-timeline-cert: #c75828;
--color-timeline-project: #c72855;
--color-timeline-homelab: #e1d797;
/* 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-mono: "Source Code Pro", ui-monospace, monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--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;
@@ -42,28 +35,22 @@
--spacing-2lh: 2lh;
--spacing-3lh: 3lh;
--spacing-4lh: 4lh;
/* Animations */
--animate-fade-in: fadeIn 120ms linear forwards;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Base */
html {
scroll-behavior: smooth;
font-size: 15px;
font-size: 16px;
line-height: 1.5;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-mono);
font-family: var(--font-body);
}
@keyframes blink { 50% { opacity: 0; } }
.animate-cursor { animation: blink 1s step-start infinite; }
/* 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 {
* {
@@ -73,31 +60,33 @@ html {
}
}
/* macOS Classic Light overrides */
/* Bone (light) overrides */
:root:not(.dark) {
--color-bg: #ffffff;
--color-surface: #f9f9f9;
--color-surface-raised: #f7f7f7;
--color-border: #e0e0e0;
--color-border-bright: #d2d2d2;
--color-text: #000000;
--color-text-label: #505050;
--color-text-dim: #929292;
--color-accent-green: #036a07;
--color-accent-red: #d21f07;
--color-timeline-career: #036a07;
--color-timeline-education: #0433ff;
--color-timeline-cert: #957931;
--color-timeline-project: #6f42c1;
--color-timeline-homelab: #0000a2;
--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;
}
/* Default transitions — linear, fast */
/* Link underlines */
a {
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--color-border-bright);
}
a:hover {
text-decoration-color: currentColor;
}
/* Default transitions */
a,
button {
transition: color 120ms linear, border-color 120ms linear,
background-color 120ms linear, opacity 120ms linear;
opacity 120ms linear, text-decoration-color 120ms linear;
}
@media (prefers-reduced-motion: reduce) {