From 4aa95174f3a5042e05e388b8ee013cf20b77162e Mon Sep 17 00:00:00 2001 From: Jack Date: Tue, 11 Aug 2026 10:28:00 -0500 Subject: [PATCH] Feature set 172. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Darken the frame. It was a bright gilt on a dark page and read as a lamp: the frame was the first thing the eye went to, ahead of the puzzle it surrounds. Everything is now pitched below the silhouette's own contrast — the flat is darker, the reeding leans on its shadow rather than its highlight, the bevel's lit edges are about half what they were, and the rebate is deeper. The carving gains real depth rather than just losing brightness. Its lit layer is filled with a gradient instead of being split into a second and third copy of every polygon, which buys the same tonal range for a couple of hundred bytes rather than another twenty-five kilobytes of points, and gives the whole frame a consistent lit-from-the-top-left reading with the shadow gathering into the bottom right. The version stamp is bumped with it, which is now the point of having one. Co-Authored-By: Claude Opus 5 --- .../wwwroot/assets/frames/README.md | 11 ++++++++ .../wwwroot/assets/frames/kupodle-frame.svg | 2 +- src/MoogleAPI.Web/wwwroot/kupodle/index.html | 27 +++++++++++-------- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/MoogleAPI.Web/wwwroot/assets/frames/README.md b/src/MoogleAPI.Web/wwwroot/assets/frames/README.md index d3d6867..f8edf71 100644 --- a/src/MoogleAPI.Web/wwwroot/assets/frames/README.md +++ b/src/MoogleAPI.Web/wwwroot/assets/frames/README.md @@ -32,6 +32,17 @@ not from cutting. drawn once per relief layer. Beads are `` elements now and relief is two layers: 29 KB, no visible difference. +## Tone + +Pitched deliberately below the silhouette's own contrast. The first version was a bright gilt and +read as a lamp on a dark page — the frame was the first thing the eye went to, ahead of the puzzle +it surrounds. + +The lit layer is filled with a `linearGradient` rather than being split into a second and third +copy of every polygon. That buys the same tonal range across the carving for a couple of hundred +bytes instead of another twenty-five kilobytes of points, and it is what gives the frame a +lit-from-the-top-left reading. + ## Bump the ?v= stamp when you change it This file is served with a thirty-day `max-age`, so replacing it at a stable name leaves everyone diff --git a/src/MoogleAPI.Web/wwwroot/assets/frames/kupodle-frame.svg b/src/MoogleAPI.Web/wwwroot/assets/frames/kupodle-frame.svg index f2c428c..24b2850 100644 --- a/src/MoogleAPI.Web/wwwroot/assets/frames/kupodle-frame.svg +++ b/src/MoogleAPI.Web/wwwroot/assets/frames/kupodle-frame.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/MoogleAPI.Web/wwwroot/kupodle/index.html b/src/MoogleAPI.Web/wwwroot/kupodle/index.html index 7ec4240..a5c7549 100644 --- a/src/MoogleAPI.Web/wwwroot/kupodle/index.html +++ b/src/MoogleAPI.Web/wwwroot/kupodle/index.html @@ -102,7 +102,12 @@ * way, which is half the puzzle. So each pool character has a second image, black on a pale * field with nothing behind it, served by the byte from /characters/daily/silhouette. */ - /* Bronze rather than the page's green, and gilt rather than flat. + /* Dark antiqued bronze rather than the page's green, and gilt rather than flat. + * + * It was brighter to begin with and read as a lamp on a dark page — the frame was the first + * thing the eye went to, ahead of the puzzle it surrounds. Everything is now pitched below the + * silhouette's own contrast: the flat is darker, the reeding leans on its shadow rather than + * its highlight, and the bevel's lit edges are roughly half what they were. * * The wall behind this page is a photograph of framed portraits and those frames are warm, so * a green frame was the one thing on screen pretending not to be part of the picture. Warm @@ -131,15 +136,15 @@ border-radius: 4px; background: repeating-linear-gradient(58deg, - rgba(255, 226, 176, 0.15) 0 1px, - rgba(0, 0, 0, 0.13) 1px 3px), + rgba(255, 226, 176, 0.10) 0 1px, + rgba(0, 0, 0, 0.20) 1px 3px), linear-gradient(145deg, - #e6c184 0%, #b3813f 26%, #7c5527 52%, #a8763a 74%, #4d3317 100%); + #a8854a 0%, #705026 26%, #463116 52%, #624620 74%, #261a0b 100%); box-shadow: - 0 7px 18px rgba(0, 0, 0, 0.55), - inset 0 0 0 1px rgba(255, 228, 178, 0.42), - inset 0 3px 4px rgba(255, 226, 176, 0.22), - inset 0 -3px 5px rgba(0, 0, 0, 0.45); + 0 8px 20px rgba(0, 0, 0, 0.62), + inset 0 0 0 1px rgba(255, 228, 178, 0.26), + inset 0 3px 4px rgba(255, 226, 176, 0.13), + inset 0 -3px 6px rgba(0, 0, 0, 0.58); } /* The rebate — the step down from the moulding to the glass. One dark line with one light one @@ -152,8 +157,8 @@ border-radius: 2px; pointer-events: none; box-shadow: - 0 0 0 1px rgba(46, 30, 14, 0.9), - inset 0 0 0 1px rgba(255, 224, 170, 0.26); + 0 0 0 1px rgba(22, 14, 5, 0.95), + inset 0 0 0 1px rgba(255, 224, 170, 0.16); } /* The carving: a baroque gilt surround, replicating a reference frame. @@ -180,7 +185,7 @@ position: absolute; inset: -14px; pointer-events: none; - background: url('/assets/frames/kupodle-frame.svg?v=20260811b') center / 100% 100% no-repeat; + background: url('/assets/frames/kupodle-frame.svg?v=20260811c') center / 100% 100% no-repeat; } .answer-frame-inner {