3.8 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; 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.
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.