From 93ef63110f70f747a840f355d4cea6a78289d0cd Mon Sep 17 00:00:00 2001
From: zzstoatzz <thrast36@gmail.com>
Date: Sun, 20 Sep 2026 02:21:10 -0500
Subject: [PATCH] site: extend glass beyond viewport and blend browser edges

---
 deploy/site/ambient.js     |  8 ++++++++
 deploy/site/index.html     | 26 ++++++++++++++------------
 tests/homepage-layout.html |  8 ++++++++
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/deploy/site/ambient.js b/deploy/site/ambient.js
index e4f6613..e5ce6f0 100644
--- a/deploy/site/ambient.js
+++ b/deploy/site/ambient.js
@@ -131,6 +131,14 @@
     const t = reduced.matches ? 1 : progress(current, now);
     const surface = texture();
     context.clearRect(0, 0, width, height);
+    context.fillStyle = '#111f2a';
+    context.fillRect(0, 0, width, height);
+    const water = context.createLinearGradient(0, height, width, 0);
+    water.addColorStop(0, 'rgba(30,65,64,.32)');
+    water.addColorStop(.48, 'rgba(44,56,80,.28)');
+    water.addColorStop(1, 'rgba(62,72,86,.32)');
+    context.fillStyle = water;
+    context.fillRect(0, 0, width, height);
     for (const shard of current.shards) {
       const points = shard.points.map(([x, y]) => [x * width, y * height]);
       const light = lightAt(shard, t);
diff --git a/deploy/site/index.html b/deploy/site/index.html
index 6671193..2b6fd40 100644
--- a/deploy/site/index.html
+++ b/deploy/site/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>stream</title>
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-<meta name="theme-color" content="#050607">
+<meta name="theme-color" content="#1b2b38">
 {{$s := httpInclude "/status"}}{{$seq := regexFind "[0-9,]+" (regexFind "upstream seq[^\n]+" $s)}}{{$segs := regexFind "[0-9,]+" (regexFind "sealed segs[^\n]+" $s)}}{{$desc := "jetstream v2 firehose + full-network atproto archive"}}{{if $seq}}{{$desc = printf "%s · network seq %s · %s sealed segments" $desc $seq $segs}}{{end}}
 <meta name="description" content="{{$desc}}">
 <meta property="og:title" content="stream">
@@ -16,19 +16,20 @@
 <meta name="twitter:title" content="stream">
 <meta name="twitter:description" content="{{$desc}}">
 <style>
-:root{--bg:#050607;--ink:#b6c2c9;--dim:#7d8992;--faint:#39424a;--hot:#e2ebf0;--water:#6f9cb0}
+:root{--bg:#1b2b38;--ink:#b6c2c9;--dim:#8d9ba5;--faint:#39424a;--hot:#e2ebf0;--water:#84afbd}
 *{margin:0;padding:0;box-sizing:border-box}
 html,body{background:var(--bg);color:var(--ink);font:14px/1.65 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
-body{isolation:isolate;min-height:100vh;background:linear-gradient(155deg,#091214,#080d12 55%,#0c100e)}
+html{overscroll-behavior-y:none}
+body{isolation:isolate;min-height:100svh;background:transparent}
 a{color:inherit;text-decoration:none}
-.wrap{max-width:78ch;margin:0 auto;padding:0 2ch;display:flex;flex-direction:column;min-height:100vh}
-header{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.7rem 0 1.9rem}
+.wrap{max-width:78ch;margin:0 auto;padding:0 2ch;display:flex;flex-direction:column;min-height:100svh}
+header{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:calc(1.7rem + env(safe-area-inset-top)) 0 1.9rem}
 .brand{letter-spacing:.12em;font-size:.9rem;color:var(--hot)}
 a.brand:hover{color:var(--water)}
 .livedot{font-size:.74rem;color:var(--dim)}
 .livedot b{color:var(--water);font-weight:400}
 main{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.8rem}
-footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem 3ch;padding:1.8rem 0 1.5rem;
+footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem 3ch;padding:1.8rem 0 calc(1.5rem + env(safe-area-inset-bottom));
   color:var(--dim);font-size:.76rem;font-variant-numeric:tabular-nums}
 footer a{color:var(--dim);border-bottom:1px dotted var(--faint);white-space:nowrap;display:inline-flex;align-items:center}
 footer a:hover{color:var(--hot);border-bottom-color:var(--water)}
@@ -51,12 +52,13 @@ footer a:hover{color:var(--hot);border-bottom-color:var(--water)}
 @media (max-width:640px){#river{font-size:11px}.wrap{padding:0 1.5ch}
   footer{gap:.45rem 2ch}#stats{flex-basis:100%;text-align:center}}
 footer .icon{width:11px;height:11px;vertical-align:-1px;margin-right:.6ch}
-#depth{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
+#atmosphere{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:var(--bg)}
+#depth{position:absolute;left:-12vw;top:-20lvh;width:124vw;height:140lvh}
 .wrap{position:relative}
 </style>
 </head>
 <body>
-<canvas id="depth" data-current aria-hidden="true"></canvas>
+<div id="atmosphere" aria-hidden="true"><canvas id="depth" data-current></canvas></div>
 <div class="wrap">
 <header>
   <a class="brand" href="/">~&nbsp;&nbsp;s t r e a m&nbsp;&nbsp;~</a>
@@ -81,15 +83,15 @@ footer .icon{width:11px;height:11px;vertical-align:-1px;margin-right:.6ch}
   <a href="https://tangled.org/zat.dev/stream">source</a>
 </footer>
 </div>
-<script src="/ambient.js?v=grain-1"></script>
+<script src="/ambient.js?v=depth-1"></script>
 <script>
 const $ = (id) => document.getElementById(id);
 const fittedLines = document.querySelectorAll('.ep .p, .ep .d, .tag');
 function fitLines(){
   for (const line of fittedLines) {
     line.style.fontSize = '';
-    const size = parseFloat(getComputedStyle(line).fontSize);
-    if (line.scrollWidth > line.clientWidth) {
+    for (let attempt = 0; attempt < 3 && line.scrollWidth > line.clientWidth; attempt++) {
+      const size = parseFloat(getComputedStyle(line).fontSize);
       line.style.fontSize = `${size * line.clientWidth / line.scrollWidth * .99}px`;
     }
   }
diff --git a/tests/homepage-layout.html b/tests/homepage-layout.html
index a7b8bf9..f5e89f3 100644
--- a/tests/homepage-layout.html
+++ b/tests/homepage-layout.html
@@ -39,6 +39,14 @@ async function check(width) {
       }
       win.scrollTo(1000, 0);
       if (win.scrollX !== 0) throw new Error(`horizontal scrolling reached ${win.scrollX}`);
+      win.scrollTo(0, doc.documentElement.scrollHeight);
+      const atmosphere = doc.getElementById('atmosphere').getBoundingClientRect();
+      const glass = doc.getElementById('depth').getBoundingClientRect();
+      if (atmosphere.top !== 0 || atmosphere.bottom < win.innerHeight) throw new Error('background does not cover scrolled viewport');
+      if (glass.top >= 0 || glass.bottom <= win.innerHeight || glass.left >= 0 || glass.right <= win.innerWidth) {
+        throw new Error('glass ends at a viewport edge');
+      }
+      win.scrollTo(0, 0);
       await new Promise(resolve => setTimeout(resolve, 1000));
     }
     return `${width}px: PASS`;
-- 
2.51.2