Skip to content

Commit 03c4b72

Browse files
Siddhant-K-codeona-agent
Siddhant-K-code
and
ona-agent
committed
Redesign: apply interface-design principles across all surfaces
Landing page: tighter hierarchy, monospace section labels, subtle decorative SVG, chapter list with hover micro-animation. Global CSS: refined type scale (15px body), tighter spacing rhythm, better prose styles, focus-visible outlines, reading progress bar. Header: h-12, reading progress indicator, cleaner search dialog with rounded-xl and esc badge, tighter icon sizing. Sidebar: w-60, part labels as 'NN / Title' format, bg-tertiary active state instead of border-left, tighter vertical rhythm. Chapter layout: combined chapter/part metadata line, edit-on-github link, reduced heading sizes for content hierarchy. Footer: single-line layout, dot-separated links, minimal. ChapterNav: removed arrow characters, monospace 'Previous'/'Next' labels, tighter spacing. ToC: smaller width (w-48), refined scroll-spy observer margins. Co-authored-by: Ona <no-reply@ona.com>
1 parent 4716e6d commit 03c4b72

8 files changed

Lines changed: 310 additions & 243 deletions

File tree

‎src/components/ChapterNav.astro‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,23 @@ const { prev, next } = getAdjacentChapters(chapters, currentSlug);
1111
const base = import.meta.env.BASE_URL.replace(/\/$/, "");
1212
---
1313

14-
<nav class="mt-16 pt-8 border-t border-[var(--border)] flex justify-between gap-4">
14+
<nav class="mt-14 pt-6 border-t border-[var(--border-subtle)] flex justify-between gap-4">
1515
{prev ? (
16-
<a href={`${base}/${prev.slug}/`} class="group flex flex-col items-start gap-1 max-w-[45%]">
17-
<span class="text-xs text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
18-
← Previous
16+
<a href={`${base}/${prev.slug}/`} class="group flex flex-col gap-0.5 max-w-[45%]">
17+
<span class="font-[var(--font-mono)] text-[11px] text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
18+
Previous
1919
</span>
20-
<span class="text-sm font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug">
20+
<span class="text-[13px] font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug">
2121
{prev.title}
2222
</span>
2323
</a>
2424
) : <div />}
2525
{next ? (
26-
<a href={`${base}/${next.slug}/`} class="group flex flex-col items-end gap-1 max-w-[45%] ml-auto">
27-
<span class="text-xs text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
28-
Next →
26+
<a href={`${base}/${next.slug}/`} class="group flex flex-col items-end gap-0.5 max-w-[45%] ml-auto">
27+
<span class="font-[var(--font-mono)] text-[11px] text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
28+
Next
2929
</span>
30-
<span class="text-sm font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug text-right">
30+
<span class="text-[13px] font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug text-right">
3131
{next.title}
3232
</span>
3333
</a>

‎src/components/Footer.astro‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,20 @@
22
const base = import.meta.env.BASE_URL.replace(/\/$/, "");
33
---
44

5-
<footer class="border-t border-[var(--border-subtle)] bg-[var(--bg-secondary)]">
6-
<div class="max-w-5xl mx-auto px-6 py-10 lg:px-12">
7-
<div class="flex flex-col sm:flex-row justify-between gap-6 text-sm text-[var(--text-tertiary)]">
8-
<div class="space-y-2">
9-
<p class="text-[var(--text-secondary)] font-medium">The Agentic Engineering Guide</p>
10-
<p>by <a href="https://siddhantkhare.com" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">Siddhant Khare</a></p>
11-
<p>February 2026</p>
5+
<footer class="border-t border-[var(--border-subtle)]">
6+
<div class="max-w-2xl mx-auto px-6 py-8 lg:px-10">
7+
<div class="flex flex-col sm:flex-row justify-between gap-4 text-[12px] text-[var(--text-tertiary)]">
8+
<div>
9+
<a href={`${base}/`} class="hover:text-[var(--text-primary)] transition-colors">The Agentic Engineering Guide</a>
10+
<span class="mx-1.5">·</span>
11+
<a href="https://siddhantkhare.com" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">Siddhant Khare</a>
12+
<span class="mx-1.5">·</span>
13+
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">CC BY-NC-SA 4.0</a>
1214
</div>
13-
<div class="flex gap-6">
15+
<div class="flex gap-4">
1416
<a href="https://github.com/Siddhant-K-code/agentic-engineering-guide" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">GitHub</a>
1517
<a href="https://twitter.com/Siddhant_K_code" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">Twitter</a>
1618
</div>
1719
</div>
18-
<div class="mt-8 pt-6 border-t border-[var(--border-subtle)] text-xs text-[var(--text-tertiary)]">
19-
<p>Licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">CC BY-NC-SA 4.0</a>. Copyright 2026 Siddhant Khare.</p>
20-
</div>
2120
</div>
2221
</footer>

‎src/components/Header.astro‎

Lines changed: 52 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,62 @@
22
const base = import.meta.env.BASE_URL.replace(/\/$/, "");
33
---
44

5-
<header class="fixed top-0 left-0 right-0 z-50 h-14 border-b border-[var(--border-subtle)] bg-[var(--bg-primary)]/80 backdrop-blur-md">
6-
<div class="h-full flex items-center justify-between px-4 lg:px-6">
7-
<!-- Left: logo + mobile menu -->
8-
<div class="flex items-center gap-3">
5+
<header class="fixed top-0 left-0 right-0 z-50 h-12 bg-[var(--bg-primary)]/90 backdrop-blur-lg">
6+
<!-- Reading progress bar -->
7+
<div id="reading-progress" class="absolute bottom-0 left-0 h-[1px] bg-[var(--text-tertiary)] w-full scale-x-0 origin-left"></div>
8+
<div class="absolute bottom-0 left-0 right-0 h-px bg-[var(--border-subtle)]"></div>
9+
10+
<div class="h-full flex items-center justify-between px-4 lg:px-5">
11+
<!-- Left -->
12+
<div class="flex items-center gap-2.5">
913
<button
1014
id="sidebar-toggle"
11-
class="lg:hidden p-1.5 rounded-md hover:bg-[var(--bg-hover)] transition-colors"
15+
class="lg:hidden p-1 rounded hover:bg-[var(--bg-hover)] transition-colors"
1216
aria-label="Toggle navigation"
1317
>
14-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
15-
<line x1="3" y1="6" x2="21" y2="6" />
16-
<line x1="3" y1="12" x2="21" y2="12" />
17-
<line x1="3" y1="18" x2="21" y2="18" />
18+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
19+
<line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="20" y2="17" />
1820
</svg>
1921
</button>
20-
<a href={`${base}/`} class="flex items-center gap-2 text-sm font-medium hover:text-[var(--text-secondary)] transition-colors">
21-
<span class="font-[var(--font-mono)] text-xs tracking-wider text-[var(--text-tertiary)]">/</span>
22-
<span>The Agentic Engineering Guide</span>
22+
<a href={`${base}/`} class="text-[13px] font-medium text-[var(--text-primary)] hover:text-[var(--text-secondary)] transition-colors truncate">
23+
The Agentic Engineering Guide
2324
</a>
2425
</div>
2526

26-
<!-- Right: actions -->
27-
<div class="flex items-center gap-1">
28-
<!-- Search -->
27+
<!-- Right -->
28+
<div class="flex items-center gap-0.5">
2929
<button
3030
id="search-trigger"
31-
class="flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-tertiary)] border border-[var(--border)] rounded-md hover:border-[var(--text-tertiary)] transition-colors"
31+
class="flex items-center gap-1.5 h-7 px-2.5 text-[12px] text-[var(--text-tertiary)] border border-[var(--border)] rounded-md hover:border-[var(--text-tertiary)] transition-colors cursor-pointer"
3232
>
33-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
34-
<circle cx="11" cy="11" r="8" />
35-
<line x1="21" y1="21" x2="16.65" y2="16.65" />
33+
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
34+
<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
3635
</svg>
3736
<span class="hidden sm:inline">Search</span>
38-
<kbd class="hidden sm:inline font-[var(--font-mono)] text-[10px] px-1 py-0.5 rounded bg-[var(--bg-tertiary)] border border-[var(--border)]">⌘K</kbd>
37+
<kbd class="hidden sm:inline font-[var(--font-mono)] text-[10px] ml-1 opacity-50">⌘K</kbd>
3938
</button>
4039

41-
<!-- GitHub -->
4240
<a
4341
href="https://github.com/Siddhant-K-code/agentic-engineering-guide"
4442
target="_blank"
4543
rel="noopener noreferrer"
46-
class="p-2 rounded-md hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-secondary)]"
44+
class="p-1.5 rounded hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
4745
aria-label="GitHub"
4846
>
49-
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
47+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
5048
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
5149
</svg>
5250
</a>
5351

54-
<!-- Theme toggle -->
5552
<button
5653
id="theme-toggle"
57-
class="p-2 rounded-md hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-secondary)]"
54+
class="p-1.5 rounded hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-tertiary)] hover:text-[var(--text-primary)] cursor-pointer"
5855
aria-label="Toggle theme"
5956
>
60-
<!-- Sun (shown in dark mode) -->
61-
<svg class="dark:block hidden" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
62-
<circle cx="12" cy="12" r="5" />
63-
<line x1="12" y1="1" x2="12" y2="3" />
64-
<line x1="12" y1="21" x2="12" y2="23" />
65-
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
66-
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
67-
<line x1="1" y1="12" x2="3" y2="12" />
68-
<line x1="21" y1="12" x2="23" y2="12" />
69-
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
70-
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
57+
<svg class="dark:block hidden" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
58+
<circle cx="12" cy="12" r="5" /><line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" /><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /><line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" /><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
7159
</svg>
72-
<!-- Moon (shown in light mode) -->
73-
<svg class="dark:hidden block" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
60+
<svg class="dark:hidden block" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
7461
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
7562
</svg>
7663
</button>
@@ -80,24 +67,23 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
8067

8168
<!-- Search dialog -->
8269
<div id="search-dialog" class="fixed inset-0 z-[100] hidden">
83-
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="search-backdrop"></div>
84-
<div class="relative max-w-xl mx-auto mt-[15vh] bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-2xl overflow-hidden">
85-
<div class="flex items-center border-b border-[var(--border)] px-4">
86-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" stroke-width="2" stroke-linecap="round" class="shrink-0">
87-
<circle cx="11" cy="11" r="8" />
88-
<line x1="21" y1="21" x2="16.65" y2="16.65" />
70+
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" id="search-backdrop"></div>
71+
<div class="relative max-w-lg mx-auto mt-[12vh] bg-[var(--bg-primary)] border border-[var(--border)] rounded-xl shadow-2xl overflow-hidden">
72+
<div class="flex items-center gap-2 border-b border-[var(--border-subtle)] px-4">
73+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" stroke-width="2" stroke-linecap="round" class="shrink-0">
74+
<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
8975
</svg>
9076
<input
9177
id="search-input"
9278
type="text"
9379
placeholder="Search chapters..."
9480
autocomplete="off"
95-
class="w-full bg-transparent px-3 py-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] outline-none"
81+
class="w-full bg-transparent py-3 text-[14px] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] outline-none"
9682
/>
97-
<kbd class="font-[var(--font-mono)] text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] border border-[var(--border)] text-[var(--text-tertiary)] shrink-0">ESC</kbd>
83+
<kbd class="font-[var(--font-mono)] text-[10px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] shrink-0">esc</kbd>
9884
</div>
99-
<div id="search-results" class="max-h-[60vh] overflow-y-auto p-2">
100-
<p id="search-placeholder" class="text-sm text-[var(--text-tertiary)] px-2 py-4 text-center">Type to search across all chapters</p>
85+
<div id="search-results" class="max-h-[50vh] overflow-y-auto p-1.5">
86+
<p id="search-placeholder" class="text-[13px] text-[var(--text-tertiary)] px-3 py-6 text-center">Type to search across all chapters</p>
10187
</div>
10288
</div>
10389
</div>
@@ -119,6 +105,17 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
119105
overlay?.classList.toggle('hidden');
120106
});
121107

108+
// Reading progress
109+
var progressBar = document.getElementById('reading-progress');
110+
if (progressBar) {
111+
window.addEventListener('scroll', function() {
112+
var scrollTop = window.scrollY;
113+
var docHeight = document.documentElement.scrollHeight - window.innerHeight;
114+
var progress = docHeight > 0 ? Math.min(scrollTop / docHeight, 1) : 0;
115+
progressBar.style.transform = 'scaleX(' + progress + ')';
116+
}, { passive: true });
117+
}
118+
122119
// Search
123120
var searchTrigger = document.getElementById('search-trigger');
124121
var searchDialog = document.getElementById('search-dialog');
@@ -183,24 +180,24 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
183180
}
184181

185182
if (!pagefind) {
186-
searchResults.innerHTML = '<p class="text-sm text-[var(--text-tertiary)] px-2 py-4 text-center">Search index not available.</p>';
183+
searchResults.innerHTML = '<p class="text-[13px] text-[var(--text-tertiary)] px-3 py-6 text-center">Search index not available.</p>';
187184
return;
188185
}
189186

190187
var search = await pagefind.search(query);
191-
var results = await Promise.all(search.results.slice(0, 10).map(function(r) { return r.data(); }));
188+
var results = await Promise.all(search.results.slice(0, 8).map(function(r) { return r.data(); }));
192189

193190
if (results.length === 0) {
194-
searchResults.innerHTML = '<p class="text-sm text-[var(--text-tertiary)] px-2 py-4 text-center">No results found</p>';
191+
searchResults.innerHTML = '<p class="text-[13px] text-[var(--text-tertiary)] px-3 py-6 text-center">No results found</p>';
195192
return;
196193
}
197194

198195
searchResults.innerHTML = results.map(function(r) {
199-
return '<a href="' + r.url + '" class="block px-3 py-2.5 rounded-md hover:bg-[var(--bg-hover)] transition-colors">' +
200-
'<span class="block text-sm font-medium text-[var(--text-primary)] leading-snug">' + (r.meta?.title || 'Untitled') + '</span>' +
201-
'<span class="block text-xs text-[var(--text-tertiary)] mt-1 leading-relaxed line-clamp-2">' + (r.excerpt || '') + '</span>' +
196+
return '<a href="' + r.url + '" class="block px-3 py-2 rounded-lg hover:bg-[var(--bg-hover)] transition-colors">' +
197+
'<span class="block text-[13px] font-medium text-[var(--text-primary)] leading-snug">' + (r.meta?.title || 'Untitled') + '</span>' +
198+
'<span class="block text-[12px] text-[var(--text-tertiary)] mt-0.5 leading-relaxed line-clamp-2">' + (r.excerpt || '') + '</span>' +
202199
'</a>';
203200
}).join('');
204-
}, 200);
201+
}, 150);
205202
});
206203
</script>

0 commit comments

Comments
 (0)