From 932aee440442cd70b7f9b879d4331f62d2c2e62a Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Wed, 26 Aug 2026 16:20:58 +0000
Subject: [PATCH] Fixes to eyes banner positioning.

---
 pagerite/themes/eyes/banner.css  |  9 +++++----
 pagerite/themes/eyes/banner.html | 15 ++++++++++++---
 pagerite/themes/summer/theme.css |  4 ++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/pagerite/themes/eyes/banner.css b/pagerite/themes/eyes/banner.css
index 6b35d08..fa45a37 100644
--- a/pagerite/themes/eyes/banner.css
+++ b/pagerite/themes/eyes/banner.css
@@ -4,9 +4,10 @@
    against the 13rem layout box and extends flat grass into any overflow
    a theme adds below (summer's cross-fade strip). */
 
-/* Opt out of the base parallax (scale overscan + --pry drift): scaling
-   from the bottom edge would crop the top of the composed scene — pushing
-   the critter out of view — and this canvas animates on its own. */
-#page-banner>#eyes {
+/* Opt out of the base parallax (scale overscan + --pry drift): it lands on
+   the design wrapper the backend puts around banner.html, and scaling from
+   the bottom edge would crop the top of the composed scene — pushing the
+   critter out of view — while this canvas animates on its own. */
+#page-banner>[data-design="eyes"] {
   transform: none;
 }
diff --git a/pagerite/themes/eyes/banner.html b/pagerite/themes/eyes/banner.html
index cca15a4..de8c0f8 100644
--- a/pagerite/themes/eyes/banner.html
+++ b/pagerite/themes/eyes/banner.html
@@ -2,7 +2,13 @@
 <style>
   #eyes {
     width: 100%;
-    height: 100%;
+    /* 13rem — the banner's layout height, correct from the first frame,
+       before any external stylesheet has sized #page-banner. Themes that
+       extend the banner past the layout box (summer's overflow fade) raise
+       --eyes-h to 100% so the canvas follows the taller stage; the script
+       still composes the scene against the 13rem box and only extends the
+       meadow, so the scene itself never shifts. */
+    height: var(--eyes-h, 13rem);
     display: block;
   }
 </style>
@@ -326,7 +332,10 @@
     ctx.moveTo(0, h)
     ctx.lineTo(0, ridgeY(0, w, h))
 
-    for (let x = 0; x <= w; x += 8)
+    // Sample one step PAST the right edge (x <= w + 8): stopping at w would
+    // leave the path closing with a visible vertical drop at the edge
+    // whenever the width isn't a multiple of the 8px step.
+    for (let x = 0; x <= w + 8; x += 8)
       ctx.lineTo(x, ridgeY(x, w, h))
 
     ctx.lineTo(w, h)
@@ -338,7 +347,7 @@
     ctx.moveTo(0, h)
     ctx.lineTo(0, ridgeY(0, w, h) + 10)
 
-    for (let x = 0; x <= w; x += 8)
+    for (let x = 0; x <= w + 8; x += 8)
       ctx.lineTo(x, ridgeY(x, w, h) + 10)
 
     ctx.lineTo(w, h)
diff --git a/pagerite/themes/summer/theme.css b/pagerite/themes/summer/theme.css
index 107bbf7..b0ac255 100644
--- a/pagerite/themes/summer/theme.css
+++ b/pagerite/themes/summer/theme.css
@@ -79,6 +79,10 @@ body {
      clicks. */
   pointer-events: none;
   mask-image: linear-gradient(180deg, #000 calc(100% - 6rem), transparent);
+  /* Canvas banner designs (eyes) default to the 13rem layout height; here
+     they must fill the taller overflow stage so their meadow extension
+     reaches through the fade strip. */
+  --eyes-h: 100%;
 }
 
 /* The mask above replaced the SVG's flat-color bottom fade (meadowFade) —