pandorga 1.9.0 → 1.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5ce749863130651664857439b365492b57207e7d0aba994315be703200fe0f48
-  data.tar.gz: 1b8f5293944f8cd27c76ee413f69e02869e9dc1cd6619aa48cfde1daf2355b98
+  metadata.gz: 57520c1d6ff472368d36e60fe8b2cfa73bd3a10ae64e5201d7ff2aae2d05d93f
+  data.tar.gz: 373041d44db6e27eff5cfb42e6086c5d78b54c1a57e682906ed74d4167f3efe7
 SHA512:
-  metadata.gz: 157e81581c2e84cf398ab699902f1a3a17023e26b4fdbc27e76cba5013f1f7e2f5609cafe2dc65cf9bad36c9027bdb520d0ab22891324c9dfc63c3aabda76abc
-  data.tar.gz: b016e51119eadedc1ae7b063800580dfa04519cc84f0f9cae4237a4a9e4a356c8d329ac44d8d9da4220e48bab33b68a74c891e59e50a07c947685750d178377f
+  metadata.gz: dea59bee7700b649e1db8740f8b825332b3c382e03ab8e7745ec3261dc7d31140571b26bdf2e7cb27f13910d6974aa7cb9e8f7a38a0dfb8c5064cc5c41c4400d
+  data.tar.gz: 7ce51565da0ef33816b8f95b37ba80e0300d91135049a80025719d4b91571be9a15c5fe0c3e1d13722f817b1c73f81e76a274fae54d11506e06da75eda0e9159

data/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [1.10.0] — 2026-10-14
+
+### Added
+
+- A portrait entry in `pages/home/portraits.json` may set `landscape`, a
+  16:9 URL. At or below 767px the home hero draws at random from the
+  entries that have one and paints that file. `pandorga.home.hero_landscape`
+  is the fallback when none do. The phone plate stays 16:9
+
+### Changed
+
+- On article, draft, product, and project detail pages, category and tag
+  chips sit above the title
+- On a phone, the detail title sits closer to the nav (`pt-10` to
+  `--space-xl`). The gaps inside the title block and before the contents
+  list each drop one spacing token. The contents list keeps `--space-md`
+  under it, inside the title plate. The stacked gap between that plate
+  and the reading column is `--space-md`. Desktop column gutter stays
+  2rem, and 3rem from 1024px
+- Article and draft section headings grow by 2pt on `h2` and 1pt on `h3`.
+  The same sizes apply to project and product bodies
+
+## [1.9.1] — 2026-10-14
+
+### Fixed
+
+- The article description under the detail title uses `--type-prose`, the
+  same size as the body text. Family, weight, color, and spacing stay as
+  they were
+- Bordered and boxed read-more pills do not underline the label.
+  Plain text read-more links stay underlined. Focus still shows the
+  outline
+
 ## [1.9.0] — 2026-10-13
 
 ### Added

data/_includes/content-runtime/50-detail.html

@@ -6,6 +6,16 @@
       var description = fm.description || fm.tagline || '';
       var parts = ['<div class="md:sticky md:top-32 text-detail-sidebar">'];
 
+      var chips = '';
+      if (typeof renderTagChips === 'function') {
+        var tagBase = { posts: '/pages/blog/', articles: '/pages/articles/',
+                        project: '/pages/projects/' }[fm.layout === 'project' ? 'project' :
+                        (fm.layout === 'post' ? 'posts' : (fm.layout === 'article' ? 'articles' : ''))];
+        chips = renderTagChips(fm.tags, tagBase ? {
+          hrefFor: function (tag) { return tagBase + '?tag=' + encodeURIComponent(tag); }
+        } : undefined) || '';
+      }
+
       if (title) {
         parts.push('<div class="article-sidebar-heading mb-8">');
         if (fm.icon) {
@@ -14,6 +24,11 @@
              it green there regardless. */
           parts.push('<span class="material-symbols-outlined text-5xl md:text-6xl text-primary mb-4 block leading-none" aria-hidden="true">' + escapeHtml(fm.icon) + '</span>');
         }
+        /* Classification sits above the title, as a kicker. Tags replaced
+           category on articles and posts; an entry that still has category
+           keeps that line with the chips. */
+        if (fm.category) parts.push('<span class="text-tertiary font-bold">' + escapeHtml(fm.category) + '</span>');
+        if (chips) parts.push(chips);
         parts.push('<h1 class="text-title">' + escapeHtml(title) + '</h1>');
         if (fm.layout === 'post' && fm.thumbnail) {
           parts.push(
@@ -35,20 +50,8 @@
 
       parts.push('<div class="flex flex-col gap-6 text-tertiary font-label text-xs article-meta mb-8">');
       parts.push('<div class="flex flex-col gap-2">');
-      // Tags replaced category on articles and posts; resources still classify
-      // on category, so both are read.
-      if (fm.category) parts.push('<span class="text-tertiary font-bold">' + escapeHtml(fm.category) + '</span>');
-      // The private Liquid path renders these as links into the listing
-      // filter; rendering them as inert spans here gave the same page two
-      // different affordances depending on which path drew it.
-      if (typeof renderTagChips === 'function') {
-        var tagBase = { posts: '/pages/blog/', articles: '/pages/articles/',
-                        project: '/pages/projects/' }[fm.layout === 'project' ? 'project' :
-                        (fm.layout === 'post' ? 'posts' : (fm.layout === 'article' ? 'articles' : ''))];
-        parts.push(renderTagChips(fm.tags, tagBase ? {
-          hrefFor: function (tag) { return tagBase + '?tag=' + encodeURIComponent(tag); }
-        } : undefined));
-      }
+      if (!title && fm.category) parts.push('<span class="text-tertiary font-bold">' + escapeHtml(fm.category) + '</span>');
+      if (!title && chips) parts.push(chips);
       if (dateHtml) parts.push('<div class="mt-1">' + dateHtml + '</div>');
       if (fm.layout === 'product') {
         if (fm.company) parts.push('<span class="text-secondary font-bold">' + escapeHtml(fm.company) + '</span>');

data/_includes/content-runtime/60-fragments.html

@@ -519,6 +519,8 @@
     // content/media/images/hero/. One entry is chosen per document load.
     // A file that fails to load is skipped. The plate stays black until one
     // pool file has loaded, and stays black when every entry fails.
+    // At or below 767px the draw uses entries that carry `landscape` (a 16:9
+    // URL). The single data-hero-landscape URL is the fallback when none do.
     function heroPortraitEntries(data) {
       var list = Array.isArray(data) ? data : [];
       var entries = [];
@@ -536,6 +538,10 @@
         var sizes = typeof entry.sizes === 'string' ? entry.sizes.trim() : '';
         if (srcset) record.srcset = srcset;
         if (sizes) record.sizes = sizes;
+        // Optional 16:9 file for the phone plate. Absent, the entry stays a
+        // portrait and the narrow draw skips it.
+        var landscape = typeof entry.landscape === 'string' ? entry.landscape.trim() : '';
+        if (landscape) record.landscape = landscape;
         entries.push(record);
       }
       return entries;
@@ -595,6 +601,16 @@
       });
     }
 
+    function heroLandscapeEntries(entries) {
+      var list = [];
+      var i;
+      var rows = entries || [];
+      for (i = 0; i < rows.length; i++) {
+        if (rows[i] && rows[i].landscape) list.push(rows[i]);
+      }
+      return list;
+    }
+
     function showHeroPortrait(img, entries) {
       var chosen = pickHeroPortrait(entries, Math.random);
       if (!chosen) return Promise.resolve();
@@ -613,28 +629,123 @@
       return next();
     }
 
-    function heroLandscapeActive(img) {
+    function configuredLandscape(img) {
       var url = img && img.getAttribute('data-hero-landscape');
-      if (!url || !String(url).trim() || !window.matchMedia) return false;
-      return window.matchMedia('(max-width: 767px)').matches;
+      url = url ? String(url).trim() : '';
+      return url;
     }
 
-    function clearHeroSources(img) {
-      img.removeAttribute('src');
-      img.removeAttribute('srcset');
-      img.removeAttribute('sizes');
-      img.alt = '';
+    function heroPlate(img) {
+      var node = img && img.parentElement;
+      while (node) {
+        if (node.classList && node.classList.contains('home-hero-plate')) return node;
+        node = node.parentElement;
+      }
+      return null;
+    }
+
+    function setNarrowSource(img, url) {
+      var picture = img.parentElement;
+      if (!picture || String(picture.tagName).toUpperCase() !== 'PICTURE') return;
+      var source = picture.querySelector('source');
+      if (!url) {
+        if (source) source.removeAttribute('srcset');
+        return;
+      }
+      if (!source) {
+        source = document.createElement('source');
+        source.setAttribute('media', '(max-width: 767px)');
+        picture.insertBefore(source, img);
+      }
+      source.setAttribute('srcset', url);
+    }
+
+    function applyHeroLandscapeFile(img, chosen) {
+      var nextSrc = resolveAssetUrl(chosen && (chosen.landscape || chosen.src));
+      var nextAlt = (chosen && chosen.alt) || '';
+      if (!nextSrc) return Promise.resolve(false);
+      if (img.getAttribute('src') === nextSrc) {
+        img.alt = nextAlt;
+        img.removeAttribute('srcset');
+        img.removeAttribute('sizes');
+        setNarrowSource(img, nextSrc);
+        img.classList.add('is-shown');
+        return Promise.resolve(true);
+      }
+      return new Promise(function (resolve) {
+        var probe = new Image();
+        probe.fetchPriority = 'high';
+        probe.onload = function () {
+          img.alt = nextAlt;
+          img.removeAttribute('srcset');
+          img.removeAttribute('sizes');
+          setNarrowSource(img, nextSrc);
+          img.fetchPriority = 'high';
+          img.src = nextSrc;
+          img.classList.add('is-shown');
+          resolve(true);
+        };
+        probe.onerror = function () {
+          resolve(false);
+        };
+        probe.src = nextSrc;
+      });
+    }
+
+    function showHeroLandscape(img, entries) {
+      var chosen = pickHeroPortrait(entries, Math.random);
+      if (!chosen) return Promise.resolve(false);
+      var start = entries.indexOf(chosen);
+      var ordered = entries.slice(start).concat(entries.slice(0, start));
+      var index = 0;
+      function next() {
+        if (index >= ordered.length) return Promise.resolve(false);
+        var entry = ordered[index];
+        index += 1;
+        return applyHeroLandscapeFile(img, entry).then(function (ok) {
+          if (ok) return true;
+          return next();
+        });
+      }
+      return next();
+    }
+
+    function showConfiguredLandscape(img) {
+      var url = configuredLandscape(img);
+      if (!url) return Promise.resolve(false);
+      var plate = heroPlate(img);
+      if (plate) plate.classList.add('home-hero-plate--landscape');
+      return applyHeroLandscapeFile(img, { landscape: url, alt: '' });
+    }
+
+    function paintNarrowHero(img) {
+      img.classList.remove('is-shown');
+      return loadJson('pages/home/portraits.json').then(function (data) {
+        var entries = heroPortraitEntries(data);
+        var landscapes = heroLandscapeEntries(entries);
+        if (landscapes.length) {
+          var plate = heroPlate(img);
+          if (plate) plate.classList.add('home-hero-plate--landscape');
+          return showHeroLandscape(img, landscapes).then(function (ok) {
+            if (ok) return;
+            return showConfiguredLandscape(img);
+          });
+        }
+        if (configuredLandscape(img)) return showConfiguredLandscape(img);
+        return showHeroPortrait(img, entries);
+      }).catch(function (error) {
+        console.error(error);
+        if (configuredLandscape(img)) return showConfiguredLandscape(img);
+      });
     }
 
     function watchHeroFrame(img) {
-      var url = img.getAttribute('data-hero-landscape');
-      if (!url || !String(url).trim() || !window.matchMedia) return;
+      if (!window.matchMedia) return;
       var mq = window.matchMedia('(max-width: 767px)');
       if (!mq.addEventListener) return;
       mq.addEventListener('change', function () {
         if (mq.matches) {
-          clearHeroSources(img);
-          img.classList.add('is-shown');
+          paintNarrowHero(img);
           return;
         }
         img.classList.remove('is-shown');
@@ -650,7 +761,9 @@
       var img = document.querySelector('[data-content-hero-portrait]');
       if (!img) return Promise.resolve();
       watchHeroFrame(img);
-      if (heroLandscapeActive(img)) return Promise.resolve();
+      if (window.matchMedia && window.matchMedia('(max-width: 767px)').matches) {
+        return paintNarrowHero(img);
+      }
       return loadJson('pages/home/portraits.json').then(function (data) {
         return showHeroPortrait(img, heroPortraitEntries(data));
       }).catch(function (error) {

data/_layouts/projects.html

@@ -413,6 +413,8 @@ layout: shell
       html += '<span class="shard-accent projects-hero-shard" aria-hidden="true"></span>';
       html += '<div class="projects-hero-body">';
       if (line) html += line;
+      var chips = runtime.renderTagChips(fm.tags, { hrefFor: tagHref });
+      if (chips) html += chips;
       html += '<h1 class="projects-hero-title">' + esc(name) + '</h1>';
       if (fm.title && fm.title !== name) {
         html += '<p class="projects-hero-subtitle">' + esc(fm.title) + '</p>';
@@ -464,9 +466,6 @@ layout: shell
           esc(String(fm.external_url).replace(/^https?:\/\/(www\.)?/i, '').replace(/\/+$/, '')) +
           '</a>');
       }
-      var chips = runtime.renderTagChips(fm.tags, { hrefFor: tagHref });
-      if (chips) rows += dossierRow('Tags', chips);
-
       var html = '<div class="lg:sticky lg:top-32 projects-dossier">';
       if (rows) {
         html += '<p class="projects-dossier-title">Dossier</p>';

data/_layouts/text.html

@@ -66,11 +66,26 @@ layout: shell
   <div class="grid grid-cols-1 gap-8 lg:gap-12 items-start text-detail-grid">
     <aside>
       <div class="md:sticky md:top-32 text-detail-sidebar">
+        {% capture detail_tags %}
+            {% if page.tags and page.tags.size > 0 %}
+            <div class="ledger-chip-row">
+              {% for tag in page.tags %}
+                {% if tag_base %}
+              <a class="ledger-chip" href="{{ tag_base }}{{ tag | url_encode }}">{{ tag }}</a>
+                {% else %}
+              <span class="ledger-chip">{{ tag }}</span>
+                {% endif %}
+              {% endfor %}
+            </div>
+            {% endif %}
+          {% endcapture %}
+
         {% if page.collection == "posts" or page.collection == "articles" or page.layout == "product" or page.layout == "project" %}
         <div class="article-sidebar-heading mb-8">
           {% if page.icon %}
           <span class="material-symbols-outlined text-5xl md:text-6xl text-secondary mb-4 block leading-none" aria-hidden="true">{{ page.icon }}</span>
           {% endif %}
+          {{ detail_tags }}
           <h1 class="text-title">{{ page.title }}</h1>
           {% if page.collection == "posts" and page.thumbnail %}
           <figure class="article-sidebar-thumbnail">
@@ -87,20 +102,12 @@ layout: shell
         <div class="flex flex-col gap-6 text-tertiary font-label text-xs article-meta mb-8">
           <div class="flex flex-col gap-2">
             {% comment %}
-              Classification. `tags` replaced `category` on articles and posts;
-              an entry with no tags renders no chip row at all.
+              Classification sits in the heading, above the title. Collections
+              that do not render that heading keep the chips here.
             {% endcomment %}
-            {% if page.tags and page.tags.size > 0 %}
-            <div class="ledger-chip-row">
-              {% for tag in page.tags %}
-                {% if tag_base %}
-              <a class="ledger-chip" href="{{ tag_base }}{{ tag | url_encode }}">{{ tag }}</a>
-                {% else %}
-              <span class="ledger-chip">{{ tag }}</span>
-                {% endif %}
-              {% endfor %}
-            </div>
-            {% endif %}
+            {% unless page.collection == "posts" or page.collection == "articles" or page.layout == "product" or page.layout == "project" %}
+            {{ detail_tags }}
+            {% endunless %}
 
             {% if page.collection == "posts" or page.collection == "articles" %}
               {% include page/date_evolution.html stacked=true %}

data/assets/css/article.css

@@ -73,13 +73,13 @@
 }
 
 .article-content h2 {
-  /* Same step ### used to take. */
-  font-size: var(--type-card-lg);
+  /* Card step, plus 2pt. detail.css owns the same size when it loads. */
+  font-size: calc(var(--type-card-lg) + 2pt);
 }
 
 .article-content h3 {
-  /* Halfway between ## and the reading size. */
-  font-size: calc((var(--type-card-lg) + var(--type-prose)) / 2);
+  /* Halfway between ## and the reading size, plus 1pt. */
+  font-size: calc((var(--type-card-lg) + var(--type-prose)) / 2 + 1pt);
 }
 
 .article-content h4 {
@@ -745,7 +745,7 @@ body.figure-lightbox-open {
 
 .article-sidebar-description {
   font-family: var(--font-body);
-  font-size: var(--type-body);
+  font-size: var(--type-prose);
   font-weight: var(--weight-body);
   line-height: var(--leading-body);
   letter-spacing: normal;
@@ -923,7 +923,7 @@ body.figure-lightbox-open {
   .text-page-main[data-dynamic-article-detail],
   .text-page-main[data-dynamic-post-detail],
   .text-page-main[data-dynamic-portfolio-detail] {
-    margin-top: 2.5rem;
+    margin-top: 0;
   }
 }
 

data/assets/css/base.css

@@ -1026,6 +1026,16 @@ a.ledger-chip:hover {
   text-decoration-color: color-mix(in srgb, var(--color-link-hover) 75%, transparent);
 }
 
+/* Pill read-more only. The box is the affordance, so the label line would
+   cross the border. Plain text read-more keeps the underline above.
+   Focus keeps the outline. */
+:is(.ledger-cta--emphasis, .ledger-cta--emphasis-alt):is(:link, :visited, :hover, :focus, :focus-visible, :active),
+:is(.home-featured-foot, .writing-lead-foot) :is(.home-featured-cta, .writing-lead-cta):is(:link, :visited, :hover, :focus, :focus-visible, :active),
+:is(.ledger-cta--emphasis, .ledger-cta--emphasis-alt):is(:link, :visited, :hover, :focus, :focus-visible, :active)>span:not(.ledger-cta-arrow):not(.ledger-cta-icon),
+:is(.home-featured-foot, .writing-lead-foot) :is(.home-featured-cta, .writing-lead-cta).ledger-cta:is(:link, :visited, :hover, :focus, :focus-visible, :active)>span:not(.ledger-cta-arrow):not(.ledger-cta-icon) {
+  text-decoration: none;
+}
+
 .ledger-cta-arrow {
   transition: transform var(--motion-duration-fast) var(--motion-ease-default);
 }

data/assets/css/ledger/detail.css

@@ -403,6 +403,20 @@ aside:has(> .text-detail-sidebar) {
   border-bottom: 0;
 }
 
+/* Tag and category lines are the kicker, above the title. */
+.text-detail-sidebar .article-sidebar-heading > span.text-tertiary {
+  display: block;
+  margin: 0 0 var(--space-xs);
+  font-family: var(--font-label);
+  font-size: var(--type-label-lg);
+  letter-spacing: 0.04em;
+  color: var(--color-tertiary);
+}
+
+.text-detail-sidebar .article-sidebar-heading .ledger-chip-row {
+  margin: 0 0 var(--space-sm);
+}
+
 /* Canonical shard, bottom-right, as in the mockup. Decoration only: it is
    suppressed below the tablet breakpoint like every other shard. */
 .text-detail-sidebar .article-sidebar-heading::after {
@@ -464,12 +478,11 @@ aside:has(> .text-detail-sidebar) {
 }
 
 /* Lead thesis. `description` is the article's own one-sentence claim — body
-   face and body size, in legend ink so it sits under the H1 without matching
-   the reading column. */
+   face at the prose size, in legend ink so it sits under the H1. */
 .text-detail-sidebar .article-sidebar-description {
   font-family: var(--font-body);
   font-style: normal;
-  font-size: var(--type-body);
+  font-size: var(--type-prose);
   font-weight: var(--weight-body);
   line-height: var(--leading-body);
   color: var(--color-legend);
@@ -639,6 +652,22 @@ aside:has(> .text-detail-sidebar) {
   background: var(--color-surface-container-low);
 }
 
+@media (max-width: 1023px) {
+  .text-detail-sidebar .article-toc--disclosure,
+  .projects-dossier .article-toc--disclosure {
+    margin-top: var(--space-md);
+    margin-bottom: var(--space-md);
+  }
+}
+
+/* The desktop contents card is the last block in the dossier when Related
+   Texts are absent, so the same inset keeps its border off the plate edge.
+   Related Texts bring a larger top margin, and the two margins collapse. */
+.text-detail-sidebar .article-toc--sidebar,
+.projects-dossier .article-toc--sidebar {
+  margin-bottom: var(--space-md);
+}
+
 .article-toc-summary {
   padding: var(--space-sm) var(--space-md);
   font-weight: 400;
@@ -693,13 +722,13 @@ aside:has(> .text-detail-sidebar) {
    to the paragraph under it to stop the eye on its own, and the hairline was
    doing most of the work. h3 and the sidebar h1 move with it below.
 
-   ## takes the card step (`--type-card-lg`), the size ### used to have.
-   ### is the midpoint of that step and the reading size. #### is the reading
+   ## is the card step (`--type-card-lg`) plus 2pt.
+   ### is the midpoint of that step and the reading size, plus 1pt. #### is the reading
    size itself (`--type-prose`), so it matches the paragraph and still reads
    as a heading by weight. */
 .article-content h2 {
   font-family: var(--font-content-title);
-  font-size: var(--type-card-lg);
+  font-size: calc(var(--type-card-lg) + 2pt);
   font-weight: var(--weight-title);
   font-synthesis: none;
   line-height: 1.25;
@@ -725,8 +754,8 @@ aside:has(> .text-detail-sidebar) {
    over a sentence-shaped heading they shout. */
 .article-content h3 {
   font-family: var(--font-content-title);
-  /* Midpoint of ## (--type-card-lg) and #### (--type-prose). */
-  font-size: calc((var(--type-card-lg) + var(--type-prose)) / 2);
+  /* Midpoint of ## (--type-card-lg) and #### (--type-prose), plus 1pt. */
+  font-size: calc((var(--type-card-lg) + var(--type-prose)) / 2 + 1pt);
   font-weight: var(--weight-title);
   font-synthesis: none;
   letter-spacing: normal;
@@ -1107,6 +1136,29 @@ nav.text-page-nav:not(:has(a)) {
 /* ══ Column rhythm at the breakpoints ══ */
 @media (max-width: 767px) {
 
+  /* The listing shell's pt-10 is 2.5rem. On a phone detail the title sits
+     closer to the nav. Listings keep pt-10. */
+  main:has(#articles-detail:not(.hidden),
+      #blog-detail:not(.hidden),
+      #projects-detail:not(.hidden),
+      #cv-detail:not(.hidden)) {
+    padding-top: var(--space-xl);
+  }
+
+  .grid.text-detail-grid {
+    gap: var(--space-md);
+  }
+
+  /* The reading column used to add its own top margin on top of this gap,
+     so the two plates sat 3.5rem apart. The gap alone is the separation. */
+  .text-page-main:is([data-dynamic-article-detail],
+      [data-dynamic-post-detail],
+      [data-dynamic-project-detail],
+      [data-dynamic-product-detail],
+      [data-dynamic-portfolio-detail]) {
+    margin-top: 0;
+  }
+
   .text-page-main,
   .text-reading-column,
   .article-content {
@@ -1120,6 +1172,23 @@ nav.text-page-nav:not(:has(a)) {
     padding-right: var(--space-md);
   }
 
+  /* One token tighter between the kicker, title, thesis, and the meta
+     block. Desktop keeps the panel's --space-lg / --space-md rhythm: the
+     dossier is a narrow column beside the reading measure, and the same
+     cut presses the thesis against the title. */
+  .text-detail-sidebar .article-sidebar-heading {
+    padding-bottom: var(--space-md);
+  }
+
+  .text-detail-sidebar .article-sidebar-heading .ledger-chip-row {
+    margin-bottom: var(--space-xs);
+  }
+
+  .text-detail-sidebar .article-sidebar-description,
+  .text-detail-sidebar .article-sidebar-thumbnail {
+    margin-top: var(--space-sm);
+  }
+
   /* A four-column benchmark table wanted 468px inside a 355px column at 390px
      and pushed the whole document sideways — every page on the site got a
      horizontal scrollbar because of one article. The ledger cell padding is

data/assets/css/ledger/home.css

@@ -372,8 +372,8 @@
    Beside the copy on a wide page the plate is portrait (3:4): its height
    matches the left column and the width is W = 3/4 × H. On a phone it stays
    3:4. A wider box would cover-crop that portrait a second time. When
-   hero_landscape is set, the phone plate is 16:9 and the picture source is
-   that file. */
+   hero_landscape is set, or a portrait entry has its own landscape, the
+   phone plate is 16:9 and the chosen 16:9 file is shown whole. */
 .home-hero-plate {
   position: relative;
   z-index: 1;
@@ -472,8 +472,10 @@ html[data-theme="light"] .home-hero-plate {
   opacity: 1;
 }
 
-/* 16:9 file in a 16:9 plate. contain shows the whole frame. The image is
-   visible without waiting for the portrait runtime, so it can be the LCP. */
+/* 16:9 file in a 16:9 plate. contain shows the whole frame. The image stays
+   hidden until the chosen file has loaded, so a fallback source does not
+   flash before a pool landscape replaces it. The plate is already 16:9, so
+   the wait does not move the layout. transition none so the paint is not a fade. */
 @media (max-width: 767px) {
   .home-hero-plate--landscape {
     aspect-ratio: 16 / 9;
@@ -482,9 +484,13 @@ html[data-theme="light"] .home-hero-plate {
   .home-hero-plate--landscape img {
     object-fit: contain;
     object-position: center center;
-    opacity: 1;
+    opacity: 0;
     transition: none;
   }
+
+  .home-hero-plate--landscape img.is-shown {
+    opacity: 1;
+  }
 }
 
 .home-hero-plate:hover img {

data/assets/css/ledger/projects.css

@@ -539,6 +539,30 @@
    which start at 768px. A project holds the split back to 1024px for the
    reason recorded in the layout: at tablet width the dossier is narrow enough
    to break a repository slug across three lines mid-word. */
+@media (max-width: 767px) {
+  .projects-page .projects-hero-body {
+    padding: var(--space-lg);
+  }
+
+  .projects-page .projects-hero-title {
+    margin-top: var(--space-xs);
+  }
+
+  .projects-page .projects-hero-standfirst {
+    margin-top: var(--space-sm);
+  }
+}
+
+@media (max-width: 1023px) {
+  .projects-page .projects-hero {
+    margin-bottom: var(--space-xl);
+  }
+
+  .projects-page .grid.text-detail-grid {
+    gap: var(--space-md);
+  }
+}
+
 @media (min-width: 768px) and (max-width: 1023px) {
   .projects-page .grid.text-detail-grid {
     grid-template-columns: minmax(0, 1fr);

data/lib/pandorga/commands/new.rb

@@ -24,7 +24,7 @@ module Pandorga
 
         gem "pandorga", "~> 1.3"
         # Local checkout: gem "pandorga", path: "../pandorga"
-        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.9.0"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.10.0"
         gem "csv"
         gem "base64"
       RUBY

data/lib/pandorga/registry/schema.yml

@@ -51,7 +51,7 @@ home:
       notes: Include path for hero decoration (default `page/hero-default.html`)
     hero_landscape:
       type: string
-      notes: Optional URL of a 16:9 image used at or below 767px. Home front matter `hero_landscape` overrides this key. Omitted, the phone plate stays 3:4
+      notes: Optional URL of a 16:9 image. At or below 767px it is used only when no `pages/home/portraits.json` entry has its own `landscape` URL. Home front matter `hero_landscape` overrides this key. Omitted, and with no entry landscape, the phone plate stays 3:4
 
 fonts:
   title: "`pandorga.fonts`"

data/lib/pandorga/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Pandorga
-  VERSION = "1.9.0"
+  VERSION = "1.10.0"
 end

data/scripts/content/hero_portraits.rb

@@ -6,8 +6,9 @@
 # Optional width variants live under variants/ so they are not extra draws.
 # Variants should be 3:4 portrait fills (not landscape width-only resizes):
 # the plate is object-fit cover at 3:4, including on a phone, so a 480×270
-# landscape candidate is too short and looks soft. A separate 16:9 file for
-# narrow viewports is pandorga.home.hero_landscape, not a pool variant.
+# landscape candidate is too short and looks soft. A 16:9 file for a narrow
+# viewport is the optional `landscape` field on a portraits.json entry.
+# pandorga.home.hero_landscape is only the fallback when no entry has one.
 
 require "pathname"
 

data/scripts/test/test-hero-portraits.mjs

@@ -30,10 +30,10 @@ if (!slice.includes('function pickHeroPortrait')) {
 }
 
 const api = new Function(
-  `${slice}\nreturn { heroPortraitEntries, pickHeroPortrait };`
+  `${slice}\nreturn { heroPortraitEntries, heroLandscapeEntries, pickHeroPortrait };`
 )();
 
-const { heroPortraitEntries, pickHeroPortrait } = api;
+const { heroPortraitEntries, heroLandscapeEntries, pickHeroPortrait } = api;
 
 let failed = 0;
 
@@ -81,6 +81,31 @@ same(
   'normalised rows'
 );
 
+same(
+  heroPortraitEntries([
+    { src: '/media/images/hero/a.jpg', landscape: '  /media/images/hero/a-16x9.jpg  ' },
+    { src: '/media/images/hero/b.jpg', landscape: '' },
+    { src: '/media/images/hero/c.jpg', landscape: '   ' },
+    { src: '/media/images/hero/d.jpg', landscape: 4 },
+  ]),
+  [
+    { src: '/media/images/hero/a.jpg', alt: '', landscape: '/media/images/hero/a-16x9.jpg' },
+    { src: '/media/images/hero/b.jpg', alt: '' },
+    { src: '/media/images/hero/c.jpg', alt: '' },
+    { src: '/media/images/hero/d.jpg', alt: '' },
+  ],
+  'optional landscape'
+);
+same(
+  heroLandscapeEntries([
+    { src: '/media/images/hero/a.jpg', alt: '', landscape: '/media/images/hero/a-16x9.jpg' },
+    { src: '/media/images/hero/b.jpg', alt: '' },
+  ]),
+  [{ src: '/media/images/hero/a.jpg', alt: '', landscape: '/media/images/hero/a-16x9.jpg' }],
+  'landscape pool'
+);
+same(heroLandscapeEntries([]), [], 'empty landscape pool');
+
 // AC-HERO-06
 const two = [
   { src: '/media/images/hero/a.JPG', alt: '' },

data/scripts/test/test-hero-portraits.rb

@@ -135,8 +135,11 @@ landscape_plate = home_css[/@media \(max-width: 767px\) \{\s*\.home-hero-plate--
 check!(landscape_plate&.include?("aspect-ratio: 16 / 9"),
        "a landscape plate is 16:9 on a phone, got #{landscape_plate.inspect}")
 landscape_img = home_css[/\.home-hero-plate--landscape img \{[^}]*\}/m]
-check!(landscape_img&.include?("object-fit: contain") && landscape_img.include?("opacity: 1"),
-       "the 16:9 file is shown whole and can paint without the portrait fade, got #{landscape_img.inspect}")
+check!(landscape_img&.include?("object-fit: contain") && landscape_img.include?("opacity: 0"),
+       "the 16:9 plate stays empty until the chosen file loads, got #{landscape_img.inspect}")
+landscape_shown = home_css[/\.home-hero-plate--landscape img\.is-shown \{[^}]*\}/m]
+check!(landscape_shown&.include?("opacity: 1"),
+       "the chosen 16:9 file paints in the fixed plate, got #{landscape_shown.inspect}")
 
 runtime = RUNTIME.read
 start = runtime.index("function heroPortraitEntries")
@@ -158,8 +161,11 @@ check!(onload && onload.index("applyHeroPortraitSources") && onload.index("img.s
        "srcset must be applied before src so the full file is not the first request")
 check!(body.include?("probe.fetchPriority = 'high'"),
        "the portrait probe must use fetchPriority high")
-check!(body.include?("heroLandscapeActive") && body.include?("data-hero-landscape"),
-       "a narrow viewport with hero_landscape must not swap in a portrait")
+check!(body.include?("heroLandscapeEntries") && body.include?("paintNarrowHero") &&
+         body.include?("entry.landscape"),
+       "a narrow viewport draws from entries that carry a landscape URL")
+check!(body.include?("showConfiguredLandscape") && body.include?("data-hero-landscape"),
+       "hero_landscape is the fallback when no entry has a landscape")
 check!(runtime.include?("hydrateHeroPortrait();"),
        "hydratePageFragments must draw the plate before the later fragment chain")
 plate_call = runtime.index("function hydratePageFragments")

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pandorga
 version: !ruby/object:Gem::Version
-  version: 1.9.0
+  version: 1.10.0
 platform: ruby
 authors:
 - The Pandorga contributors