Skip to content

Commit 5f7f873

Browse files
mayurpiseclaude
mayurpise
and
claude
committed
feat(web): add /blog section with first two posts
Introduce a blog section under web/blog/ so essays and field notes have a permanent home on the site instead of living in docs/. Reuses book.css typography with a small blog.css overlay for post cards and post pages. - web/blog/index.html: reverse-chronological listing - web/blog/local-graph-engine/: graph engine post (no MCP, local, version-controlled) - web/blog/replaced-kiro-with-free-plugin/: Kiro vs Draft comparison - Add Blog link to top nav in web/index.html - Register both posts in feed.xml and sitemap.xml Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 796fa19 commit 5f7f873

7 files changed

Lines changed: 906 additions & 0 deletions

File tree

‎web/blog/blog.css‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
/* Blog overlay — sits on top of book.css for typography/theming */
2+
3+
.blog-index {
4+
max-width: 760px;
5+
margin: 0 auto;
6+
padding: 4rem 2rem 6rem;
7+
}
8+
9+
.blog-hero {
10+
margin-bottom: 3.5rem;
11+
padding-bottom: 2.5rem;
12+
border-bottom: 1px solid var(--border-color, #e2e8f0);
13+
}
14+
15+
.blog-eyebrow {
16+
font-family: 'JetBrains Mono', monospace;
17+
font-size: 0.78rem;
18+
text-transform: uppercase;
19+
letter-spacing: 0.12em;
20+
color: var(--accent-color, #2563eb);
21+
margin: 0 0 0.75rem;
22+
}
23+
24+
.blog-hero h1 {
25+
font-family: 'Space Grotesk', system-ui, sans-serif;
26+
font-size: clamp(2rem, 4vw, 2.75rem);
27+
line-height: 1.15;
28+
margin: 0 0 1rem;
29+
color: var(--heading-color, #1a1a2e);
30+
}
31+
32+
.blog-subtitle {
33+
font-size: 1.1rem;
34+
line-height: 1.6;
35+
color: var(--text-muted, #4a5568);
36+
margin: 0;
37+
}
38+
39+
.post-list {
40+
display: flex;
41+
flex-direction: column;
42+
gap: 2rem;
43+
}
44+
45+
.post-card {
46+
border: 1px solid var(--border-color, #e2e8f0);
47+
border-radius: 14px;
48+
background: var(--card-bg, #fff);
49+
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
50+
}
51+
52+
.post-card:hover {
53+
border-color: var(--accent-color, #2563eb);
54+
transform: translateY(-2px);
55+
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
56+
}
57+
58+
.post-card-link {
59+
display: block;
60+
padding: 2rem 2.25rem;
61+
text-decoration: none;
62+
color: inherit;
63+
}
64+
65+
.post-card-meta {
66+
font-family: 'JetBrains Mono', monospace;
67+
font-size: 0.78rem;
68+
color: var(--text-muted, #718096);
69+
margin: 0 0 0.75rem;
70+
text-transform: uppercase;
71+
letter-spacing: 0.06em;
72+
}
73+
74+
.post-card-title {
75+
font-family: 'Space Grotesk', system-ui, sans-serif;
76+
font-size: 1.5rem;
77+
line-height: 1.3;
78+
margin: 0 0 0.75rem;
79+
color: var(--heading-color, #1a1a2e);
80+
}
81+
82+
.post-card-excerpt {
83+
font-size: 1rem;
84+
line-height: 1.65;
85+
color: var(--text-color, #2d3748);
86+
margin: 0 0 1.25rem;
87+
}
88+
89+
.post-card-cta {
90+
font-family: 'JetBrains Mono', monospace;
91+
font-size: 0.85rem;
92+
color: var(--accent-color, #2563eb);
93+
font-weight: 500;
94+
}
95+
96+
.blog-cta {
97+
margin-top: 4rem;
98+
padding-top: 2rem;
99+
border-top: 1px solid var(--border-color, #e2e8f0);
100+
text-align: center;
101+
font-size: 0.95rem;
102+
color: var(--text-muted, #4a5568);
103+
}
104+
105+
.blog-cta a {
106+
color: var(--accent-color, #2563eb);
107+
text-decoration: none;
108+
font-weight: 500;
109+
}
110+
111+
.blog-cta a:hover {
112+
text-decoration: underline;
113+
}
114+
115+
/* Post page */
116+
117+
.blog-post {
118+
max-width: 760px;
119+
margin: 0 auto;
120+
padding: 3rem 2rem 5rem;
121+
}
122+
123+
.post-header {
124+
margin-bottom: 2.5rem;
125+
padding-bottom: 2rem;
126+
border-bottom: 1px solid var(--border-color, #e2e8f0);
127+
}
128+
129+
.post-back {
130+
display: inline-block;
131+
font-family: 'JetBrains Mono', monospace;
132+
font-size: 0.82rem;
133+
color: var(--text-muted, #718096);
134+
text-decoration: none;
135+
margin-bottom: 1.5rem;
136+
}
137+
138+
.post-back:hover {
139+
color: var(--accent-color, #2563eb);
140+
}
141+
142+
.post-meta {
143+
font-family: 'JetBrains Mono', monospace;
144+
font-size: 0.78rem;
145+
text-transform: uppercase;
146+
letter-spacing: 0.08em;
147+
color: var(--text-muted, #718096);
148+
margin: 0 0 0.75rem;
149+
}
150+
151+
.post-header h1 {
152+
font-family: 'Space Grotesk', system-ui, sans-serif;
153+
font-size: clamp(1.85rem, 4vw, 2.5rem);
154+
line-height: 1.2;
155+
margin: 0 0 1rem;
156+
color: var(--heading-color, #1a1a2e);
157+
}
158+
159+
.post-deck {
160+
font-size: 1.1rem;
161+
line-height: 1.65;
162+
color: var(--text-muted, #4a5568);
163+
font-style: italic;
164+
margin: 0;
165+
}
166+
167+
.post-body {
168+
font-size: 1.05rem;
169+
line-height: 1.75;
170+
color: var(--text-color, #2d3748);
171+
}
172+
173+
.post-body h2 {
174+
font-family: 'Space Grotesk', system-ui, sans-serif;
175+
font-size: 1.55rem;
176+
line-height: 1.3;
177+
margin: 2.75rem 0 1rem;
178+
color: var(--heading-color, #1a1a2e);
179+
}
180+
181+
.post-body h3 {
182+
font-family: 'Space Grotesk', system-ui, sans-serif;
183+
font-size: 1.2rem;
184+
margin: 2rem 0 0.75rem;
185+
color: var(--heading-color, #1a1a2e);
186+
}
187+
188+
.post-body p {
189+
margin: 0 0 1.25rem;
190+
}
191+
192+
.post-body ul,
193+
.post-body ol {
194+
margin: 0 0 1.5rem;
195+
padding-left: 1.4rem;
196+
}
197+
198+
.post-body li {
199+
margin-bottom: 0.5rem;
200+
}
201+
202+
.post-body a {
203+
color: var(--accent-color, #2563eb);
204+
text-decoration: underline;
205+
text-underline-offset: 2px;
206+
}
207+
208+
.post-body code {
209+
font-family: 'JetBrains Mono', monospace;
210+
font-size: 0.92em;
211+
background: var(--code-inline-bg, #f1f5f9);
212+
padding: 0.12em 0.35em;
213+
border-radius: 4px;
214+
}
215+
216+
.post-body pre {
217+
background: var(--code-block-bg, #0f172a);
218+
color: var(--code-block-fg, #e2e8f0);
219+
padding: 1.25rem 1.5rem;
220+
border-radius: 10px;
221+
overflow-x: auto;
222+
margin: 0 0 1.5rem;
223+
font-size: 0.9rem;
224+
line-height: 1.55;
225+
}
226+
227+
.post-body pre code {
228+
background: transparent;
229+
padding: 0;
230+
color: inherit;
231+
font-size: inherit;
232+
}
233+
234+
.post-body blockquote {
235+
border-left: 3px solid var(--accent-color, #2563eb);
236+
padding: 0.5rem 0 0.5rem 1.25rem;
237+
margin: 0 0 1.5rem;
238+
color: var(--text-muted, #4a5568);
239+
font-style: italic;
240+
}
241+
242+
.post-body table {
243+
width: 100%;
244+
border-collapse: collapse;
245+
margin: 0 0 1.75rem;
246+
font-size: 0.95rem;
247+
}
248+
249+
.post-body th,
250+
.post-body td {
251+
text-align: left;
252+
padding: 0.65rem 0.85rem;
253+
border-bottom: 1px solid var(--border-color, #e2e8f0);
254+
}
255+
256+
.post-body th {
257+
font-family: 'Space Grotesk', system-ui, sans-serif;
258+
font-weight: 600;
259+
background: var(--table-header-bg, #f8fafc);
260+
}
261+
262+
.post-body hr {
263+
border: 0;
264+
border-top: 1px solid var(--border-color, #e2e8f0);
265+
margin: 2.5rem 0;
266+
}
267+
268+
.post-footer {
269+
margin-top: 3.5rem;
270+
padding-top: 2rem;
271+
border-top: 1px solid var(--border-color, #e2e8f0);
272+
font-size: 0.95rem;
273+
color: var(--text-muted, #4a5568);
274+
}
275+
276+
.post-footer a {
277+
color: var(--accent-color, #2563eb);
278+
text-decoration: none;
279+
font-weight: 500;
280+
}
281+
282+
.post-footer a:hover {
283+
text-decoration: underline;
284+
}
285+
286+
/* Dark mode tweaks */
287+
[data-theme="dark"] .post-card {
288+
background: var(--card-bg-dark, #1e293b);
289+
border-color: var(--border-color-dark, #334155);
290+
}
291+
292+
[data-theme="dark"] .post-card:hover {
293+
border-color: var(--accent-color, #60a5fa);
294+
box-shadow: 0 12px 32px rgba(96, 165, 250, 0.12);
295+
}
296+
297+
[data-theme="dark"] .post-body code {
298+
background: rgba(148, 163, 184, 0.15);
299+
}
300+
301+
[data-theme="dark"] .post-body th {
302+
background: rgba(148, 163, 184, 0.08);
303+
}
304+
305+
@media (max-width: 600px) {
306+
.blog-index,
307+
.blog-post {
308+
padding-left: 1.25rem;
309+
padding-right: 1.25rem;
310+
}
311+
312+
.post-card-link {
313+
padding: 1.5rem 1.5rem;
314+
}
315+
}

0 commit comments

Comments
 (0)