amadan
chrome: the door's sky fades in and out inside the door (review)
Claude Fable 5.1: under an app's bar the sky began at full strength with a hard edge. The whole sky now lies inside the door (placed so its transparent top meets the door's edge, the door tall enough for its fade out), so neither edge cuts it. The template comment now says what an app must also do to show a sky; import grouping.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
3 files changed,
+15
−6
chrome/chrome.css+8 −2chrome/chrome.go+3 −2chrome/templates/signin.html+4 −2
CI passed — run details
CI log
=== modcache === all modules verified === vet === CGO_ENABLED=0 go vet ./... === fmt === === build === CGO_ENABLED=0 go build -buildvcs=false ./... === go-test === CGO_ENABLED=0 go test -count=1 ./... ok amadan.net/oficina/estilo.git/base 0.004s ok amadan.net/oficina/estilo.git/brand 0.003s ok amadan.net/oficina/estilo.git/busy 0.003s ok amadan.net/oficina/estilo.git/callui 0.004s ok amadan.net/oficina/estilo.git/chrome 0.192s ? amadan.net/oficina/estilo.git/cmd/oficina-notices [no test files] ok amadan.net/oficina/estilo.git/credits 0.006s ok amadan.net/oficina/estilo.git/credits/catalog 0.006s ok amadan.net/oficina/estilo.git/homeconnect 0.006s ok amadan.net/oficina/estilo.git/internal/lint 0.005s ? amadan.net/oficina/estilo.git/internal/tokencheck [no test files] ok amadan.net/oficina/estilo.git/menu 0.010s ok amadan.net/oficina/estilo.git/savestatus 0.084s ok amadan.net/oficina/estilo.git/sky 0.026s ok amadan.net/oficina/estilo.git/theme 0.005s
diff --git a/chrome/chrome.css b/chrome/chrome.css| index 63d7b3f..1ff46e3 100644 |
| --- a/chrome/chrome.css |
| +++ b/chrome/chrome.css |
| @@ -213,8 +213,14 @@ |
| box-sizing: border-box; |
| margin-inline: calc(50% - 50vw); |
| padding: max(40px, 9vh) var(--rst-sp-4) var(--rst-sp-6); |
| - min-block-size: 70vh; |
| - --estilo-sky-top: -140px; |
| + min-block-size: 680px; |
| + /* The whole sky lies inside the door, fading in and out, so the door's |
| + edges never cut it: under an app's bar there is no page top to hide |
| + an edge behind, as there is on Home. A sky's layers overhang its box |
| + by 12% above and below (sky.css), and fade in over their first 22% |
| + and out from 58% to 92% — so a 560px sky placed 67px down starts |
| + transparent at the door's top and has faded out by 640px. */ |
| + --estilo-sky-top: 67px; |
| --estilo-sky-height: 560px; |
| } |
| [estilo-signin] { |
diff --git a/chrome/chrome.go b/chrome/chrome.go| index 181de37..895441e 100644 |
| --- a/chrome/chrome.go |
| +++ b/chrome/chrome.go |
| @@ -20,7 +20,6 @@ |
| package chrome |
| import ( |
| - "amadan.net/oficina/estilo.git/sky" |
| "embed" |
| "net/http" |
| "strings" |
| @@ -28,6 +27,7 @@ import ( |
| "unicode" |
| "amadan.net/oficina/estilo.git/menu" |
| + "amadan.net/oficina/estilo.git/sky" |
| "github.com/carlosframework/rastrillo/sessions" |
| ) |
| @@ -200,7 +200,8 @@ type SignIn struct { |
| Icon, Heading, Lede string |
| // App is the product's name, beside its mark at the head of the card |
| // ("Calendar"); Sky is the sky behind it, sky.For(<the instance's |
| - // host>). Both optional. |
| + // host>). Both optional. A Sky needs sky.css linked, sky.Handler |
| + // mounted at sky.Prefix and img-src data: allowed (the template). |
| App string |
| Sky sky.View |
| Error string |
diff --git a/chrome/templates/signin.html b/chrome/templates/signin.html| index 053c444..b845801 100644 |
| --- a/chrome/templates/signin.html |
| +++ b/chrome/templates/signin.html |
| @@ -11,8 +11,10 @@ |
| the suite's sky behind (sky.View in .Sky; none if it is empty) and the |
| app's own mark and name at the card's head (.App; the mark alone if |
| empty). The sky's markup is the same as the sky package's estilo-sky |
| - template (chrome_test checks), repeated here so an app that parses |
| - chrome's templates needs nothing else. */}} |
| + template (chrome_test checks), repeated here so an app need not parse |
| + the sky package's templates. An app that passes a Sky must also link |
| + sky.css, mount sky.Handler at sky.Prefix, and allow img-src data: (the |
| + placeholder is inline) — without sky.css the layers flow in the page. */}} |
| {{define "estilo-door-open"}}<div estilo-door estilo-sky-host> |
| {{- with .Sky.Layers}} |
| <div estilo-sky aria-hidden="true"> |