Center all bank details on narrow mobile screens
showcase/deploy Live at https://showcase.andrefiedler.de/2608_BuB/

This commit is contained in:
André Fiedler
2026-09-07 19:08:27 +02:00
parent 5647b4aba7
commit f8dc1a858a
4 changed files with 8 additions and 4 deletions
+5 -2
View File
@@ -426,10 +426,13 @@ address {
.bank { .bank {
padding-block-start: 0; padding-block-start: 0;
text-align: center;
} }
.bank h2 { .account-details > div {
text-align: center; grid-template-columns: max-content max-content;
justify-content: center;
column-gap: 0.4em;
} }
.paypal { .paypal {
+1 -1
View File
@@ -4,7 +4,7 @@ The supplied 1200 × 900 PDF and its IDML source define the desktop composition.
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. 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 Kontodaten heading is centered above the bank details. 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.
## Preview and deployment ## Preview and deployment
+1
View File
@@ -43,3 +43,4 @@ Mobile shadow and heading follow-up on 2026-09-07:
- Added each strip's shadow to the separate mobile tape SVG. At 390 px, initial screenshot differences are confined to the tape and shadow area (the top 146 px); content positions are unchanged. The 1200 px desktop screenshot remains pixel-identical. - Added each strip's shadow to the separate mobile tape SVG. At 390 px, initial screenshot differences are confined to the tape and shadow area (the top 146 px); content positions are unchanged. The 1200 px desktop screenshot remains pixel-identical.
- At 390 px, the Kontodaten heading's text center is 194.99 px against the viewport center of 195 px. Desktop keeps its original alignment. No horizontal overflow is present. - At 390 px, the Kontodaten heading's text center is 194.99 px against the viewport center of 195 px. Desktop keeps its original alignment. No horizontal overflow is present.
- The complete bank section is now centered on narrow mobile layouts: account holder, bank name, and each IBAN/BIC label-value row. Text centers match the viewport center at 320, 390 and 600 px, with no horizontal overflow. Checks at 601 and 1200 px retain the original alignment.
+1 -1
View File
@@ -35,7 +35,7 @@
<link rel="manifest" href="./site.webmanifest"> <link rel="manifest" href="./site.webmanifest">
<link rel="preload" href="./assets/fonts/roboto-italic-latin.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="./assets/fonts/roboto-italic-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="./assets/fonts/roboto-latin.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="./assets/fonts/roboto-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="./assets/styles.css?v=216cfd1888ba"> <link rel="stylesheet" href="./assets/styles.css?v=608a0e84af62">
<script type="module" src="./assets/app.mjs"></script> <script type="module" src="./assets/app.mjs"></script>
<script type="application/ld+json"> <script type="application/ld+json">
{ {