@lovenyberg/ove 0.5.1 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -3
- package/bun.lock +1 -1
- package/docs/index.html +194 -196
- package/docs/plans/2026-02-25-landing-page-harmonization-design.md +89 -0
- package/docs/plans/2026-02-25-landing-page-harmonization-plan.md +604 -0
- package/package.json +1 -1
- package/src/handlers.ts +10 -1
- package/src/router.ts +40 -0
- package/src/setup.ts +51 -16
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Landing Page Harmonization Design
|
|
2
|
+
|
|
3
|
+
**Date:** 2026-02-25
|
|
4
|
+
**Goal:** Update the GitHub Pages landing page (`docs/index.html`) to match the local app's dev-tool aesthetic (`public/index.html`).
|
|
5
|
+
|
|
6
|
+
## Direction
|
|
7
|
+
|
|
8
|
+
Option B: "Dev-first" — the app's clean monospace/IDE look becomes the shared visual identity. The landing page drops its editorial serif/copper warmth and adopts the app's cool palette, monospace headings, and flat styling.
|
|
9
|
+
|
|
10
|
+
## Color Palette
|
|
11
|
+
|
|
12
|
+
Adopt the app's CSS variables exactly:
|
|
13
|
+
|
|
14
|
+
| Landing page (old) | App (new) | Purpose |
|
|
15
|
+
|--------------------|----------------------|----------------|
|
|
16
|
+
| `--base: #1a1714` | `--bg: #1a1a1a` | Background |
|
|
17
|
+
| `--surface: #232019`| `--bg-panel: #161616`| Panel bg |
|
|
18
|
+
| `--raised: #2c2822`| `--bg-item: #1e1e1e` | Raised surface |
|
|
19
|
+
| `--subtle: #3a3430`| `--border: #2a2a2a` | Borders |
|
|
20
|
+
| — | `--border-light: #333`| Light borders |
|
|
21
|
+
| `--text: #d4cdc4` | `--text: #e0e0e0` | Body text |
|
|
22
|
+
| `--text-bright` | `--text` (same) | Headings |
|
|
23
|
+
| `--muted: #8a7e72` | `--text-dim: #777` | Muted text |
|
|
24
|
+
| `--copper*` (all) | `--accent: #8ab4f8` | Accent color |
|
|
25
|
+
| `--red: #b85c4e` | `--red: #f28b82` | Error/red |
|
|
26
|
+
| — | `--green: #4ade80` | Success |
|
|
27
|
+
| — | `--amber: #fbbf24` | Warning |
|
|
28
|
+
|
|
29
|
+
## Typography
|
|
30
|
+
|
|
31
|
+
- **Headings, nav, labels, code**: JetBrains Mono (already loaded, promoted to primary)
|
|
32
|
+
- **Body paragraphs**: `Inter, system-ui, -apple-system, sans-serif`
|
|
33
|
+
- **Drop**: Bitter, Source Serif 4 (all serif fonts removed)
|
|
34
|
+
- **Google Fonts**: Replace Bitter/Source Serif imports with Inter (400, 500)
|
|
35
|
+
|
|
36
|
+
## Navigation
|
|
37
|
+
|
|
38
|
+
New sticky nav bar matching app header:
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
[logo] ove [features] [setup] [commands] [deploy] [github]
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
- `--bg-panel` background, 1px `--border` bottom border
|
|
45
|
+
- Small pill-shaped nav links styled like app's `.nav-link`
|
|
46
|
+
- Links scroll to page sections
|
|
47
|
+
- GitHub link goes to repo
|
|
48
|
+
|
|
49
|
+
## Hero
|
|
50
|
+
|
|
51
|
+
Compact section (~40vh, not 100vh):
|
|
52
|
+
|
|
53
|
+
- Portrait left (~140px), name + subtitle + quote + buttons right
|
|
54
|
+
- Same grid layout, tighter spacing
|
|
55
|
+
- No scroll hint, no radial gradient — flat `--bg`
|
|
56
|
+
- Buttons: monospace, `--accent` border/hover
|
|
57
|
+
|
|
58
|
+
## Ove Quotes
|
|
59
|
+
|
|
60
|
+
Keep all quotes, restyle:
|
|
61
|
+
|
|
62
|
+
- Left border: `--accent` (#8ab4f8)
|
|
63
|
+
- Text color: `--text-dim` (#777)
|
|
64
|
+
- Attribution: JetBrains Mono
|
|
65
|
+
- Smaller, less prominent
|
|
66
|
+
|
|
67
|
+
## Components
|
|
68
|
+
|
|
69
|
+
- Feature grid labels/headings: `--accent` instead of copper
|
|
70
|
+
- Code blocks: `--bg-panel` bg, `--border` border, `--accent` for inline code
|
|
71
|
+
- Command grid dt: `--accent` text on `--bg-panel`
|
|
72
|
+
- All borders: `--border` (#2a2a2a)
|
|
73
|
+
|
|
74
|
+
## Remove
|
|
75
|
+
|
|
76
|
+
- Grain texture overlay (`body::after`)
|
|
77
|
+
- All serif font references (Bitter, Source Serif 4, Georgia)
|
|
78
|
+
- All warm/copper CSS variables
|
|
79
|
+
- Radial gradient on hero (`hero::before`)
|
|
80
|
+
- Full-viewport hero height (100vh -> ~40vh)
|
|
81
|
+
- `.scroll-hint` element and its animation
|
|
82
|
+
|
|
83
|
+
## Keep
|
|
84
|
+
|
|
85
|
+
- All content sections and text
|
|
86
|
+
- Responsive mobile breakpoints
|
|
87
|
+
- fadeUp animations (subtle, fine)
|
|
88
|
+
- Install bar (restyle with accent)
|
|
89
|
+
- Footer (restyle to match)
|
|
@@ -0,0 +1,604 @@
|
|
|
1
|
+
# Landing Page Harmonization Implementation Plan
|
|
2
|
+
|
|
3
|
+
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
4
|
+
|
|
5
|
+
**Goal:** Restyle `docs/index.html` to match the app's dev-tool aesthetic from `public/index.html`.
|
|
6
|
+
|
|
7
|
+
**Architecture:** Single-file change. Replace CSS variables, swap fonts, add nav bar, compact hero, restyle all components. No new files, no build step, no tests (static HTML).
|
|
8
|
+
|
|
9
|
+
**Tech Stack:** HTML, CSS, Google Fonts (Inter, JetBrains Mono)
|
|
10
|
+
|
|
11
|
+
**Design doc:** `docs/plans/2026-02-25-landing-page-harmonization-design.md`
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
### Task 1: Replace CSS variables and fonts
|
|
16
|
+
|
|
17
|
+
**Files:**
|
|
18
|
+
- Modify: `docs/index.html:1-50` (`:root`, Google Fonts link, body styles)
|
|
19
|
+
|
|
20
|
+
**Step 1: Replace Google Fonts import**
|
|
21
|
+
|
|
22
|
+
Change line 10 from Bitter/Source Serif to Inter + JetBrains Mono:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**Step 2: Replace `:root` variables**
|
|
29
|
+
|
|
30
|
+
Replace the entire `:root` block (lines 12-24) with:
|
|
31
|
+
|
|
32
|
+
```css
|
|
33
|
+
:root {
|
|
34
|
+
--bg: #1a1a1a;
|
|
35
|
+
--bg-panel: #161616;
|
|
36
|
+
--bg-item: #1e1e1e;
|
|
37
|
+
--bg-item-hover: #252525;
|
|
38
|
+
--border: #2a2a2a;
|
|
39
|
+
--border-light: #333;
|
|
40
|
+
--text: #e0e0e0;
|
|
41
|
+
--text-dim: #777;
|
|
42
|
+
--text-muted: #555;
|
|
43
|
+
--accent: #8ab4f8;
|
|
44
|
+
--green: #4ade80;
|
|
45
|
+
--red: #f28b82;
|
|
46
|
+
--amber: #fbbf24;
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**Step 3: Update body styles**
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
body {
|
|
54
|
+
font-family: "Inter", system-ui, -apple-system, sans-serif;
|
|
55
|
+
color: var(--text);
|
|
56
|
+
line-height: 1.7;
|
|
57
|
+
background: var(--bg);
|
|
58
|
+
font-size: 16px;
|
|
59
|
+
-webkit-font-smoothing: antialiased;
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
**Step 4: Remove grain overlay**
|
|
64
|
+
|
|
65
|
+
Delete the entire `body::after` block (lines 39-48).
|
|
66
|
+
|
|
67
|
+
**Step 5: Commit**
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
git add docs/index.html
|
|
71
|
+
git commit -m "style(landing): replace color palette and fonts with app tokens"
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
### Task 2: Add nav bar and compact hero
|
|
77
|
+
|
|
78
|
+
**Files:**
|
|
79
|
+
- Modify: `docs/index.html` — CSS (hero section, new header styles) and HTML (add `<header>`, restructure hero)
|
|
80
|
+
|
|
81
|
+
**Step 1: Add header CSS**
|
|
82
|
+
|
|
83
|
+
Add new styles after the reset (`* { ... }`):
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
header {
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
justify-content: space-between;
|
|
90
|
+
padding: 0.5rem 1rem;
|
|
91
|
+
border-bottom: 1px solid var(--border);
|
|
92
|
+
background: var(--bg-panel);
|
|
93
|
+
position: sticky;
|
|
94
|
+
top: 0;
|
|
95
|
+
z-index: 100;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.header-left {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
gap: 1rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.header-logo {
|
|
105
|
+
width: 24px;
|
|
106
|
+
height: 24px;
|
|
107
|
+
border-radius: 3px;
|
|
108
|
+
object-fit: cover;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.header-left h1 {
|
|
112
|
+
font-family: "JetBrains Mono", monospace;
|
|
113
|
+
font-size: 0.85rem;
|
|
114
|
+
font-weight: 600;
|
|
115
|
+
letter-spacing: 0.05em;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.nav-link {
|
|
119
|
+
color: var(--text-dim);
|
|
120
|
+
text-decoration: none;
|
|
121
|
+
font-family: "JetBrains Mono", monospace;
|
|
122
|
+
font-size: 0.7rem;
|
|
123
|
+
padding: 0.2rem 0.5rem;
|
|
124
|
+
border: 1px solid var(--border);
|
|
125
|
+
border-radius: 3px;
|
|
126
|
+
border-bottom: 1px solid var(--border);
|
|
127
|
+
transition: all 0.15s;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.nav-link:hover {
|
|
131
|
+
color: var(--text);
|
|
132
|
+
border-color: var(--border-light);
|
|
133
|
+
background: var(--bg-item);
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
**Step 2: Restyle hero to compact**
|
|
138
|
+
|
|
139
|
+
Replace existing `.hero` and children CSS with:
|
|
140
|
+
|
|
141
|
+
```css
|
|
142
|
+
.hero {
|
|
143
|
+
display: flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
justify-content: center;
|
|
146
|
+
padding: 64px 32px;
|
|
147
|
+
border-bottom: 1px solid var(--border);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.hero-inner {
|
|
151
|
+
display: grid;
|
|
152
|
+
grid-template-columns: auto 1fr;
|
|
153
|
+
gap: 48px;
|
|
154
|
+
align-items: center;
|
|
155
|
+
max-width: 900px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.hero-portrait {
|
|
159
|
+
width: 140px;
|
|
160
|
+
height: 140px;
|
|
161
|
+
border-radius: 4px;
|
|
162
|
+
border: 1px solid var(--border);
|
|
163
|
+
box-shadow: 0 12px 32px rgba(0,0,0,0.3);
|
|
164
|
+
object-fit: cover;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.hero-text h1 {
|
|
168
|
+
font-family: "JetBrains Mono", monospace;
|
|
169
|
+
font-size: 2.5rem;
|
|
170
|
+
font-weight: 700;
|
|
171
|
+
color: var(--text);
|
|
172
|
+
letter-spacing: -0.02em;
|
|
173
|
+
line-height: 1;
|
|
174
|
+
margin-bottom: 6px;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.hero-subtitle {
|
|
178
|
+
font-family: "JetBrains Mono", monospace;
|
|
179
|
+
font-size: 0.8rem;
|
|
180
|
+
color: var(--text-dim);
|
|
181
|
+
font-weight: 400;
|
|
182
|
+
letter-spacing: 0.08em;
|
|
183
|
+
text-transform: uppercase;
|
|
184
|
+
margin-bottom: 20px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.hero-quote {
|
|
188
|
+
font-style: italic;
|
|
189
|
+
color: var(--text-dim);
|
|
190
|
+
font-size: 1.05rem;
|
|
191
|
+
line-height: 1.5;
|
|
192
|
+
margin-bottom: 24px;
|
|
193
|
+
max-width: 420px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.hero-quote span {
|
|
197
|
+
color: var(--text-muted);
|
|
198
|
+
font-style: normal;
|
|
199
|
+
font-size: 0.8rem;
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
**Step 3: Restyle buttons**
|
|
204
|
+
|
|
205
|
+
```css
|
|
206
|
+
.btn {
|
|
207
|
+
display: inline-block;
|
|
208
|
+
font-family: "JetBrains Mono", monospace;
|
|
209
|
+
font-size: 0.8rem;
|
|
210
|
+
font-weight: 500;
|
|
211
|
+
text-decoration: none;
|
|
212
|
+
padding: 10px 24px;
|
|
213
|
+
border: 1px solid var(--border-light);
|
|
214
|
+
border-bottom: 1px solid var(--border-light);
|
|
215
|
+
color: var(--accent);
|
|
216
|
+
background: transparent;
|
|
217
|
+
border-radius: 3px;
|
|
218
|
+
transition: all 0.15s;
|
|
219
|
+
letter-spacing: 0.02em;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.btn:hover {
|
|
223
|
+
background: var(--accent);
|
|
224
|
+
color: var(--bg);
|
|
225
|
+
border-color: var(--accent);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.btn-ghost {
|
|
229
|
+
border-color: var(--border);
|
|
230
|
+
color: var(--text-dim);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.btn-ghost:hover {
|
|
234
|
+
border-color: var(--text-dim);
|
|
235
|
+
color: var(--text);
|
|
236
|
+
background: transparent;
|
|
237
|
+
}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
**Step 4: Add header HTML and remove scroll-hint**
|
|
241
|
+
|
|
242
|
+
Add `<header>` element before `<section class="hero">`:
|
|
243
|
+
|
|
244
|
+
```html
|
|
245
|
+
<header>
|
|
246
|
+
<div class="header-left">
|
|
247
|
+
<img class="header-logo" src="logo.png" alt="">
|
|
248
|
+
<h1>ove</h1>
|
|
249
|
+
<a class="nav-link" href="#features">features</a>
|
|
250
|
+
<a class="nav-link" href="#getting-started">setup</a>
|
|
251
|
+
<a class="nav-link" href="#commands">commands</a>
|
|
252
|
+
<a class="nav-link" href="#deploy">deploy</a>
|
|
253
|
+
</div>
|
|
254
|
+
<a class="nav-link" href="https://github.com/jacksoncage/ove">github</a>
|
|
255
|
+
</header>
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
Remove the `<a href="#getting-started" class="scroll-hint">...</a>` element from the hero.
|
|
259
|
+
|
|
260
|
+
Remove the `.hero::before` CSS block (radial gradient).
|
|
261
|
+
|
|
262
|
+
Remove the `.scroll-hint` and `.scroll-hint svg` CSS blocks and the `@keyframes bobDown` animation.
|
|
263
|
+
|
|
264
|
+
**Step 5: Add `id="features"` and `id="commands"`**
|
|
265
|
+
|
|
266
|
+
Add `id="features"` to the "What Ove Does" section and `id="commands"` to the "Commands" section so nav links work.
|
|
267
|
+
|
|
268
|
+
**Step 6: Commit**
|
|
269
|
+
|
|
270
|
+
```bash
|
|
271
|
+
git add docs/index.html
|
|
272
|
+
git commit -m "style(landing): add nav bar and compact hero"
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
277
|
+
### Task 3: Restyle content sections
|
|
278
|
+
|
|
279
|
+
**Files:**
|
|
280
|
+
- Modify: `docs/index.html` — CSS for sections, features, quotes, code blocks, commands, pipeline, footer
|
|
281
|
+
|
|
282
|
+
**Step 1: Update section headers**
|
|
283
|
+
|
|
284
|
+
```css
|
|
285
|
+
h2 {
|
|
286
|
+
font-family: "JetBrains Mono", monospace;
|
|
287
|
+
font-size: 1.3rem;
|
|
288
|
+
font-weight: 700;
|
|
289
|
+
color: var(--text);
|
|
290
|
+
margin-bottom: 8px;
|
|
291
|
+
letter-spacing: -0.01em;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.section-note {
|
|
295
|
+
color: var(--text-dim);
|
|
296
|
+
font-style: italic;
|
|
297
|
+
margin-bottom: 32px;
|
|
298
|
+
font-size: 0.9rem;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
h3 {
|
|
302
|
+
font-family: "JetBrains Mono", monospace;
|
|
303
|
+
font-size: 0.9rem;
|
|
304
|
+
font-weight: 500;
|
|
305
|
+
color: var(--accent);
|
|
306
|
+
margin: 32px 0 10px;
|
|
307
|
+
letter-spacing: 0.01em;
|
|
308
|
+
}
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
**Step 2: Update features grid**
|
|
312
|
+
|
|
313
|
+
```css
|
|
314
|
+
.features {
|
|
315
|
+
display: grid;
|
|
316
|
+
grid-template-columns: 1fr 1fr;
|
|
317
|
+
gap: 1px;
|
|
318
|
+
background: var(--border);
|
|
319
|
+
border: 1px solid var(--border);
|
|
320
|
+
margin-top: 32px;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.feature {
|
|
324
|
+
padding: 24px 20px;
|
|
325
|
+
background: var(--bg);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.feature-label {
|
|
329
|
+
font-family: "JetBrains Mono", monospace;
|
|
330
|
+
font-size: 0.65rem;
|
|
331
|
+
text-transform: uppercase;
|
|
332
|
+
letter-spacing: 0.12em;
|
|
333
|
+
color: var(--text-muted);
|
|
334
|
+
margin-bottom: 8px;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.feature h3 {
|
|
338
|
+
font-family: "JetBrains Mono", monospace;
|
|
339
|
+
font-size: 0.95rem;
|
|
340
|
+
color: var(--text);
|
|
341
|
+
margin: 0 0 8px;
|
|
342
|
+
font-weight: 500;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.feature p {
|
|
346
|
+
color: var(--text-dim);
|
|
347
|
+
font-size: 0.85rem;
|
|
348
|
+
line-height: 1.55;
|
|
349
|
+
margin-bottom: 10px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.feature code {
|
|
353
|
+
font-family: "JetBrains Mono", monospace;
|
|
354
|
+
font-size: 0.75rem;
|
|
355
|
+
color: var(--accent);
|
|
356
|
+
background: var(--bg-item);
|
|
357
|
+
padding: 3px 8px;
|
|
358
|
+
border: 1px solid var(--border);
|
|
359
|
+
display: inline-block;
|
|
360
|
+
}
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
**Step 3: Update quotes**
|
|
364
|
+
|
|
365
|
+
```css
|
|
366
|
+
.ove-says {
|
|
367
|
+
border-left: 2px solid var(--accent);
|
|
368
|
+
padding: 14px 0 14px 20px;
|
|
369
|
+
margin: 32px 0;
|
|
370
|
+
font-style: italic;
|
|
371
|
+
color: var(--text-dim);
|
|
372
|
+
font-size: 0.95rem;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.ove-says .attr {
|
|
376
|
+
display: block;
|
|
377
|
+
font-style: normal;
|
|
378
|
+
color: var(--text-muted);
|
|
379
|
+
font-size: 0.75rem;
|
|
380
|
+
margin-top: 6px;
|
|
381
|
+
font-family: "JetBrains Mono", monospace;
|
|
382
|
+
}
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
**Step 4: Update code blocks and inline code**
|
|
386
|
+
|
|
387
|
+
```css
|
|
388
|
+
pre {
|
|
389
|
+
background: var(--bg-panel);
|
|
390
|
+
border: 1px solid var(--border);
|
|
391
|
+
padding: 16px 18px;
|
|
392
|
+
overflow-x: auto;
|
|
393
|
+
font-size: 0.8rem;
|
|
394
|
+
margin: 14px 0;
|
|
395
|
+
line-height: 1.65;
|
|
396
|
+
position: relative;
|
|
397
|
+
border-radius: 3px;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
pre::before {
|
|
401
|
+
content: attr(data-label);
|
|
402
|
+
position: absolute;
|
|
403
|
+
top: 0;
|
|
404
|
+
right: 0;
|
|
405
|
+
font-family: "JetBrains Mono", monospace;
|
|
406
|
+
font-size: 0.6rem;
|
|
407
|
+
text-transform: uppercase;
|
|
408
|
+
letter-spacing: 0.1em;
|
|
409
|
+
color: var(--text-muted);
|
|
410
|
+
padding: 4px 10px;
|
|
411
|
+
background: var(--bg-item);
|
|
412
|
+
border-left: 1px solid var(--border);
|
|
413
|
+
border-bottom: 1px solid var(--border);
|
|
414
|
+
border-radius: 0 3px 0 3px;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
code {
|
|
418
|
+
font-family: "JetBrains Mono", monospace;
|
|
419
|
+
font-size: 0.85em;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
pre code {
|
|
423
|
+
color: var(--text);
|
|
424
|
+
font-size: 1em;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
p code {
|
|
428
|
+
background: var(--bg-item);
|
|
429
|
+
border: 1px solid var(--border);
|
|
430
|
+
padding: 1px 6px;
|
|
431
|
+
color: var(--accent);
|
|
432
|
+
font-size: 0.82em;
|
|
433
|
+
border-radius: 2px;
|
|
434
|
+
}
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
**Step 5: Update command grid**
|
|
438
|
+
|
|
439
|
+
```css
|
|
440
|
+
.cmd-grid dt {
|
|
441
|
+
font-family: "JetBrains Mono", monospace;
|
|
442
|
+
font-size: 0.78rem;
|
|
443
|
+
color: var(--accent);
|
|
444
|
+
background: var(--bg-panel);
|
|
445
|
+
white-space: nowrap;
|
|
446
|
+
border-right: 1px solid var(--border);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.cmd-grid dd {
|
|
450
|
+
color: var(--text-dim);
|
|
451
|
+
}
|
|
452
|
+
```
|
|
453
|
+
|
|
454
|
+
Update `.cmd-grid` border to use `var(--border)` and `dt`/`dd` border-bottom likewise.
|
|
455
|
+
|
|
456
|
+
**Step 6: Update pipeline steps**
|
|
457
|
+
|
|
458
|
+
Replace copper references:
|
|
459
|
+
|
|
460
|
+
```css
|
|
461
|
+
.pipeline .step-n {
|
|
462
|
+
color: var(--text-muted);
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.pipeline .step-arrow {
|
|
466
|
+
color: var(--border-light);
|
|
467
|
+
}
|
|
468
|
+
```
|
|
469
|
+
|
|
470
|
+
**Step 7: Update install bar**
|
|
471
|
+
|
|
472
|
+
```css
|
|
473
|
+
.install-bar {
|
|
474
|
+
background: var(--bg-panel);
|
|
475
|
+
border-bottom: 1px solid var(--border);
|
|
476
|
+
padding: 16px 32px;
|
|
477
|
+
text-align: center;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.install-bar code {
|
|
481
|
+
font-family: "JetBrains Mono", monospace;
|
|
482
|
+
font-size: 0.82rem;
|
|
483
|
+
color: var(--accent);
|
|
484
|
+
letter-spacing: -0.02em;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.install-bar code::before {
|
|
488
|
+
content: "$ ";
|
|
489
|
+
color: var(--text-muted);
|
|
490
|
+
}
|
|
491
|
+
```
|
|
492
|
+
|
|
493
|
+
**Step 8: Update links, strong, footer**
|
|
494
|
+
|
|
495
|
+
```css
|
|
496
|
+
a {
|
|
497
|
+
color: var(--accent);
|
|
498
|
+
text-decoration: none;
|
|
499
|
+
border-bottom: 1px solid var(--border);
|
|
500
|
+
transition: border-color 0.15s;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
a:hover {
|
|
504
|
+
border-bottom-color: var(--accent);
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
strong {
|
|
508
|
+
color: var(--text);
|
|
509
|
+
font-weight: 500;
|
|
510
|
+
}
|
|
511
|
+
```
|
|
512
|
+
|
|
513
|
+
Footer:
|
|
514
|
+
|
|
515
|
+
```css
|
|
516
|
+
footer {
|
|
517
|
+
padding: 40px 32px;
|
|
518
|
+
text-align: center;
|
|
519
|
+
color: var(--text-dim);
|
|
520
|
+
font-size: 0.78rem;
|
|
521
|
+
border-top: 1px solid var(--border);
|
|
522
|
+
font-family: "JetBrains Mono", monospace;
|
|
523
|
+
letter-spacing: 0.02em;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
footer a {
|
|
527
|
+
color: var(--text-muted);
|
|
528
|
+
border-bottom: none;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
footer a:hover {
|
|
532
|
+
color: var(--accent);
|
|
533
|
+
}
|
|
534
|
+
```
|
|
535
|
+
|
|
536
|
+
**Step 9: Update numbered steps list**
|
|
537
|
+
|
|
538
|
+
```css
|
|
539
|
+
.steps li::before {
|
|
540
|
+
color: var(--text-muted);
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.steps li {
|
|
544
|
+
border-bottom: 1px solid var(--border);
|
|
545
|
+
}
|
|
546
|
+
```
|
|
547
|
+
|
|
548
|
+
**Step 10: Update section borders**
|
|
549
|
+
|
|
550
|
+
```css
|
|
551
|
+
.section {
|
|
552
|
+
padding: 64px 0;
|
|
553
|
+
border-bottom: 1px solid var(--border);
|
|
554
|
+
}
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
**Step 11: Update responsive breakpoint**
|
|
558
|
+
|
|
559
|
+
Keep the media query at `max-width: 700px` but ensure all references use new variable names. Specific changes:
|
|
560
|
+
- `.hero-text h1 { font-size: 2rem; }` (was 3rem)
|
|
561
|
+
- `.hero-portrait { width: 120px; height: 120px; }` (was 160px)
|
|
562
|
+
|
|
563
|
+
**Step 12: Update animations**
|
|
564
|
+
|
|
565
|
+
Keep fadeUp animations but update selectors to match new compact hero sizing. No copper references to fix in animations.
|
|
566
|
+
|
|
567
|
+
**Step 13: Commit**
|
|
568
|
+
|
|
569
|
+
```bash
|
|
570
|
+
git add docs/index.html
|
|
571
|
+
git commit -m "style(landing): restyle all content sections with app design tokens"
|
|
572
|
+
```
|
|
573
|
+
|
|
574
|
+
---
|
|
575
|
+
|
|
576
|
+
### Task 4: Verify and clean up
|
|
577
|
+
|
|
578
|
+
**Files:**
|
|
579
|
+
- Modify: `docs/index.html` — final pass
|
|
580
|
+
|
|
581
|
+
**Step 1: Search for any remaining old variable references**
|
|
582
|
+
|
|
583
|
+
Search the file for any remaining `var(--base)`, `var(--surface)`, `var(--raised)`, `var(--subtle)`, `var(--copper`, `var(--text-bright)`, `var(--muted)` references. Replace any found.
|
|
584
|
+
|
|
585
|
+
**Step 2: Search for remaining serif font references**
|
|
586
|
+
|
|
587
|
+
Search for `Bitter`, `Source Serif`, `Georgia`, `serif`. Remove any found.
|
|
588
|
+
|
|
589
|
+
**Step 3: Open in browser and visually verify**
|
|
590
|
+
|
|
591
|
+
Open `docs/index.html` in browser. Check:
|
|
592
|
+
- Nav bar renders with logo, links scroll to sections
|
|
593
|
+
- Hero is compact, not full viewport
|
|
594
|
+
- All text is readable (no warm tones remaining)
|
|
595
|
+
- Code blocks and command grid use blue accent
|
|
596
|
+
- Quotes have blue left border
|
|
597
|
+
- Mobile responsive still works (resize to 400px)
|
|
598
|
+
|
|
599
|
+
**Step 4: Final commit**
|
|
600
|
+
|
|
601
|
+
```bash
|
|
602
|
+
git add docs/index.html
|
|
603
|
+
git commit -m "style(landing): clean up remaining old variable references"
|
|
604
|
+
```
|
package/package.json
CHANGED