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

Cap legal dialog size and match mobile navigation colors
showcase/deploy Live at https://showcase.andrefiedler.de/2608_BuB/
Details

Browse Source
This commit is contained in:
André Fiedler
2026-09-10 11:50:18 +02:00
parent 11c51f7975
commit b470cd3302
5 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/implementation.md
+3 -1
View File
@@ -10,7 +10,9 @@ At 1024 px and below, both decorative images are ordinary `body` backgrounds. Th
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 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 up to a 1200 px panel width and 24 px body text; 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.
When a dialog opens, the root canvas and browser `theme-color` switch to the dark burgundy surrounding the panel, then revert when it closes. The solid surround color matches the existing translucent backdrop composited over the page burgundy. This covers browser UI using the theme hint and mobile navigation areas using the canvas background. The native-dialog enhancement disables the CSS `:target` fallback: browsers can retain `:target` after `history.replaceState` removes a fragment, so it must not keep a closed dialog or its scroll lock active. Without JavaScript, fragment navigation still controls the fallback. Browser behavior references: [HTML theme-color updates](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color) and [Chrome on Android edge-to-edge](https://developer.chrome.com/docs/css-ui/edge-to-edge).
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.