39 lines
6.3 KiB
Markdown
39 lines
6.3 KiB
Markdown
# 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 footer separator spans the main text column, and its links scale with the contact and bank text with a 16 px minimum. Dialog width, type, spacing and controls scale with the desktop design; on mobile, body text is 18 px and the panel keeps a 16 px viewport margin. A uniform solid white border surrounds each panel. The height is limited to the viewport, leaving the close control visible above the scrolling text.
|
||
|
||
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.
|
||
|
||
```sh
|
||
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](https://github.com/googlefonts/roboto-3-classic/releases/tag/v3.015), fixes the width axis to 100, keeps weights 400–700, and subsets Latin and punctuation. The accompanying [OFL license](../assets/fonts/OFL.txt) 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.
|