5.9 KiB
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. A foreground layer masks the same original pixels to the tape outline and its soft shadow so content scrolls behind both; it does not intercept pointer events. construction-tape-mask.svg uses the original tape paths and the IDML shadow's 35% opacity, 2.7895 pt offsets and 3.945 pt blur size. Reusing the background pixels preserves uncovered artwork without applying its shadow twice. 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.
At 1024 px and below, both decorative images are ordinary body backgrounds. The tape SVG applies the original shadow settings to each strip, including their overlap. Its 270 pt view box leaves room for the shadow without moving or scaling the artwork. The desktop pseudo-elements and isolated stacking context are disabled, leaving mobile touch scrolling to the document without separate decorative layers. At 600 px and below, the whole Kontodaten section is centered, including the account holder, bank name and each complete IBAN/BIC row.
Legal content
The footer opens native dialogs for Impressum and Datenschutz. All legal HTML lives in index.html; assets/legal.mjs handles opening, closing, focus, and fragment navigation. The burgundy reading panels scroll independently while the page stays in place. The close link, Escape, backdrop click and browser Back close the popup; fragment links also expose the content without JavaScript. CSS and the legal module have content-hash URL parameters that must be refreshed when their files change.
The supplied, unchanged PDFs are retained under design/legal/. The legal content was copied directly from their imprint_html_de and privacy_html_de form fields, preserving the supplied headings, paragraphs, lists, punctuation and entities. The PDF export's table of contents, integration instructions and duplicate text rendering are not website copy. Only title attributes for dialog accessibility were added. Run python3 scripts/verify-legal-content.py with the development dependency pypdf to compare the complete embedded HTML against both original fields. It ignores only indentation, line endings and the two title attributes. Do not revise the legal wording without replacement content from the owner.
Preview and deployment
Requires Node 20.11 or newer. There are no npm dependencies and no third-party page requests.
npm run build
python3 -m http.server 8080 --directory dist --bind 127.0.0.1
scripts/build.mjs copies only explicit public files to dist/. Source PDFs, InDesign files, original TIFFs, scripts and documentation are never in the public artifact. showcase.json selects dist for the existing organization deployer. A push to showcase/2608_BuB on main deploys to https://showcase.andrefiedler.de/2608_BuB/; the showcase/deploy commit status reports completion.
Artwork and fonts
Generated web assets are committed. Recreate them only when the design changes, using scripts/prepare-assets.py with PyMuPDF, Pillow, fontTools (WOFF support) and Poppler's pdftoppm. Its PDF object/group assertions deliberately target this exact supplied design. The script downloads the matching Roboto 3.015 release, fixes the width axis to 100, keeps weights 400–700, and subsets Latin and punctuation. The accompanying OFL license is bundled. The commercial handwritten font is not distributed; its original supplied heading is retained as outlined artwork.
Favicon SVG, ICO, Apple touch icon and manifest icons are derived from the original book-and-cup symbol. The PayPal QR code is extracted from the supplied PDF and reduced to a 64-color PNG; its encoded payload and geometry are preserved and verified by decoding. The social preview is a crop of the supplied design.
Search metadata
The document contains German title/description/author information, canonical and social metadata, a local social image, and JSON-LD for the business, website and page. Only facts present in the design are used; no opening hours, ratings or registration details are invented. The canonical and all structured URLs use the requested showcase path. Update these together with sitemap.xml, robots.txt and the manifest ID when moving to a different domain.
The single canonical page is listed in sitemap.xml. Submit https://showcase.andrefiedler.de/2608_BuB/sitemap.xml in the site's search-engine webmaster accounts when available. The local robots.txt is supplied for hosting completeness, but crawlers only use /robots.txt at the domain root. The shared host currently has no root robots or sitemap; this permits crawling and does not automatically advertise this sitemap. A host administrator can add this sitemap URL to the shared root robots file. Search indexing itself is outside the deployment workflow.