c36cc94437
- introduce Timeline component with scroll-in animation and type-colored spine dots (career/edu/cert/project/homelab) - swap terminal-noir palette for macOS Classic dark/light with matching timeline color tokens in globals.css - add light mode overrides, cursor blink keyframe, font-size 14px base - update Widget header: prefix/name split, bracket badge, no divider rule - align archive and homelab page headers to ❯ prompt style - convert all font-sans prose in homelab/archive to font-mono - rename widget titles to namespaced paths (homelab/network, etc.) - skills label: uppercase tracking → plain text-sm; remove row borders
94 lines
2.3 KiB
CSS
94 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@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;
|
|
|
|
/* Typography */
|
|
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
|
--font-sans: ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Breakpoints */
|
|
--breakpoint-xs: 576px;
|
|
|
|
/* Animations */
|
|
--animate-fade-in: fadeIn 120ms linear forwards;
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
}
|
|
|
|
/* Base */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: 14px;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
.animate-cursor { animation: blink 1s step-start infinite; }
|
|
|
|
@layer base {
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* macOS Classic 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;
|
|
}
|
|
|
|
/* Default transitions — linear, fast */
|
|
a,
|
|
button {
|
|
transition: color 120ms linear, border-color 120ms linear,
|
|
background-color 120ms linear, opacity 120ms linear;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|