Add per-post section tabs and widen the post column

Roundup posts (News / Techniques / Tools) had 100+ items rendered in a
single 720px column. Two changes:

- assets/css/extended/custom.css: widen --main-width to min(95vw, 1100px)
  so the column scales with viewport width up to a readable cap. Drop the
  post-body font to 0.94rem so the wider column doesn't feel oversized.
  Style the <details> blocks so the long-tail disclosures stand out.
- layouts/partials/extend_footer.html: client-side script that wraps each
  H2 section in a div and adds a sticky tab strip at the top
  (Overview | News | Techniques | Tools). Overview shows all sections
  (default); per-section tabs filter to one. URL hash drives initial state
  so direct links to e.g. /posts/<slug>/#tools land on that tab.

Author: aconite33

assets/css/extended/custom.css

@@ -0,0 +1,79 @@
+/* PaperMod's main column defaults to 720px. Roundup posts are wide-by-nature
+   (long links + bullet lists), so let them spread up to 1100px while still
+   capping on ultra-wide displays. */
+:root {
+    --main-width: min(95vw, 1100px);
+}
+
+.main {
+    max-width: calc(var(--main-width) + var(--gap) * 2);
+}
+
+/* Slight font drop in the post body so a 1000+ px column doesn't feel
+   oversized. */
+.post-content {
+    font-size: 0.94rem;
+    line-height: 1.65;
+}
+.post-content p { margin: 0.7em 0; }
+.post-content blockquote {
+    margin: 0.5em 0 0.9em;
+    padding: 0.4em 0.9em;
+    font-size: 0.92rem;
+}
+.post-content ul,
+.post-content ol { margin: 0.5em 0 0.9em; padding-left: 1.4em; }
+.post-content li { margin: 0.25em 0; }
+.post-content details {
+    margin: 1.2em 0;
+    padding: 0.6em 0.95em;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--code-bg);
+}
+.post-content details summary {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--secondary);
+    user-select: none;
+}
+.post-content details[open] summary { margin-bottom: 0.6em; }
+
+/* Per-post tab strip (Overview / News / Techniques / Tools).
+   Built at runtime by extend_footer.html. The strip lives at the top of
+   the article body; sections are wrapped in .post-section divs that get
+   shown/hidden on tab click. */
+.post-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin: 1rem 0 1.4rem;
+    padding-bottom: 0.6rem;
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    background: var(--theme);
+    z-index: 5;
+}
+.post-tab {
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 0.32rem 0.95rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--secondary);
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.post-tab:hover {
+    background: var(--code-bg);
+    color: var(--primary);
+    border-color: var(--secondary);
+}
+.post-tab.active {
+    background: var(--primary);
+    color: var(--theme);
+    border-color: var(--primary);
+}
+.post-section { /* placeholder; shown/hidden via inline style */ }

layouts/partials/extend_footer.html

@@ -0,0 +1,85 @@
+{{- /*
+  Roundup post tab strip. Looks for the H2 section headings inside
+  .post-content and wraps each section (h2 + everything until the next h2)
+  in a div the JS can show/hide. Tab strip: Overview (default, shows all),
+  one button per section. URL hash drives initial tab; clicking persists.
+  Quietly no-ops on non-roundup posts (fewer than 2 H2s).
+*/ -}}
+<script>
+(function () {
+  var post = document.querySelector('.post-content[itemprop="articleBody"]')
+          || document.querySelector('.post-content');
+  if (!post) return;
+
+  var headings = post.querySelectorAll(':scope > h2');
+  if (headings.length < 2) return;
+
+  // Group each heading with its sibling content, up to (but not including)
+  // the next heading.
+  var groups = [];
+  for (var i = 0; i < headings.length; i++) {
+    var h = headings[i];
+    var stop = headings[i + 1] || null;
+    var els = [h];
+    var n = h.nextElementSibling;
+    while (n && n !== stop) { els.push(n); n = n.nextElementSibling; }
+    groups.push({ id: h.id || ('section-' + i), label: h.textContent.trim(), elements: els });
+  }
+
+  // Wrap each group in a div so we can show/hide as a unit.
+  var wrappers = groups.map(function (g) {
+    var div = document.createElement('div');
+    div.className = 'post-section';
+    div.dataset.sectionId = g.id;
+    var first = g.elements[0];
+    first.parentNode.insertBefore(div, first);
+    g.elements.forEach(function (el) { div.appendChild(el); });
+    return div;
+  });
+
+  // Build the tab strip.
+  var nav = document.createElement('nav');
+  nav.className = 'post-tabs';
+  nav.setAttribute('aria-label', 'Post sections');
+
+  var buttons = [];
+  function makeTab(id, label) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'post-tab';
+    b.dataset.target = id;
+    b.textContent = label;
+    b.addEventListener('click', function () { activate(id, true); });
+    nav.appendChild(b);
+    buttons.push(b);
+  }
+  makeTab('overview', 'Overview');
+  groups.forEach(function (g) {
+    // Trim the visible label to the first noun so the strip stays compact:
+    // "Techniques and Write-ups" -> "Techniques", "Tools and Exploits" -> "Tools".
+    var short = g.label.split(/\s+and\s+|\s*&\s*/i)[0].trim();
+    makeTab(g.id, short);
+  });
+
+  function activate(id, push) {
+    wrappers.forEach(function (w) {
+      w.style.display = (id === 'overview' || w.dataset.sectionId === id) ? '' : 'none';
+    });
+    buttons.forEach(function (b) {
+      b.classList.toggle('active', b.dataset.target === id);
+    });
+    if (push) {
+      var newHash = id === 'overview' ? '' : '#' + id;
+      var target = location.pathname + location.search + newHash;
+      history.replaceState(null, '', target);
+    }
+  }
+
+  wrappers[0].parentNode.insertBefore(nav, wrappers[0]);
+
+  var validIds = { 'overview': 1 };
+  groups.forEach(function (g) { validIds[g.id] = 1; });
+  var initial = location.hash.replace('#', '');
+  activate(validIds[initial] ? initial : 'overview', false);
+})();
+</script>