work on docs

Author: hajareshyam

.DS_Store

@@ -1,5 +1,20 @@
 # Changelog
 
+## [Unreleased]
+
+## [4.0.1] — 2026-04-03
+
+### Changed
+
+- **Source layout:** `src/pdf/`, `src/handlebars/`, `src/types/`, `src/validation/`, `src/create/index.ts` (`create` entrypoint); root keeps `index.ts` only. Published API unchanged.
+- **Example (`example/`):** `index.js` uses async/await, resolves output path with `path.join`; `template.html` age field corrected (`{{this.age}}`); `npm start` script.
+
+### Documentation
+
+- **README:** **AWS Lambda / serverless** — deployment limits, container vs zip, memory and timeout, note that custom `executablePath` is not exposed on options yet.
+- **README:** **Margins** (`border`), **custom fonts** (hosted + `base` + `@font-face`), **images** (remote, `base`, data URLs, WebP, header/footer), **page-break** hints for wide tables.
+- **GitHub Pages (`docs/`):** **Fonts & images** section and nav link; guide **footer** example aligned with v4 (single template); note on unsupported per-page footer keys; author section with social links.
+
 ## [4.0.0] — 2026-04-03
 
 ### Breaking

CHANGELOG.md

@@ -139,14 +139,17 @@ a:focus-visible {
   box-shadow: 0 1px 0 var(--shadow);
 }
 
-.site-header__inner {
+.site-header__shell {
   max-width: 900px;
   margin: 0 auto;
-  padding: 0.65rem 1.25rem;
+  padding: 0.65rem 1.25rem 0.75rem;
+}
+
+.site-header__top {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 1rem;
-  flex-wrap: wrap;
   min-height: var(--header-h);
 }
 
@@ -165,32 +168,129 @@ a:focus-visible {
 }
 
 .site-nav {
+  margin-top: 0.45rem;
+  padding-top: 0.55rem;
+  border-top: 1px solid var(--border);
+}
+
+.site-nav__menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.35rem 1rem;
-  align-items: center;
-  flex: 1;
-  justify-content: center;
+  align-items: flex-start;
+  gap: 0.15rem 0.35rem;
 }
 
-@media (min-width: 720px) {
-  .site-nav {
-    justify-content: flex-end;
-  }
+.site-nav__item {
+  position: relative;
+  list-style: none;
 }
 
-.site-nav a {
-  font-size: 0.9rem;
-  font-weight: 500;
+.site-nav__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0;
+  font-family: var(--font);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
   color: var(--muted);
-  padding: 0.35rem 0.5rem;
+  padding: 0.4rem 0.55rem;
+  border: 1px solid transparent;
   border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  line-height: 1.2;
+}
+
+.site-nav__trigger:hover {
+  color: var(--text);
+  background: var(--surface);
+}
+
+.site-nav__item:is(:hover, :focus-within) .site-nav__trigger {
+  color: var(--text);
 }
 
-.site-nav a:hover {
+.site-nav__item.is-open .site-nav__trigger {
   color: var(--text);
   background: var(--surface);
+  border-color: var(--border);
+}
+
+.site-nav__trigger:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.site-nav__caret {
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentColor;
+  opacity: 0.75;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.site-nav__item.is-open .site-nav__caret {
+  transform: rotate(180deg);
+}
+
+.site-nav__submenu {
+  position: absolute;
+  top: calc(100% + 3px);
+  left: 0;
+  min-width: 11.5rem;
+  margin: 0;
+  padding: 0.4rem;
+  list-style: none;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 10px 28px var(--shadow);
+  z-index: 100;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-6px);
+  pointer-events: none;
+  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
+}
+
+.site-nav__submenu li {
+  list-style: none;
+  margin: 0;
+}
+
+.site-nav__item:hover .site-nav__submenu,
+.site-nav__item:focus-within .site-nav__submenu,
+.site-nav__item.is-open .site-nav__submenu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.site-nav__submenu a {
+  display: block;
+  padding: 0.45rem 0.6rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text);
   text-decoration: none;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+
+.site-nav__submenu a:hover {
+  background: var(--code-bg);
+  color: var(--accent);
 }
 
 .site-header__actions {
@@ -495,6 +595,28 @@ pre code {
   max-width: 52ch;
 }
 
+.subsection-title {
+  margin: 1.5rem 0 0.6rem;
+  font-size: 1.05rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--text);
+}
+
+.feature-list {
+  margin: 0.35rem 0 1rem;
+  padding-left: 1.25rem;
+  color: var(--text);
+}
+
+.feature-list li {
+  margin-bottom: 0.45rem;
+}
+
+.feature-list li:last-child {
+  margin-bottom: 0;
+}
+
 .author-section .author-card {
   max-width: 40rem;
   padding: 1.35rem 1.5rem;
@@ -518,6 +640,22 @@ pre code {
   font-size: 0.98rem;
 }
 
+.author-card__bio {
+  margin: 0 0 1rem;
+  color: var(--text);
+  font-size: 0.95rem;
+  line-height: 1.55;
+}
+
+.author-social-label {
+  margin: 0 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
 .author-card__contact {
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -578,6 +716,20 @@ html[data-theme="light"] .author-social__link:hover {
   font-size: 0.85em;
 }
 
+.fonts-images-list {
+  margin: 0 0 1rem;
+  padding-left: 1.35rem;
+  color: var(--text);
+}
+
+.fonts-images-list li {
+  margin-bottom: 0.75rem;
+}
+
+.fonts-images-list li:last-child {
+  margin-bottom: 0;
+}
+
 .steps {
   list-style: none;
   margin: 0;
@@ -712,19 +864,61 @@ html[data-theme="light"] .note {
   outline-offset: 2px;
 }
 
-@media (max-width: 520px) {
-  .site-nav {
+@media (max-width: 640px) {
+  .site-nav__menu {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .site-nav__item {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .site-nav__item:last-child {
+    border-bottom: none;
+  }
+
+  .site-nav__trigger {
     width: 100%;
-    justify-content: flex-start;
-    order: 3;
-    padding-top: 0.25rem;
-    border-top: 1px solid var(--border);
-    margin-top: 0.25rem;
-    padding-top: 0.65rem;
+    justify-content: space-between;
+    padding: 0.55rem 0.35rem 0.55rem 0.15rem;
+    font-size: 0.78rem;
+  }
+
+  /* Touch / narrow: only .is-open reveals submenu (hover disabled by display) */
+  .site-nav__submenu {
+    position: static;
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+    padding: 0 0 0.65rem 0.5rem;
+    background: transparent;
+    transform: none;
+    transition: none;
+  }
+
+  .site-nav__item:not(.is-open) .site-nav__submenu {
+    display: none;
+  }
+
+  .site-nav__item.is-open .site-nav__submenu {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
   }
 
-  .site-header__inner {
-    flex-wrap: wrap;
+  .site-nav__submenu a {
+    white-space: normal;
+    padding: 0.4rem 0.5rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .site-header__shell {
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 
   .hero {

docs/assets/css/style.css

@@ -116,15 +116,67 @@
     });
   }
 
+  /** Menu / submenu: click toggles (required on narrow viewports); Escape / outside click closes. */
+  function initNavSubmenus() {
+    var nav = document.querySelector(".site-nav");
+    if (!nav) return;
+
+    function setOpen(li, open) {
+      var btn = li.querySelector(".site-nav__trigger");
+      if (open) {
+        li.classList.add("is-open");
+        if (btn) btn.setAttribute("aria-expanded", "true");
+      } else {
+        li.classList.remove("is-open");
+        if (btn) btn.setAttribute("aria-expanded", "false");
+      }
+    }
+
+    function closeAll() {
+      nav.querySelectorAll(".site-nav__item.is-open").forEach(function (li) {
+        setOpen(li, false);
+      });
+    }
+
+    nav.querySelectorAll(".site-nav__trigger").forEach(function (btn) {
+      btn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var li = btn.closest(".site-nav__item");
+        if (!li) return;
+        var wasOpen = li.classList.contains("is-open");
+        closeAll();
+        if (!wasOpen) setOpen(li, true);
+      });
+    });
+
+    nav.querySelectorAll(".site-nav__submenu a").forEach(function (a) {
+      a.addEventListener("click", function () {
+        closeAll();
+      });
+    });
+
+    document.addEventListener("click", closeAll);
+    nav.addEventListener("click", function (e) {
+      e.stopPropagation();
+    });
+
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") closeAll();
+    });
+  }
+
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", function () {
       initTheme();
       initCopyButtons();
       initBackToTop();
+      initNavSubmenus();
     });
   } else {
     initTheme();
     initCopyButtons();
     initBackToTop();
+    initNavSubmenus();
   }
 })();