From e1455783c87a63979d14577c8486b2835bf6effa Mon Sep 17 00:00:00 2001
From: Hans Fast <hans@hansfast.net>
Date: Wed, 25 Mar 2026 10:13:15 +0100
Subject: [PATCH] css,ori-templates: margin-inline on body > * instead of body
 to allow figures to grow

---
 css/style.css                        | 130 ++++++++++++++++-----------
 ori-templates/page.ori               |   2 +-
 ori-templates/pageSummaries.ori.html |   2 +-
 3 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/css/style.css b/css/style.css
index 81ee75d..90ae0a8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,68 +1,90 @@
-  :root {
-    /* size variables */
-    /* more pronounced, perfect fifth on narrow screens */
-    /* @link https://utopia.fyi/type/calculator?c=360,16,1.5,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+:root {
+  /* size variables */
+  /* more pronounced, perfect fifth on narrow screens */
+  /* @link https://utopia.fyi/type/calculator?c=360,16,1.5,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
 
-    --step--2: clamp(0.4444rem, 0.299rem + 0.6465vw, 0.8rem);
-    --step--1: clamp(0.6667rem, 0.5303rem + 0.6061vw, 1rem);
-    --step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
-    --step-1: clamp(1.5rem, 1.4744rem + 0.1136vw, 1.5625rem);
-    --step-2: clamp(1.9531rem, 2.3714rem + -0.5398vw, 2.25rem);
-    --step-3: clamp(2.4414rem, 3.7569rem + -1.6974vw, 3.375rem);
-    --step-4: clamp(3.0518rem, 5.8851rem + -3.6559vw, 5.0625rem);
-    --step-5: clamp(3.8147rem, 9.1397rem + -6.871vw, 7.5938rem);
+  --step--2: clamp(0.4444rem, 0.299rem + 0.6465vw, 0.8rem);
+  --step--1: clamp(0.6667rem, 0.5303rem + 0.6061vw, 1rem);
+  --step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
+  --step-1: clamp(1.5rem, 1.4744rem + 0.1136vw, 1.5625rem);
+  --step-2: clamp(1.9531rem, 2.3714rem + -0.5398vw, 2.25rem);
+  --step-3: clamp(2.4414rem, 3.7569rem + -1.6974vw, 3.375rem);
+  --step-4: clamp(3.0518rem, 5.8851rem + -3.6559vw, 5.0625rem);
+  --step-5: clamp(3.8147rem, 9.1397rem + -6.871vw, 7.5938rem);
 
-    /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
 
-    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
-    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
-    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
-    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
-    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
-    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
-    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
-    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
-    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
+  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
+  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
+  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
+  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
+  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
+  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
+  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
 
-    /* One-up pairs */
-    --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
-    --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
-    --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
-    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
-    --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
-    --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
-    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
-    --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
+  /* One-up pairs */
+  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
+  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
+  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
+  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
+  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
+  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
+  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
+  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
 
-    /* Custom pairs */
-    --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
+  /* Custom pairs */
+  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
 
 
-    /*COLORS*/
-    --blue: #d7f0e1;
-    --darkblue: #2c6a88;
-    --oc-gray-3: #dee2e6;
-    --oc-gray-5: #adb5bd;
-    --oc-gray-6: #868e96;
-    --oc-gray-7: #495057;
-    --oc-gray-8: #343a40;
-    --oc-cyan-6: #15aabf;
-    --oc-cyan-9: #0b7285;
-    --oc-blue-1: #d0ebff;
-    --oc-blue-3: #74c0fc;
-    --oc-blue-4: #4dabf7;
-    --oc-blue-7: #1c7ed6;
-    --oc-blue-9: #1864ab;
-    --oc-grape-9: #862e9c;
-    --oc-violet-4: #9775fa;
-    --oc-violet-9: #5f3dc4;
+  /*COLORS*/
+  --blue: #d7f0e1;
+  --darkblue: #2c6a88;
+  --oc-gray-3: #dee2e6;
+  --oc-gray-5: #adb5bd;
+  --oc-gray-6: #868e96;
+  --oc-gray-7: #495057;
+  --oc-gray-8: #343a40;
+  --oc-cyan-6: #15aabf;
+  --oc-cyan-9: #0b7285;
+  --oc-blue-1: #d0ebff;
+  --oc-blue-3: #74c0fc;
+  --oc-blue-4: #4dabf7;
+  --oc-blue-7: #1c7ed6;
+  --oc-blue-9: #1864ab;
+  --oc-grape-9: #862e9c;
+  --oc-violet-4: #9775fa;
+  --oc-violet-9: #5f3dc4;
+
+}
 
-  }
 body {
   font-family: "sans-serif";
-  margin: 0 auto;
-  max-width: 66ch;
+  & > :not(.wider) {
+    max-width: 38rem;
+    margin-inline: auto;
+  }
+
+  & > .wider {
+    max-width: min(55rem, 100%);
+    margin-inline: auto;
+  }
 }
+
+figure img {
+  max-width: 100%;
+}
+
+figcaption {
+  margin-inline: auto;
+  width: max-content;
+}
+
+trl-group {
+  display: block;
+}
+
 @layer translations {
   body > trl-selector:first-child {display: none;} /* was adding a grid row! */
   trl-selector {
diff --git a/ori-templates/page.ori b/ori-templates/page.ori
index 6ab38e7..c02a60c 100644
--- a/ori-templates/page.ori
+++ b/ori-templates/page.ori
@@ -4,7 +4,7 @@
   title: page.title
   _body: Tree.indent`
   <h1>${page.title}</h1>
-  <span>${page.fnd.addr} ${page.fnd.tags || ''}</span>
+  <p><span>${page.fnd.addr} ${page.fnd.tags || ''}</span></p>
   ${page._body}
   <a href="/">↖index</a>
 `
diff --git a/ori-templates/pageSummaries.ori.html b/ori-templates/pageSummaries.ori.html
index 6102f79..d788f1f 100644
--- a/ori-templates/pageSummaries.ori.html
+++ b/ori-templates/pageSummaries.ori.html
@@ -3,6 +3,6 @@
 ---
 <article>
   <a href=${key}><h1>${value.title}</h1></a>
-  <span>${value.fnd.addr} ${value.fnd.tags || ''}</span>
+  <p><span>${value.fnd.addr} ${value.fnd.tags || ''}</span></p>
   ${value.summary || ""}
 </article>