feat: the full brand mark as a faint backdrop behind every page
CI / lint (push) Successful in 2s
CI / extension-version (push) Successful in 2s
Build images / sign-extension (push) Successful in 4s
Build images / build-agent (push) Successful in 5s
Build images / build-ml (push) Successful in 6s
CI / frontend-build (push) Successful in 22s
CI / backend-lint-and-test (push) Successful in 31s
Build images / build-web (push) Successful in 1m9s
Build images / smoke-web (push) Skipped
Build images / promote (push) Skipped
CI / integration (push) Successful in 2m36s
CI / lint (push) Successful in 2s
CI / extension-version (push) Successful in 2s
Build images / sign-extension (push) Successful in 4s
Build images / build-agent (push) Successful in 5s
Build images / build-ml (push) Successful in 6s
CI / frontend-build (push) Successful in 22s
CI / backend-lint-and-test (push) Successful in 31s
Build images / build-web (push) Successful in 1m9s
Build images / smoke-web (push) Skipped
Build images / promote (push) Skipped
CI / integration (push) Successful in 2m36s
The operator asked for one large version of the logo as the site background. It is pinned to the viewport behind .fc-content at about 6% strength, so it shows in the gutters and on bare page ground while cards and the nav cover it. The series reader is immersive, skips the shell, and never draws over it. It is a layered background (the page colour at 94% over logo.svg), not an overlay element with opacity. An overlay needs the content z-indexed above it, which turns every page into one stacking context under the nav's z-index 1000 and can trap an in-page overlay beneath the nav. A background changes nothing about stacking. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SHQB1YukL3VyvMK8rcbmV9
This commit is contained in:
@@ -17,6 +17,22 @@ const route = useRoute()
|
||||
|
||||
<style scoped>
|
||||
.fc-content {
|
||||
/* The full brand mark as one large, faint backdrop behind every page,
|
||||
pinned to the viewport so content scrolls over it. Opaque surfaces
|
||||
(cards, the nav) cover it; it shows in the gutters and on bare page
|
||||
ground. The series reader is immersive and skips the shell, so reading
|
||||
is never drawn over it.
|
||||
|
||||
Faded by laying the page colour over it at 94%, NOT with `opacity` on an
|
||||
overlay element: an overlay needs this element to be z-indexed above it,
|
||||
which makes all page content one stacking context under the nav and can
|
||||
trap an in-page overlay beneath it. A background changes no stacking.
|
||||
The mark is gold and parchment, close to the text colours, so it has to
|
||||
stay this faint to keep text over it readable. */
|
||||
background:
|
||||
linear-gradient(rgba(var(--v-theme-background), 0.94), rgba(var(--v-theme-background), 0.94)),
|
||||
url('/logo.svg') center / min(88vmin, 1100px) no-repeat;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
/* NO padding-top: the TopNav is position:sticky, so it already reserves its
|
||||
own space in the v-app flex column — content flows directly below it. The
|
||||
|
||||
Reference in New Issue
Block a user