Prevent header layout shifts on the homepage

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">
@@ -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 %}
+    <h2 class="sticky-section-heading">Remarkable</h2>
   </div>
   <ul id="remarkable-list" class="remarkable-list">
     {% for pkg in collections.remarkable_packages %}

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)

static/style/sticky-section-header.css

@@ -1,8 +1,11 @@
-.sticky-section-header {
-  > h2 {
-    padding-top: 0;
+@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;
     top: 0;

static/styles.css

@@ -257,9 +257,6 @@ section {
 
   &[data-list-target]:not(.readme) {
     padding-top: 14px;
-    > h2:first-child {
-      padding-top: 0;
-    }
   }
 
   &[name="package"] {