bvandeusenandClaude Opus 5
57c880a623
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
45 lines
1.8 KiB
Vue
45 lines
1.8 KiB
Vue
<template>
|
|
<slot v-if="route.meta.immersive" />
|
|
<template v-else>
|
|
<TopNav />
|
|
<main class="fc-content">
|
|
<slot />
|
|
</main>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute } from 'vue-router'
|
|
import TopNav from './TopNav.vue'
|
|
|
|
const route = useRoute()
|
|
</script>
|
|
|
|
<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
|
|
old 64px padding-top was a leftover from a FIXED navbar and double-counted
|
|
that space, leaving a large empty band at the top of EVERY view (and pushing
|
|
the full-height calc(100vh - 64px) views down so they overflowed). Removed
|
|
2026-07-13. Scrolled content still slides under the sticky nav as before. */
|
|
}
|
|
</style>
|