From a44cd4bc498599228775c310899e7d26b9900886 Mon Sep 17 00:00:00 2001 From: superposition Date: Thu, 10 Sep 2026 22:44:53 -0400 Subject: [PATCH] Stop the band from clipping its own caption The aspect-ratio box sat on the figure, so the 87px figcaption - including the Paper Shaders attribution - was hidden by overflow. Move the ratio onto the canvas: figure 309px, caption 88px fully visible. --- docs/assets/notebook.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/assets/notebook.css b/docs/assets/notebook.css index c36696a..2c2f01a 100644 --- a/docs/assets/notebook.css +++ b/docs/assets/notebook.css @@ -162,14 +162,13 @@ mjx-container[display] { overflow-x: auto; overflow-y: hidden; padding-block: 8p border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; - aspect-ratio: 740 / 220; background: radial-gradient(120% 160% at 18% 28%, rgba(145, 219, 186, .22), transparent 62%), radial-gradient(110% 150% at 78% 62%, rgba(201, 178, 255, .20), transparent 60%), radial-gradient(90% 130% at 52% 92%, rgba(147, 202, 255, .16), transparent 58%), var(--paper); } -.mesh-band canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; } +.mesh-band canvas { display: block; width: 100%; height: auto; aspect-ratio: 740 / 220; opacity: 0; transition: opacity .7s ease; } .mesh-band[data-ready] canvas { opacity: 1; } .mesh-band noscript img { display: block; width: 100%; height: auto; } .mesh-band figcaption { padding: 10px 14px 12px; border-top: 1px solid var(--rule); background: var(--surface); font-size: 12px; line-height: 1.7; color: var(--muted); } @@ -177,7 +176,6 @@ mjx-container[display] { overflow-x: auto; overflow-y: hidden; padding-block: 8p .mesh-band-credit { display: block; margin-top: 6px; font: 11px/1.6 var(--mono); color: #6f7b8f; } .mesh-band-credit a { color: #6f7b8f; } .mesh-band-credit a:hover { color: var(--muted); } -@media (max-width: 520px) { .mesh-band { aspect-ratio: 320 / 200; } } .profile-scale { color: var(--ink); } .profile-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 11px; } .profile-links a { text-decoration: none; }