showcase/2608_BuB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep scrolling content behind the desktop band
showcase/deploy Live at https://showcase.andrefiedler.de/2608_BuB/
Details

Browse Source
This commit is contained in:
André Fiedler
2026-09-07 18:34:26 +02:00
parent f4b06f273a
commit 7d09a69268
4 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/implementation.md
+1 -1
View File
@@ -1,6 +1,6 @@
# Implementation and maintenance
The supplied 1200 × 900 PDF and its IDML source define the desktop composition. All original design files are preserved under `design/`. The photographic backdrop and construction tape are extracted together to preserve the print export's crop, tint and shadows. This background stays fixed to the viewport above 1024 px; on smaller screens the background and tape scroll with the page. The logo and Lumios Marker heading retain their original outlines as SVG artwork; all other content is semantic, selectable HTML in `index.html`.
The supplied 1200 × 900 PDF and its IDML source define the desktop composition. All original design files are preserved under `design/`. The photographic backdrop and construction tape are extracted together to preserve the print export's crop, tint and shadows. This background stays fixed to the viewport above 1024 px. A foreground layer masks the same original pixels to the tape outline so content scrolls behind the band; it does not intercept pointer events. On smaller screens the background and tape scroll with the page. The logo and Lumios Marker heading retain their original outlines as SVG artwork; all other content is semantic, selectable HTML in `index.html`.
CSS lives in `assets/styles.css`; all colors are CSS custom properties. Its link in `index.html` carries a content-hash query parameter; update that value when the CSS changes to avoid stale browser caches. Layout scales with the design above 1024 px. At smaller sizes the type becomes larger and wraps; at 600 px the bank and PayPal details stack in their original reading order. The mobile background separates the supplied tape from the photograph so that it remains above the logo while the photo fills a tall page. `assets/app.mjs` only enhances the IBAN with clipboard support and an accessible selection fallback. Contact and payment links work without JavaScript.