blob: 74e4c86189e0385b955f01ae09b05ccdb002a1af (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
/* variables.css */
:root {
/* Dark theme colors (default) */
--bg: #060b10;
--bg2: #0c1520;
--surface: #101e2d;
--border: #182840;
--accent: #a855f7;
--accent2: #00ff88;
--text: #c4d6e8;
--text-dim: #7a9bb8;
--muted: #304860;
/* Type colors */
--color-tech: #a855f7; /* purple */
--color-life: #f59e0b; /* amber */
--color-quote: #00ff88; /* green */
--color-link: #38bdf8; /* cyan */
--color-photo: #ec4899; /* pink */
/* Typography */
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
--font-head: 'Oxanium', sans-serif;
/* Font sizes (base: 17px on html) */
--fs-body: 0.95rem;
--fs-nav: 0.8rem;
--fs-badge: 0.7rem;
--fs-btn: 0.8rem;
--fs-h3: 1.5rem;
--fs-h2: clamp(1.7rem, 6vw, 3rem);
/* Layout */
--container-max: 1080px;
--container-narrow: 768px;
--gap-sm: 0.5rem;
--gap-md: 1.5rem;
--gap-lg: 2.5rem;
--gap-xl: 4rem;
/* Spacing */
--section-py-mobile: 4rem;
--section-py-desktop: 6rem;
--card-px-mobile: 1.5rem;
--card-px-desktop: 2rem;
/* Transitions */
--transition: all 0.2s ease;
--transition-slow: all 0.75s cubic-bezier(0.16,1,0.3,1);
}
html.theme-light {
/* Light theme */
--bg: #f0f4f8;
--bg2: #e2eaf4;
--surface: #d4dff0;
--border: #a8bdd8;
--accent: #7c3aed;
--accent2: #008f5a;
--text: #0d1b2a;
--text-dim: #2e4a6a;
--muted: #6888a8;
}
/* Breakpoints as CSS variables for reference */
@media (max-width: 479px) {
:root {
--bp: "mobile";
}
}
@media (min-width: 480px) {
:root {
--bp: "sm";
}
}
@media (min-width: 768px) {
:root {
--bp: "md";
}
}
@media (min-width: 1200px) {
:root {
--bp: "lg";
}
}
|
