Skip to content

Commit 8a4710d

Browse files
fullstackjamclaude
fullstackjam
and
claude
committed
feat(ui): terminal-native redesign — fully-mono, dark-first
Refined terminal aesthetic across home, explore, docs, header, footer and config cards: Geist Mono throughout, restrained green accent, film-grain texture, hairline borders, soft shadows. Retires neon glows, 3D rotate, gradient text and rainbow blobs for a high-contrast, deliberate look in both dark and a new 'paper terminal' light mode. - variables.css: re-tuned dark/light tokens + grain/vignette/amber/font-mono - app.html: load Geist Mono (drop Outfit) - layout: global mono font, film-grain + vignette overlays, reduced-motion reset - hooks.server.ts: allow fonts.googleapis.com in style-src (fixes blocked font CSS) - home/explore/docs/cards: terminal-motif layouts, AA-contrast text Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 6d2e55c commit 8a4710d

9 files changed

Lines changed: 550 additions & 941 deletions

File tree

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>" />
77
<link rel="preconnect" href="https://fonts.googleapis.com" />
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9-
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet" />
9+
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
1010
<meta property="og:type" content="website" />
1111
<meta property="og:site_name" content="OpenBoot" />
1212
%sveltekit.head%

‎src/hooks.server.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const SECURITY_HEADERS: Record<string, string> = {
1919
'Content-Security-Policy': [
2020
"default-src 'self'",
2121
"script-src 'self' 'unsafe-inline'",
22-
"style-src 'self' 'unsafe-inline'",
22+
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
2323
"img-src 'self' https: data:",
2424
"font-src 'self' https://fonts.gstatic.com",
2525
"connect-src 'self' https://api.github.com https://accounts.google.com https://oauth2.googleapis.com https://formulae.brew.sh https://registry.npmjs.org",

‎src/lib/components/ConfigCard.svelte‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -188,9 +188,8 @@
188188
}
189189
190190
.card:hover {
191-
border-color: var(--card-border-hover);
192-
transform: translateY(-4px);
193-
box-shadow: 0 20px 50px -12px rgba(var(--card-accent), 0.15);
191+
border-color: var(--border-hover);
192+
box-shadow: 0 0 0 1px var(--accent-glow), 0 14px 40px -22px var(--shadow);
194193
}
195194
196195
.card:focus-visible {
@@ -235,11 +234,12 @@
235234
}
236235
237236
.card-name {
238-
font-size: 1.2rem;
239-
font-weight: 700;
237+
font-size: 1.1rem;
238+
font-weight: 600;
240239
color: var(--text-primary);
241240
margin: 0;
242241
line-height: 1.3;
242+
letter-spacing: -0.01em;
243243
}
244244
245245
.card-slug {
@@ -264,7 +264,7 @@
264264
.vis-tag {
265265
padding: 3px 8px;
266266
font-size: 0.6rem;
267-
font-weight: 700;
267+
font-weight: 600;
268268
text-transform: uppercase;
269269
letter-spacing: 0.06em;
270270
border-radius: 5px;
@@ -301,8 +301,8 @@
301301
}
302302
303303
.stat-val {
304-
font-size: 1.5rem;
305-
font-weight: 800;
304+
font-size: 1.4rem;
305+
font-weight: 600;
306306
line-height: 1;
307307
color: var(--text-primary);
308308
font-variant-numeric: tabular-nums;

‎src/lib/components/SiteHeader.svelte‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<header class="site-header">
1414
<div class="header-container">
1515
<div class="header-left">
16-
<a href="/" class="header-logo">OpenBoot</a>
16+
<a href="/" class="header-logo"><span class="prompt">$</span> openboot</a>
1717
<nav class="header-nav">
1818
<a href="/explore" class:active={currentPath === '/explore' || currentPath.startsWith('/explore')}>Explore</a>
1919
<a href="/docs" class:active={currentPath === '/docs' || currentPath.startsWith('/docs')}>Docs</a>
@@ -52,9 +52,10 @@
5252
}
5353
5454
.header-container {
55-
max-width: 1200px;
55+
max-width: 1160px;
5656
margin: 0 auto;
57-
padding: 14px 24px;
57+
height: 56px;
58+
padding: 0 36px;
5859
display: flex;
5960
justify-content: space-between;
6061
align-items: center;
@@ -63,33 +64,39 @@
6364
.header-left {
6465
display: flex;
6566
align-items: center;
66-
gap: 20px;
67+
gap: 26px;
6768
}
6869
6970
.header-logo {
70-
font-family: 'JetBrains Mono', monospace;
71-
font-size: 1.05rem;
72-
font-weight: 700;
73-
color: var(--accent);
74-
letter-spacing: -0.02em;
71+
font-family: var(--font-mono);
72+
font-size: 0.95rem;
73+
font-weight: 500;
74+
color: var(--text-primary);
75+
letter-spacing: -0.01em;
7576
text-decoration: none;
7677
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
7778
}
7879
80+
.header-logo .prompt {
81+
color: var(--accent);
82+
margin-right: 2px;
83+
}
84+
7985
.header-logo:hover {
8086
opacity: 0.8;
8187
}
8288
8389
.header-nav {
8490
display: flex;
8591
align-items: center;
86-
gap: 20px;
92+
gap: 22px;
8793
}
8894
8995
.header-nav a {
9096
color: var(--text-secondary);
91-
font-size: 0.9rem;
92-
font-weight: 500;
97+
font-size: 0.85rem;
98+
font-weight: 400;
99+
text-transform: lowercase;
93100
text-decoration: none;
94101
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
95102
position: relative;

‎src/lib/styles/variables.css‎

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,56 @@
11
:root {
2-
--bg-primary: #0a0a0a;
3-
--bg-secondary: #111111;
4-
--bg-tertiary: #1a1a1a;
5-
--bg-hover: #222222;
6-
--text-primary: #ffffff;
7-
--text-secondary: #a0a0a0;
8-
--text-muted: #666666;
9-
--accent: #22c55e;
10-
--accent-hover: #16a34a;
11-
--accent-glow: rgba(34, 197, 94, 0.15);
12-
--border: #2a2a2a;
13-
--border-hover: #3a3a3a;
14-
--code-bg: #1e1e1e;
15-
--header-bg: rgba(10, 10, 10, 0.9);
16-
--danger: #ef4444;
17-
--danger-hover: #dc2626;
2+
/* dark (default) — refined terminal-native */
3+
--bg-primary: #0a0a0b;
4+
--bg-secondary: #100f12;
5+
--bg-tertiary: #161519;
6+
--bg-hover: #1b1a1f;
7+
--text-primary: #ededf0; /* soft white, not pure #fff */
8+
--text-secondary: #9a99a2;
9+
--text-muted: #777680; /* raised for AA */
10+
--accent: #4ec98a; /* refined mint, not neon */
11+
--accent-hover: #6ad9a0;
12+
--accent-glow: rgba(78, 201, 138, 0.1);
13+
--border: #1f1e22;
14+
--border-hover: #2c2b30;
15+
--code-bg: #161519;
16+
--header-bg: rgba(10, 10, 11, 0.78);
17+
--danger: #d4655c;
18+
--danger-hover: #c0473d;
19+
/* added */
20+
--accent-deep: #2f6b4d;
21+
--amber: #c9a14e;
22+
--shadow: rgba(0, 0, 0, 0.5);
23+
--vignette: color-mix(in srgb, var(--bg-primary) 55%, #000);
24+
--grain-blend: soft-light;
25+
--grain-opacity: 0.05;
26+
--font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
1827
}
1928

2029
[data-theme='light'] {
21-
--bg-primary: #ffffff;
22-
--bg-secondary: #f8f9fa;
23-
--bg-tertiary: #f1f3f4;
24-
--bg-hover: #e8eaed;
25-
--text-primary: #1a1a1a;
26-
--text-secondary: #5f6368;
27-
--text-muted: #9aa0a6;
28-
--accent: #16a34a;
29-
--accent-hover: #15803d;
30-
--accent-glow: rgba(22, 163, 74, 0.15);
31-
--border: #e0e0e0;
32-
--border-hover: #d0d0d0;
33-
--code-bg: #f5f5f5;
34-
--header-bg: rgba(255, 255, 255, 0.9);
35-
--danger: #dc2626;
36-
--danger-hover: #b91c1c;
30+
/* light — "paper terminal" */
31+
--bg-primary: #fafaf8;
32+
--bg-secondary: #ffffff;
33+
--bg-tertiary: #f3f3f0;
34+
--bg-hover: #ecece7;
35+
--text-primary: #18181b;
36+
--text-secondary: #5b5b60;
37+
--text-muted: #767679; /* raised for AA */
38+
--accent: #1c7d52; /* deep green, AA on light */
39+
--accent-hover: #176343;
40+
--accent-glow: rgba(28, 125, 82, 0.08);
41+
--border: #e7e7e2;
42+
--border-hover: #d6d6cf;
43+
--code-bg: #f3f3f0;
44+
--header-bg: rgba(250, 250, 248, 0.78);
45+
--danger: #c0473d;
46+
--danger-hover: #a83a31;
47+
/* added */
48+
--accent-deep: #cde7d9;
49+
--amber: #946a1a;
50+
--shadow: rgba(20, 20, 30, 0.1);
51+
--vignette: transparent;
52+
--grain-blend: multiply;
53+
--grain-opacity: 0.035;
3754
}
3855

3956
/* Shiki dual-theme: dark mode (default) uses --shiki-dark, light mode uses --shiki-light */

‎src/routes/+layout.svelte‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,39 @@
2828
}
2929
3030
:global(body) {
31-
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
31+
font-family: var(--font-mono);
3232
background: var(--bg-primary);
3333
color: var(--text-primary);
34-
line-height: 1.6;
34+
line-height: 1.5;
3535
min-height: 100vh;
36+
position: relative;
37+
-webkit-font-smoothing: antialiased;
38+
text-rendering: optimizeLegibility;
39+
font-feature-settings:
40+
'calt' 1,
41+
'ss01' 1;
42+
}
43+
44+
/* edge vignette for depth (dark only via --vignette) */
45+
:global(body)::before {
46+
content: '';
47+
position: fixed;
48+
inset: 0;
49+
z-index: 0;
50+
pointer-events: none;
51+
background: radial-gradient(120% 80% at 50% -10%, transparent 55%, var(--vignette) 100%);
52+
}
53+
54+
/* film grain — the texture that kills the flat digital look */
55+
:global(body)::after {
56+
content: '';
57+
position: fixed;
58+
inset: 0;
59+
z-index: 9999;
60+
pointer-events: none;
61+
opacity: var(--grain-opacity);
62+
mix-blend-mode: var(--grain-blend);
63+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
3664
}
3765
3866
:global(a) {
@@ -41,6 +69,22 @@
4169
}
4270
4371
:global(code) {
44-
font-family: 'JetBrains Mono', monospace;
72+
font-family: var(--font-mono);
73+
}
74+
75+
:global(::selection) {
76+
background: var(--accent);
77+
color: var(--bg-primary);
78+
}
79+
80+
@media (prefers-reduced-motion: reduce) {
81+
:global(*),
82+
:global(*)::before,
83+
:global(*)::after {
84+
animation-duration: 0.001ms !important;
85+
animation-iteration-count: 1 !important;
86+
transition-duration: 0.001ms !important;
87+
scroll-behavior: auto !important;
88+
}
4589
}
4690
</style>

0 commit comments

Comments
 (0)