Skip to content

Commit adb5617

Browse files
claudeclaude
committed
Restyle docs landing page with light palette and sidebar TOC
Switches from the plain dark single-column layout to a structured light theme: paper background, subtle blue accent, sticky sidebar TOC with scroll-spy, and uppercase section headers with rules. README content is unchanged.
1 parent 9044743 commit adb5617

2 files changed

Lines changed: 200 additions & 95 deletions

File tree

‎docs/style.css‎

Lines changed: 154 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,230 @@
11
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
22

33
:root {
4-
--bg: #0a0a0a;
5-
--bg-code: #141414;
6-
--border: #222;
7-
--text: #e5e5e5;
8-
--text-dim: #888;
9-
--text-heading: #fff;
10-
--accent: #a5b4fc;
11-
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
12-
--mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
13-
}
14-
15-
html { font-size: 16px; scroll-behavior: smooth; }
4+
--bg: #fbfbfa;
5+
--paper: #ffffff;
6+
--ink: #17171a;
7+
--ink-2: #2b2b30;
8+
--mute: #6b6b73;
9+
--mute-2: #a0a0a8;
10+
--line: #e9e8e4;
11+
--line-2: #f1f0ec;
12+
--accent: #2a5fb0;
13+
--accent-bg: #eef3fb;
14+
--code-bg: #f5f4f0;
15+
--font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
16+
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
17+
}
18+
19+
html { scroll-behavior: smooth; }
1620

1721
body {
18-
font-family: var(--font);
1922
background: var(--bg);
20-
color: var(--text);
21-
line-height: 1.7;
23+
color: var(--ink-2);
24+
font-family: var(--font);
25+
font-size: 15px;
26+
line-height: 1.6;
2227
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
2329
}
2430

25-
.container {
26-
max-width: 720px;
31+
.shell {
32+
max-width: 1100px;
2733
margin: 0 auto;
28-
padding: 4rem 1.5rem 6rem;
34+
display: grid;
35+
grid-template-columns: 220px 1fr;
36+
gap: 64px;
37+
padding: 56px 32px 120px;
38+
}
39+
40+
aside.toc {
41+
position: sticky;
42+
top: 40px;
43+
align-self: start;
44+
font-size: 13.5px;
45+
color: var(--mute);
46+
}
47+
.toc-group { margin-bottom: 22px; }
48+
.toc-group h5 {
49+
font-size: 10.5px;
50+
letter-spacing: 0.12em;
51+
text-transform: uppercase;
52+
color: var(--mute-2);
53+
margin: 0 0 10px;
54+
font-weight: 600;
2955
}
56+
.toc a {
57+
display: block;
58+
color: var(--mute);
59+
text-decoration: none;
60+
padding: 4px 0 4px 12px;
61+
border-left: 1px solid var(--line);
62+
border-bottom: none;
63+
line-height: 1.5;
64+
}
65+
.toc a:hover { color: var(--ink); border-left-color: var(--mute-2); }
66+
.toc a.active { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
67+
68+
main { min-width: 0; max-width: 680px; }
3069

3170
h1 {
32-
font-size: 2rem;
33-
font-weight: 600;
34-
color: var(--text-heading);
35-
letter-spacing: -0.03em;
36-
margin-bottom: 0.75rem;
71+
font-size: 40px;
72+
line-height: 1.1;
73+
letter-spacing: -0.025em;
74+
font-weight: 500;
75+
color: var(--ink);
76+
margin: 0 0 18px;
77+
}
78+
79+
h1 + p {
80+
font-size: 17px;
81+
line-height: 1.55;
82+
color: var(--ink-2);
83+
max-width: 58ch;
84+
margin: 0 0 40px;
85+
padding-bottom: 40px;
86+
border-bottom: 1px solid var(--line);
3787
}
3888

3989
h2 {
40-
font-size: 1.15rem;
90+
font-size: 12.5px;
4191
font-weight: 600;
42-
color: var(--text-heading);
43-
margin-top: 3rem;
44-
margin-bottom: 1rem;
45-
letter-spacing: -0.01em;
92+
color: var(--mute);
93+
letter-spacing: 0.14em;
94+
text-transform: uppercase;
95+
margin: 56px 0 18px;
96+
padding-bottom: 8px;
97+
border-bottom: 1px solid var(--line);
98+
scroll-margin-top: 40px;
4699
}
47100

48101
h3 {
49-
font-size: 0.95rem;
102+
font-size: 15px;
50103
font-weight: 500;
51-
color: var(--text-dim);
52-
text-transform: uppercase;
53-
letter-spacing: 0.05em;
54-
margin-top: 2rem;
55-
margin-bottom: 0.75rem;
56-
}
57-
58-
p {
59-
margin-bottom: 1rem;
104+
color: var(--ink);
105+
letter-spacing: -0.005em;
106+
margin: 28px 0 10px;
107+
scroll-margin-top: 40px;
60108
}
61109

62-
/* First paragraph after h1 — acts as tagline */
63-
h1 + p {
64-
color: var(--text-dim);
65-
font-size: 1.1rem;
66-
line-height: 1.5;
67-
margin-bottom: 2.5rem;
68-
}
110+
p { margin: 0 0 16px; color: var(--ink-2); }
69111

70112
a {
71113
color: var(--accent);
72114
text-decoration: none;
115+
border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
116+
transition: border-color 120ms ease;
73117
}
74-
a:hover { text-decoration: underline; }
118+
a:hover { border-bottom-color: var(--accent); }
75119

76120
ul, ol {
77-
margin-bottom: 1rem;
121+
margin: 0 0 16px;
78122
padding-left: 0;
79123
list-style: none;
80124
}
81125

82126
li {
83127
position: relative;
84-
padding-left: 1.25rem;
85-
margin-bottom: 0.4rem;
128+
padding-left: 20px;
129+
margin-bottom: 6px;
130+
color: var(--ink-2);
86131
}
87132

88-
li::before {
89-
content: '—';
133+
ul > li::before {
134+
content: '';
90135
position: absolute;
91-
left: 0;
92-
color: var(--text-dim);
136+
left: 4px;
137+
top: 0.7em;
138+
width: 6px;
139+
height: 1px;
140+
background: var(--mute-2);
93141
}
94142

95143
ol { counter-reset: ol-counter; }
96-
ol li { counter-increment: ol-counter; }
97-
ol li::before {
98-
content: counter(ol-counter) '.';
99-
font-weight: 500;
100-
color: var(--text-dim);
144+
ol > li { counter-increment: ol-counter; padding-left: 26px; }
145+
ol > li::before {
146+
content: counter(ol-counter);
147+
position: absolute;
148+
left: 0;
149+
top: 0;
150+
width: 18px;
151+
font-family: var(--mono);
152+
font-size: 11.5px;
153+
color: var(--accent);
154+
text-align: right;
155+
padding-top: 0.35em;
156+
letter-spacing: 0.02em;
101157
}
102158

103159
li strong {
104-
color: var(--text-heading);
160+
color: var(--ink);
161+
font-weight: 600;
105162
}
106163

107164
code {
108165
font-family: var(--mono);
109-
font-size: 0.875rem;
166+
font-size: 0.88em;
110167
}
111168

112169
p code, li code {
113-
background: var(--bg-code);
114-
border: 1px solid var(--border);
170+
background: var(--code-bg);
171+
border: 1px solid var(--line);
115172
border-radius: 4px;
116-
padding: 0.15em 0.4em;
173+
padding: 0.1em 0.4em;
174+
color: var(--ink);
117175
}
118176

119177
pre {
120-
background: var(--bg-code);
121-
border: 1px solid var(--border);
122-
border-radius: 8px;
123-
padding: 1.25rem 1.5rem;
178+
background: var(--code-bg);
179+
border: 1px solid var(--line);
180+
border-radius: 10px;
181+
padding: 16px 18px;
124182
overflow-x: auto;
125-
margin-bottom: 1.5rem;
183+
margin: 0 0 18px;
126184
}
127185

128186
pre code {
129-
color: var(--text);
130-
line-height: 1.6;
187+
font-family: var(--mono);
188+
font-size: 13px;
189+
line-height: 1.65;
190+
color: var(--ink);
131191
background: none;
132192
border: none;
133193
padding: 0;
134194
}
135195

136-
/* Syntax highlight classes applied by JS */
137-
.hl-comment { color: #555; }
138-
.hl-command { color: var(--text); }
139-
.hl-flag { color: #7dd3fc; }
140-
.hl-string { color: #86efac; }
196+
.hl-comment { color: var(--mute); }
197+
.hl-command { color: var(--ink); font-weight: 500; }
198+
.hl-flag { color: var(--accent); }
199+
.hl-string { color: #2b6e5a; }
141200

142-
/* Horizontal rules — used as section dividers */
143201
hr {
144202
border: none;
145-
border-top: 1px solid var(--border);
146-
margin: 3rem 0;
203+
border-top: 1px solid var(--line);
204+
margin: 48px 0;
147205
}
148206

149207
footer {
150-
margin-top: 4rem;
151-
padding-top: 2rem;
152-
border-top: 1px solid var(--border);
153-
color: var(--text-dim);
154-
font-size: 0.85rem;
208+
margin-top: 72px;
209+
padding-top: 24px;
210+
border-top: 1px solid var(--line);
211+
color: var(--mute);
212+
font-size: 13px;
155213
display: flex;
156214
justify-content: space-between;
157215
align-items: center;
158216
}
159-
160-
@media (max-width: 640px) {
161-
.container { padding: 2rem 1rem 4rem; }
162-
h1 { font-size: 1.5rem; }
163-
pre { padding: 1rem; font-size: 0.8rem; }
164-
footer { flex-direction: column; gap: 0.5rem; }
217+
footer a { color: var(--mute); border-bottom: none; }
218+
footer a:hover { color: var(--ink); }
219+
220+
@media (max-width: 880px) {
221+
.shell {
222+
grid-template-columns: 1fr;
223+
gap: 32px;
224+
padding: 32px 20px 72px;
225+
}
226+
aside.toc { display: none; }
227+
main { max-width: none; }
228+
h1 { font-size: 32px; }
229+
h1 + p { font-size: 16px; margin-bottom: 32px; padding-bottom: 32px; }
165230
}

‎docs/template.html‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,53 @@
1414
<link rel="stylesheet" href="style.css">
1515
</head>
1616
<body>
17-
<div class="container">
18-
$body$
19-
<footer>
20-
<span>MIT License</span>
21-
<a href="https://github.com/crowecawcaw/agent-desktop">GitHub</a>
22-
</footer>
17+
<div class="shell">
18+
<aside class="toc">
19+
<div class="toc-group">
20+
<h5>Overview</h5>
21+
<a href="#install">Install</a>
22+
<a href="#features">Features</a>
23+
<a href="#works-with">Works with</a>
24+
</div>
25+
<div class="toc-group">
26+
<h5>Reference</h5>
27+
<a href="#example">Example</a>
28+
<a href="#how-it-works">How it works</a>
29+
<a href="#commands">Commands</a>
30+
</div>
31+
<div class="toc-group">
32+
<h5>Platform</h5>
33+
<a href="#platforms">Platforms</a>
34+
<a href="#license">License</a>
35+
</div>
36+
</aside>
37+
<main>
38+
$body$
39+
<footer>
40+
<span>MIT License</span>
41+
<a href="https://github.com/crowecawcaw/agent-desktop">GitHub</a>
42+
</footer>
43+
</main>
2344
</div>
2445
<script src="highlight.js"></script>
46+
<script>
47+
const tocLinks = Array.from(document.querySelectorAll('.toc a'));
48+
const sections = tocLinks
49+
.map(a => document.querySelector(a.getAttribute('href')))
50+
.filter(Boolean);
51+
if (sections.length) {
52+
const byId = new Map(sections.map(s => [s.id, tocLinks.find(a => a.getAttribute('href') === '#' + s.id)]));
53+
const obs = new IntersectionObserver((entries) => {
54+
entries.forEach(e => {
55+
if (e.isIntersecting) {
56+
tocLinks.forEach(a => a.classList.remove('active'));
57+
const link = byId.get(e.target.id);
58+
if (link) link.classList.add('active');
59+
}
60+
});
61+
}, { rootMargin: '-30% 0px -60% 0px' });
62+
sections.forEach(s => obs.observe(s));
63+
}
64+
</script>
2565
</body>
2666
</html>

0 commit comments

Comments
 (0)