Revert to original typography and layout, add author headshot

Typography: restore 16px body, 1.8 line-height, original heading
scale (2rem/1.5rem/1.25rem), looser spacing rhythm. The tighter
15px/interface-design scale was harder to read.

Layout: restore h-14 header, w-64 sidebar with bg-secondary and
border-left active state, w-52 ToC, original ChapterLayout with
larger headings and generous padding.

Keep: reading progress bar, Pagefind search, focus-visible outlines,
edit-on-github link, line-clamp utility.

Author section: replace SK initials with actual headshot from
siddhantkhare.com.

Co-authored-by: Ona <no-reply@ona.com>

Author: Siddhant-K-code

public/images/author.webp

@@ -11,23 +11,23 @@ const { prev, next } = getAdjacentChapters(chapters, currentSlug);
 const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 ---
 
-<nav class="mt-14 pt-6 border-t border-[var(--border-subtle)] flex justify-between gap-4">
+<nav class="mt-16 pt-8 border-t border-[var(--border)] flex justify-between gap-4">
   {prev ? (
-    <a href={`${base}/${prev.slug}/`} class="group flex flex-col gap-0.5 max-w-[45%]">
-      <span class="font-[var(--font-mono)] text-[11px] text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
-        Previous
+    <a href={`${base}/${prev.slug}/`} class="group flex flex-col items-start gap-1 max-w-[45%]">
+      <span class="text-xs text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
+        ← Previous
       </span>
-      <span class="text-[13px] font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug">
+      <span class="text-sm font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug">
         {prev.title}
       </span>
     </a>
   ) : <div />}
   {next ? (
-    <a href={`${base}/${next.slug}/`} class="group flex flex-col items-end gap-0.5 max-w-[45%] ml-auto">
-      <span class="font-[var(--font-mono)] text-[11px] text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
-        Next
+    <a href={`${base}/${next.slug}/`} class="group flex flex-col items-end gap-1 max-w-[45%] ml-auto">
+      <span class="text-xs text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)] transition-colors">
+        Next →
       </span>
-      <span class="text-[13px] font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug text-right">
+      <span class="text-sm font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors leading-snug text-right">
         {next.title}
       </span>
     </a>

src/components/ChapterNav.astro

@@ -2,62 +2,78 @@
 const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 ---
 
-<header class="fixed top-0 left-0 right-0 z-50 h-12 bg-[var(--bg-primary)]/90 backdrop-blur-lg">
+<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">
   <!-- Reading progress bar -->
   <div id="reading-progress" class="absolute bottom-0 left-0 h-[1px] bg-[var(--text-tertiary)] w-full scale-x-0 origin-left"></div>
-  <div class="absolute bottom-0 left-0 right-0 h-px bg-[var(--border-subtle)]"></div>
 
-  <div class="h-full flex items-center justify-between px-4 lg:px-5">
-    <!-- Left -->
-    <div class="flex items-center gap-2.5">
+  <div class="h-full flex items-center justify-between px-4 lg:px-6">
+    <!-- Left: logo + mobile menu -->
+    <div class="flex items-center gap-3">
       <button
         id="sidebar-toggle"
-        class="lg:hidden p-1 rounded hover:bg-[var(--bg-hover)] transition-colors"
+        class="lg:hidden p-1.5 rounded-md hover:bg-[var(--bg-hover)] transition-colors"
         aria-label="Toggle navigation"
       >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-          <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" />
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
         </svg>
       </button>
-      <a href={`${base}/`} class="text-[13px] font-medium text-[var(--text-primary)] hover:text-[var(--text-secondary)] transition-colors truncate">
-        The Agentic Engineering Guide
+      <a href={`${base}/`} class="flex items-center gap-2 text-sm font-medium hover:text-[var(--text-secondary)] transition-colors">
+        <span class="font-[var(--font-mono)] text-xs tracking-wider text-[var(--text-tertiary)]">/</span>
+        <span>The Agentic Engineering Guide</span>
       </a>
     </div>
 
-    <!-- Right -->
-    <div class="flex items-center gap-0.5">
+    <!-- Right: actions -->
+    <div class="flex items-center gap-1">
+      <!-- Search -->
       <button
         id="search-trigger"
-        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"
+        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 cursor-pointer"
       >
-        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-          <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
         </svg>
         <span class="hidden sm:inline">Search</span>
-        <kbd class="hidden sm:inline font-[var(--font-mono)] text-[10px] ml-1 opacity-50">⌘K</kbd>
+        <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>
       </button>
 
+      <!-- GitHub -->
       <a
         href="https://github.com/Siddhant-K-code/agentic-engineering-guide"
         target="_blank"
         rel="noopener noreferrer"
-        class="p-1.5 rounded hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
+        class="p-2 rounded-md hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-secondary)]"
         aria-label="GitHub"
       >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
           <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"/>
         </svg>
       </a>
 
+      <!-- Theme toggle -->
       <button
         id="theme-toggle"
-        class="p-1.5 rounded hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-tertiary)] hover:text-[var(--text-primary)] cursor-pointer"
+        class="p-2 rounded-md hover:bg-[var(--bg-hover)] transition-colors text-[var(--text-secondary)] cursor-pointer"
         aria-label="Toggle theme"
       >
-        <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">
-          <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" />
+        <!-- Sun (shown in dark mode) -->
+        <svg class="dark:block hidden" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <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" />
         </svg>
-        <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">
+        <!-- Moon (shown in light mode) -->
+        <svg class="dark:hidden block" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
         </svg>
       </button>
@@ -67,23 +83,24 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 
 <!-- Search dialog -->
 <div id="search-dialog" class="fixed inset-0 z-[100] hidden">
-  <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" id="search-backdrop"></div>
-  <div class="relative max-w-lg mx-auto mt-[12vh] bg-[var(--bg-primary)] border border-[var(--border)] rounded-xl shadow-2xl overflow-hidden">
-    <div class="flex items-center gap-2 border-b border-[var(--border-subtle)] px-4">
-      <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">
-        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="search-backdrop"></div>
+  <div class="relative max-w-xl mx-auto mt-[15vh] bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-2xl overflow-hidden">
+    <div class="flex items-center border-b border-[var(--border)] px-4">
+      <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">
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
       </svg>
       <input
         id="search-input"
         type="text"
         placeholder="Search chapters..."
         autocomplete="off"
-        class="w-full bg-transparent py-3 text-[14px] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] outline-none"
+        class="w-full bg-transparent px-3 py-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] outline-none"
       />
-      <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>
+      <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>
     </div>
-    <div id="search-results" class="max-h-[50vh] overflow-y-auto p-1.5">
-      <p id="search-placeholder" class="text-[13px] text-[var(--text-tertiary)] px-3 py-6 text-center">Type to search across all chapters</p>
+    <div id="search-results" class="max-h-[60vh] overflow-y-auto p-2">
+      <p id="search-placeholder" class="text-sm text-[var(--text-tertiary)] px-2 py-4 text-center">Type to search across all chapters</p>
     </div>
   </div>
 </div>
@@ -180,24 +197,24 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
       }
 
       if (!pagefind) {
-        searchResults.innerHTML = '<p class="text-[13px] text-[var(--text-tertiary)] px-3 py-6 text-center">Search index not available.</p>';
+        searchResults.innerHTML = '<p class="text-sm text-[var(--text-tertiary)] px-2 py-4 text-center">Search index not available.</p>';
         return;
       }
 
       var search = await pagefind.search(query);
-      var results = await Promise.all(search.results.slice(0, 8).map(function(r) { return r.data(); }));
+      var results = await Promise.all(search.results.slice(0, 10).map(function(r) { return r.data(); }));
 
       if (results.length === 0) {
-        searchResults.innerHTML = '<p class="text-[13px] text-[var(--text-tertiary)] px-3 py-6 text-center">No results found</p>';
+        searchResults.innerHTML = '<p class="text-sm text-[var(--text-tertiary)] px-2 py-4 text-center">No results found</p>';
         return;
       }
 
       searchResults.innerHTML = results.map(function(r) {
-        return '<a href="' + r.url + '" class="block px-3 py-2 rounded-lg hover:bg-[var(--bg-hover)] transition-colors">' +
-          '<span class="block text-[13px] font-medium text-[var(--text-primary)] leading-snug">' + (r.meta?.title || 'Untitled') + '</span>' +
-          '<span class="block text-[12px] text-[var(--text-tertiary)] mt-0.5 leading-relaxed line-clamp-2">' + (r.excerpt || '') + '</span>' +
+        return '<a href="' + r.url + '" class="block px-3 py-2.5 rounded-md hover:bg-[var(--bg-hover)] transition-colors">' +
+          '<span class="block text-sm font-medium text-[var(--text-primary)] leading-snug">' + (r.meta?.title || 'Untitled') + '</span>' +
+          '<span class="block text-xs text-[var(--text-tertiary)] mt-1 leading-relaxed line-clamp-2">' + (r.excerpt || '') + '</span>' +
         '</a>';
       }).join('');
-    }, 150);
+    }, 200);
   });
 </script>

src/components/Header.astro

@@ -12,25 +12,28 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 ---
 
 <!-- Mobile overlay -->
-<div id="sidebar-overlay" class="fixed inset-0 z-30 bg-black/30 backdrop-blur-sm lg:hidden hidden"></div>
+<div id="sidebar-overlay" class="fixed inset-0 z-30 bg-black/40 backdrop-blur-sm lg:hidden hidden"></div>
 
 <aside
   id="sidebar"
-  class="fixed top-12 left-0 z-40 w-60 h-[calc(100vh-3rem)] bg-[var(--bg-primary)] border-r border-[var(--border-subtle)] overflow-y-auto -translate-x-full lg:translate-x-0 transition-transform duration-200"
+  class="fixed top-14 left-0 z-40 w-64 h-[calc(100vh-3.5rem)] bg-[var(--bg-secondary)] border-r border-[var(--border-subtle)] overflow-y-auto -translate-x-full lg:translate-x-0 transition-transform duration-200"
 >
-  <nav class="py-3 px-2">
+  <nav class="py-4 px-3">
     {groups.map((group) => (
-      <div class="mb-1">
+      <div class="mb-4">
         {group.part > 0 && group.part < 99 && (
-          <div class="px-2 pt-4 pb-1">
-            <span class="font-[var(--font-mono)] text-[10px] tracking-[0.15em] uppercase text-[var(--text-tertiary)]">
-              {String(group.part).padStart(2, "0")} / {group.title}
+          <div class="px-2 pt-3 pb-1.5">
+            <span class="font-[var(--font-mono)] text-[10px] tracking-widest uppercase text-[var(--text-tertiary)]">
+              Part {group.part}
+            </span>
+            <span class="block text-xs font-medium text-[var(--text-secondary)] mt-0.5">
+              {group.title}
             </span>
           </div>
         )}
         {group.part === 99 && (
-          <div class="px-2 pt-5 pb-1">
-            <span class="font-[var(--font-mono)] text-[10px] tracking-[0.15em] uppercase text-[var(--text-tertiary)]">
+          <div class="px-2 pt-3 pb-1.5 border-t border-[var(--border-subtle)] mt-2">
+            <span class="font-[var(--font-mono)] text-[10px] tracking-widest uppercase text-[var(--text-tertiary)]">
               {group.title}
             </span>
           </div>
@@ -43,20 +46,17 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
                 <a
                   href={`${base}/${ch.slug}/`}
                   class:list={[
-                    "flex items-start gap-2 px-2 py-[5px] text-[13px] rounded transition-colors duration-100",
+                    "flex items-start gap-2 px-2 py-1.5 text-sm rounded-md transition-colors",
                     isActive
-                      ? "text-[var(--text-primary)] font-medium bg-[var(--bg-tertiary)]"
+                      ? "text-[var(--text-primary)] bg-[var(--bg-hover)] border-l-2 border-[var(--text-primary)] -ml-px pl-[calc(0.5rem-1px)]"
                       : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
                   ]}
                 >
-                  {ch.chapter ? (
-                    <span class:list={[
-                      "font-[var(--font-mono)] text-[11px] mt-px shrink-0 w-4 tabular-nums",
-                      isActive ? "text-[var(--text-secondary)]" : "text-[var(--text-tertiary)]",
-                    ]}>
+                  {ch.chapter && (
+                    <span class="font-[var(--font-mono)] text-[11px] text-[var(--text-tertiary)] mt-0.5 shrink-0 w-5">
                       {String(ch.chapter).padStart(2, "0")}
                     </span>
-                  ) : null}
+                  )}
                   <span class="leading-snug">{ch.title}</span>
                 </a>
               </li>

src/components/Sidebar.astro

@@ -8,19 +8,19 @@ const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
 ---
 
 {filtered.length > 0 && (
-  <aside class="hidden xl:block w-48 shrink-0 sticky top-12 h-[calc(100vh-3rem)] py-10 pr-4">
+  <aside class="hidden xl:block w-52 shrink-0 sticky top-14 h-[calc(100vh-3.5rem)] py-10 pr-6">
     <nav class="overflow-y-auto max-h-full">
-      <p class="font-[var(--font-mono)] text-[10px] tracking-[0.15em] uppercase text-[var(--text-tertiary)] mb-3">
+      <span class="font-[var(--font-mono)] text-[10px] tracking-widest uppercase text-[var(--text-tertiary)] mb-3 block">
         On this page
-      </p>
-      <ul class="space-y-1">
+      </span>
+      <ul class="space-y-1.5">
         {filtered.map((h) => (
           <li>
             <a
               href={`#${h.slug}`}
               class:list={[
-                "block text-[12px] leading-relaxed transition-colors duration-100 hover:text-[var(--text-primary)]",
-                h.depth === 2 ? "text-[var(--text-secondary)]" : "text-[var(--text-tertiary)] pl-2.5",
+                "block text-xs leading-relaxed transition-colors hover:text-[var(--text-primary)]",
+                h.depth === 2 ? "text-[var(--text-secondary)]" : "text-[var(--text-tertiary)] pl-3",
               ]}
               data-toc-link
               data-toc-slug={h.slug}
@@ -53,7 +53,7 @@ const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
           }
         }
       },
-      { rootMargin: '-60px 0px -75% 0px', threshold: 0 }
+      { rootMargin: '-80px 0px -70% 0px', threshold: 0 }
     );
     document.querySelectorAll('.prose h2[id], .prose h3[id]').forEach(h => observer.observe(h));
   }