From 8e9d15e59819f1949d01708fec31c2b3961ae2ae Mon Sep 17 00:00:00 2001
From: herr kaste <herr.kaste@gmail.com>
Date: Wed, 22 Jul 2026 15:41:32 +0200
Subject: [PATCH 1/3] Restore standard section heading spacing

Remove the heading padding overrides so homepage sections retain the
standard 28px of space above their headings.
---
 static/style/sticky-section-header.css | 4 ----
 static/styles.css                      | 3 ---
 2 files changed, 7 deletions(-)

diff --git a/static/style/sticky-section-header.css b/static/style/sticky-section-header.css
index 01c3e3bec..e6ff2789c 100644
--- a/static/style/sticky-section-header.css
+++ b/static/style/sticky-section-header.css
@@ -1,8 +1,4 @@
 .sticky-section-header {
-  > h2 {
-    padding-top: 0;
-  }
-
   &.is-sticky {
     position: sticky;
     top: 0;
diff --git a/static/styles.css b/static/styles.css
index 221d16351..d73c1f1e7 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -257,9 +257,6 @@ section {
 
   &[data-list-target]:not(.readme) {
     padding-top: 14px;
-    > h2:first-child {
-      padding-top: 0;
-    }
   }
 
   &[name="package"] {

From 228c72149aa2ee59bcd8265476550f721332ba98 Mon Sep 17 00:00:00 2001
From: herr kaste <herr.kaste@gmail.com>
Date: Wed, 22 Jul 2026 15:55:53 +0200
Subject: [PATCH 2/3] Progressively render remarkable pager

Create the remarkable page controls during client-side initialization so
users never see pager buttons before they become functional.
---
 index.njk                         |  8 --------
 static/module/remarkable-pager.js | 27 ++++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/index.njk b/index.njk
index 069f9d56f..1a01d78dd 100644
--- a/index.njk
+++ b/index.njk
@@ -43,17 +43,9 @@ page_type: home
   </ul>
 </section>
 
-{% set hasRemarkableSecondPage = (collections.remarkable_packages | length) > 20 %}
 <section name="remarkable" data-list-target="main-content" data-remarkable-page="1">
   <div class="remarkable-header">
     <h2>Remarkable</h2>
-    {% if hasRemarkableSecondPage %}
-      <nav class="remarkable-pagination" aria-label="Remarkable pages">
-        <button type="button" class="remarkable-page-button" data-remarkable-page-control="1" aria-current="page" aria-controls="remarkable-list">1</button>
-        <span class="remarkable-page-separator" aria-hidden="true">|</span>
-        <button type="button" class="remarkable-page-button" data-remarkable-page-control="2" aria-controls="remarkable-list">2</button>
-      </nav>
-    {% endif %}
   </div>
   <ul id="remarkable-list" class="remarkable-list">
     {% for pkg in collections.remarkable_packages %}
diff --git a/static/module/remarkable-pager.js b/static/module/remarkable-pager.js
index 8a49406a5..c9db43c1b 100644
--- a/static/module/remarkable-pager.js
+++ b/static/module/remarkable-pager.js
@@ -3,6 +3,20 @@ import { initStickySectionHeader } from './sticky-section-header.js'
 const REMARKABLE_PAGE_PARAM = 'remarkable-page'
 const FIRST_PAGE = '1'
 const SECOND_PAGE = '2'
+// Shortcut: responsive CSS also has 15-item pages, but the remarkable
+// collection normally fills the widest layout's two 20-item pages.
+const PAGE_SIZE = 20
+
+const CONTROLS_TEMPLATE_HTML = `
+  <nav class="remarkable-pagination" aria-label="Remarkable pages">
+    <button type="button" class="remarkable-page-button" data-remarkable-page-control="1" aria-current="page" aria-controls="remarkable-list">1</button>
+    <span class="remarkable-page-separator" aria-hidden="true">|</span>
+    <button type="button" class="remarkable-page-button" data-remarkable-page-control="2" aria-controls="remarkable-list">2</button>
+  </nav>
+`
+
+const controlsTemplate = document.createElement('template')
+controlsTemplate.innerHTML = CONTROLS_TEMPLATE_HTML.trim()
 
 const section = document.querySelector('section[name="remarkable"]')
 
@@ -11,12 +25,12 @@ if (section) {
 }
 
 function initRemarkablePager(section) {
+  const controls = renderControls(section)
   const stickyHeader = initStickySectionHeader(section, {
     headerSelector: '.remarkable-header',
     listSelector: '.remarkable-list',
   })
 
-  const controls = Array.from(section.querySelectorAll('[data-remarkable-page-control]'))
   if (controls.length < 2) {
     return
   }
@@ -36,6 +50,17 @@ function initRemarkablePager(section) {
   }
 }
 
+function renderControls(section) {
+  const list = section.querySelector('.remarkable-list')
+  if (list.children.length <= PAGE_SIZE) {
+    return []
+  }
+
+  const controls = controlsTemplate.content.firstElementChild.cloneNode(true)
+  section.querySelector('.remarkable-header').appendChild(controls)
+  return Array.from(controls.querySelectorAll('[data-remarkable-page-control]'))
+}
+
 function syncFromUrl(section, controls, stickyHeader) {
   const page = pageFromUrl()
   showRemarkablePage(section, page, controls, stickyHeader)

From 846add4fea2957290a9e5b0eeb31a037769ca8ca Mon Sep 17 00:00:00 2001
From: herr kaste <herr.kaste@gmail.com>
Date: Wed, 22 Jul 2026 16:09:25 +0200
Subject: [PATCH 3/3] Prevent sticky header layout shifts

Apply compact heading spacing before pager initialization on narrower
layouts. Reserve the sticky header's two-pixel bottom margin so cards
remain stationary when sticky behavior activates.
---
 index.njk                              | 6 +++---
 static/style/sticky-section-header.css | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/index.njk b/index.njk
index 1a01d78dd..6475a8f2c 100644
--- a/index.njk
+++ b/index.njk
@@ -18,7 +18,7 @@ page_type: home
 </script>
 
 <section name="newest" data-list-target="main-content">
-  <h2>
+  <h2 class="sticky-section-heading">
     <a href="/?sort=newest" class="section-heading-link">Newest</a>
   </h2>
   <ul class="grid">
@@ -31,7 +31,7 @@ page_type: home
 </section>
 
 <section name="recent" data-list-target="main-content">
-  <h2>
+  <h2 class="sticky-section-heading">
     <a href="/?sort=update" class="section-heading-link">Recently updated</a>
   </h2>
   <ul class="grid">
@@ -45,7 +45,7 @@ page_type: home
 
 <section name="remarkable" data-list-target="main-content" data-remarkable-page="1">
   <div class="remarkable-header">
-    <h2>Remarkable</h2>
+    <h2 class="sticky-section-heading">Remarkable</h2>
   </div>
   <ul id="remarkable-list" class="remarkable-list">
     {% for pkg in collections.remarkable_packages %}
diff --git a/static/style/sticky-section-header.css b/static/style/sticky-section-header.css
index e6ff2789c..243986ed2 100644
--- a/static/style/sticky-section-header.css
+++ b/static/style/sticky-section-header.css
@@ -1,3 +1,10 @@
+@media (width < 80rem) {
+  .sticky-section-heading {
+    padding-top: 5px;
+    margin-bottom: 11px; /* 9px heading margin + 2px sticky header margin */
+  }
+}
+
 .sticky-section-header {
   &.is-sticky {
     position: sticky;