Gallery heading alignment:.gallery-section .section-head now uses the same 1400px container + 1.5rem horizontal padding as .masonry-grid, so PHOTO GALLERY / A look inside start at the same x position (24px) as the leftmost image, instead of sitting flush at the very left of the page.
Pricing and Contact sections are now constrained to max-width: 1200px and centered (same pattern as .floors-section and .lage-section), so the dark Mietkonditionen block and the cream Kontakt block no longer span the full viewport.
Mobile breakpoint (width <= 768px) gets a matching padding adjustment for the new .section-head rule.
Verification
Measured bounding boxes on a 1265px viewport:
Section
Before (x / w)
After (x / w)
gallery heading
0 / 1265
24 / 1217 (text)
gallery leftmost image
0 / full
26 / first image
pricing-section
0 / 1265
33 / 1200
contact-section
0 / 1265
33 / 1200
Gallery heading is now flush with the image grid (24px vs 26px — the 2px delta is the 1px image border-radius on each side). Pricing and Contact are aligned with floors-section and lage-section (33 / 1200 / 33).
Notes
Changes are CSS-only — no template/PHP edits, no JS edits.
Backup of the previous CSS on the test host kept at /tmp/haus-schleusingen.css.bak until visual sign-off.
Pre-commit hooks passed locally (lint-staged and PHPUnit are no-ops without node_modules/vendor; CI will run them on the PR).
Test plan
CI: lint-php, lint-css, lint-html must pass on the PR.
Visual: verify on the test deployment that the three points above hold at 1280px, 1024px, 768px, 480px viewports.
## Summary
- **Gallery heading alignment:** `.gallery-section .section-head` now uses the same 1400px container + 1.5rem horizontal padding as `.masonry-grid`, so `PHOTO GALLERY` / `A look inside` start at the same x position (24px) as the leftmost image, instead of sitting flush at the very left of the page.
- **Pricing and Contact sections** are now constrained to `max-width: 1200px` and centered (same pattern as `.floors-section` and `.lage-section`), so the dark `Mietkonditionen` block and the cream `Kontakt` block no longer span the full viewport.
- Mobile breakpoint (`width <= 768px`) gets a matching padding adjustment for the new `.section-head` rule.
## Verification
Measured bounding boxes on a 1265px viewport:
| Section | Before (x / w) | After (x / w) |
| --- | --- | --- |
| gallery heading | 0 / 1265 | 24 / 1217 (text) |
| gallery leftmost image | 0 / full | 26 / first image |
| pricing-section | 0 / 1265 | 33 / 1200 |
| contact-section | 0 / 1265 | 33 / 1200 |
Gallery heading is now flush with the image grid (24px vs 26px — the 2px delta is the 1px image border-radius on each side). Pricing and Contact are aligned with `floors-section` and `lage-section` (33 / 1200 / 33).
## Notes
- Changes are CSS-only — no template/PHP edits, no JS edits.
- Backup of the previous CSS on the test host kept at `/tmp/haus-schleusingen.css.bak` until visual sign-off.
- Pre-commit hooks passed locally (lint-staged and PHPUnit are no-ops without `node_modules`/`vendor`; CI will run them on the PR).
## Test plan
1. CI: lint-php, lint-css, lint-html must pass on the PR.
2. Visual: verify on the test deployment that the three points above hold at 1280px, 1024px, 768px, 480px viewports.
- Gallery .section-head now uses the same 1400px container + 1.5rem
horizontal padding as .masonry-grid, so 'PHOTO GALLERY' / 'A look inside'
align flush with the leftmost image edge (24px gutter) instead of sitting
at the very left of the page.
- .pricing-section and .contact-section are now constrained to
max-width: 1200px and centered (matching .floors-section and .lage-section),
so the 'Mietkonditionen' (dark) and 'Kontakt' (cream) blocks no longer
span the full viewport.
- Mobile: matching padding adjustment for the new .section-head rule at
width <= 768px.
The .legal-page <main> element had no CSS rules at all, so the
Impressum and Datenschutz text was rendering flush against the left
edge of the viewport (x=0, width=1265 at 1280px viewport). Both
view files share the .legal-page class, so a single CSS rule fixes
both.
Added a complete legal-page stylesheet (max-width 1200px, margin
auto, 6rem 3rem padding, matching .floors-section / .lage-section /
.pricing-section / .contact-section), plus minimal typography for
h1/h2/h3, body text, lists, links, the .legal-divider <hr>, the
.legal-back link, and a 768px mobile padding adjustment.
Measured on 1265px viewport:
- main.legal-page: 32.5/1200 (was 0/1265)
- h1 content area: 80.5/1104 inside the 3rem horizontal padding
Second commit 0df9c11 added on top of the original PR — legal pages fix.
main.legal-page had no CSS rules at all, so the Impressum/Datenschutz body was rendering flush against the left edge of the viewport (x=0, w=1265 at 1280px viewport). Both view files use the same legal-page class, so one CSS rule fixes both pages.
Added a complete .legal-page stylesheet (max-width 1200px, margin auto, 6rem 3rem padding, matching the other main sections), plus minimal typography for h1/h2/h3, body text, lists, links, the .legal-divider<hr>, the .legal-back link, and a 768px mobile padding adjustment.
Measured on 1265px viewport (before → after):
Before
After
main.legal-page
x=0, w=1265
x=32.5, w=1200
h1 content area
0/1265
80.5/1104
The fix is also deployed to haus.test.kies-media.de for visual sign-off.
Second commit `0df9c11` added on top of the original PR — legal pages fix.
`main.legal-page` had no CSS rules at all, so the Impressum/Datenschutz body was rendering flush against the left edge of the viewport (x=0, w=1265 at 1280px viewport). Both view files use the same `legal-page` class, so one CSS rule fixes both pages.
Added a complete `.legal-page` stylesheet (max-width 1200px, margin auto, 6rem 3rem padding, matching the other main sections), plus minimal typography for h1/h2/h3, body text, lists, links, the `.legal-divider` `<hr>`, the `.legal-back` link, and a 768px mobile padding adjustment.
Measured on 1265px viewport (before → after):
| | Before | After |
| --- | --- | --- |
| `main.legal-page` | x=0, w=1265 | x=32.5, w=1200 |
| `h1` content area | 0/1265 | 80.5/1104 |
The fix is also deployed to haus.test.kies-media.de for visual sign-off.
Third commit f75ad99 — formatting fix only. The first version of the legal-page CSS used inline multi-property transition values which prettier wanted split across multiple lines. Pure formatting, no semantic change.
All CI checks now green on the PR ✅ (PHP Syntax, CSS Lint, HTML Lint, PHPUnit).
Third commit `f75ad99` — formatting fix only. The first version of the legal-page CSS used inline multi-property `transition` values which prettier wanted split across multiple lines. Pure formatting, no semantic change.
All CI checks now green on the PR ✅ (PHP Syntax, CSS Lint, HTML Lint, PHPUnit).
The floor-accordion was rendering as a stack of plain text rows separated
by 1px hairline dividers with no visual affordance indicating they were
clickable tabs. CSS for .floor-icon (a 24px circle with a '+' that
rotates 45° to '×' on open) already existed, but the corresponding
<span class="floor-icon"> element had never been added to the template
— the affordance was completely invisible.
Changes:
1. Template (app/views/home/index.php): add
<span class="floor-icon" aria-hidden="true">+</span> inside the
<summary>, enabling the existing rotation/size CSS to take effect.
2. CSS (public/css/haus-schleusingen.css):
a. Restyle .floor-item from a thin divider to a real card
(1px --warm border, 4px radius, --white background) with a
0.75rem gap between items via flexbox column on .floors-accordion.
b. .floor-header: hover background in --cream, focus-visible
outline, list-style markers suppressed, padding tightened to
1.25rem 1.5rem.
c. .floor-icon: enlarged from 24px to 32px, thicker 1.5px border,
font-size 1.15rem so the '+' is clearly legible, white
background that goes cream on hover/open.
d. .floor-item.open: --accent border, subtle box-shadow
(0 4px 20px 6% black), and a 3px-wide ::before accent stripe on
the left edge — the canonical 'active tab' indicator.
e. .floor-icon rotation on open (45°) now also flips border-color
and background to --accent / --cream, plus hover state for the
closed icon.
f. Renamed dead-code class .floor-size → .floor-area to match the
template (refactor mismatch left over from the i18n work).
g. Renamed dead-code class .floor-accordion → .floors-accordion to
match the template.
Measured on 1265px viewport:
- 4 items, 4 icons (one per tab)
- Each item: 1104x74, white bg, 4px radius, --warm border
- Icon: 32x32 at x=1128 (right edge), white bg, '+' glyph
- Open state (item[1]): border → --accent, left 3px accent stripe,
icon rotates 45° to '×', subtle box-shadow
Sweep targets for visual confirmation:
- Closed: white card + warm border + '+' icon, hover lifts background
to cream and icon border to accent.
- Open: accent border + left stripe + '×' icon + soft shadow, body
expands below to show the floor-plan image and room list.
- Switching tabs: clicking another header collapses the current
open one (existing JS accordion behaviour).
The floor-plan accordion (/grundriss section) was rendering as a stack of plain text rows separated by 1px hairline dividers. CSS for .floor-icon (a + glyph that rotates 45° to × on open) already existed in the stylesheet — but the corresponding <span class="floor-icon"> element had never been added to the template. So the affordance was completely invisible.
Two files changed (the first time a non-CSS file in this PR):
app/views/home/index.php — add the missing <span class="floor-icon" aria-hidden="true">+</span> inside the <summary>.
public/css/haus-schleusingen.css — restyle the accordion to look like proper tabs:
Card layout: 1px --warm border, 4px radius, --white background, 0.75rem gap between items (flexbox column on .floors-accordion).
Hover state: cream background, accent border on icon.
Open state: accent border, 3px left accent stripe (canonical active-tab indicator), + rotates to ×, subtle box-shadow.
Enlarged .floor-icon from 24px → 32px with a thicker 1.5px border so the + reads clearly.
Renamed dead-code class .floor-size → .floor-area and .floor-accordion → .floors-accordion to match the template (refactor mismatches left over from the i18n refactor in commit 4b1c779).
Measured on 1265px viewport:
4 items × 4 icons (one per tab).
Each closed card: 1104×74px, white bg, 4px radius, --warm border, + icon at x=1128.
Each open card: border → --accent, 3px left stripe active, + → × (rotated 45°), soft box-shadow, body expands to ~922px showing the floor plan and room list.
All CI checks green ✅ on the PR (PHP Syntax, CSS Lint, HTML Lint, PHPUnit) and the deploy-test workflow ran successfully on the push.
Fourth commit `7913596` — vertical tab affordance fix.
The floor-plan accordion (`/grundriss` section) was rendering as a stack of plain text rows separated by 1px hairline dividers. CSS for `.floor-icon` (a `+` glyph that rotates 45° to `×` on open) already existed in the stylesheet — but the corresponding `<span class="floor-icon">` element had never been added to the template. So the affordance was completely invisible.
**Two files changed** (the first time a non-CSS file in this PR):
1. `app/views/home/index.php` — add the missing `<span class="floor-icon" aria-hidden="true">+</span>` inside the `<summary>`.
2. `public/css/haus-schleusingen.css` — restyle the accordion to look like proper tabs:
- Card layout: 1px `--warm` border, 4px radius, `--white` background, 0.75rem gap between items (flexbox column on `.floors-accordion`).
- Hover state: cream background, accent border on icon.
- Open state: accent border, 3px left accent stripe (canonical active-tab indicator), `+` rotates to `×`, subtle box-shadow.
- Enlarged `.floor-icon` from 24px → 32px with a thicker 1.5px border so the `+` reads clearly.
- Renamed dead-code class `.floor-size` → `.floor-area` and `.floor-accordion` → `.floors-accordion` to match the template (refactor mismatches left over from the i18n refactor in commit `4b1c779`).
Measured on 1265px viewport:
- 4 items × 4 icons (one per tab).
- Each closed card: 1104×74px, white bg, 4px radius, `--warm` border, `+` icon at x=1128.
- Each open card: border → `--accent`, 3px left stripe active, `+` → `×` (rotated 45°), soft box-shadow, body expands to ~922px showing the floor plan and room list.
All CI checks green ✅ on the PR (PHP Syntax, CSS Lint, HTML Lint, PHPUnit) and the deploy-test workflow ran successfully on the push.
greggy
merged commit 5fb6abe09f into main2026-06-14 16:50:01 +02:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Summary
.gallery-section .section-headnow uses the same 1400px container + 1.5rem horizontal padding as.masonry-grid, soPHOTO GALLERY/A look insidestart at the same x position (24px) as the leftmost image, instead of sitting flush at the very left of the page.max-width: 1200pxand centered (same pattern as.floors-sectionand.lage-section), so the darkMietkonditionenblock and the creamKontaktblock no longer span the full viewport.width <= 768px) gets a matching padding adjustment for the new.section-headrule.Verification
Measured bounding boxes on a 1265px viewport:
Gallery heading is now flush with the image grid (24px vs 26px — the 2px delta is the 1px image border-radius on each side). Pricing and Contact are aligned with
floors-sectionandlage-section(33 / 1200 / 33).Notes
/tmp/haus-schleusingen.css.bakuntil visual sign-off.node_modules/vendor; CI will run them on the PR).Test plan
Second commit
0df9c11added on top of the original PR — legal pages fix.main.legal-pagehad no CSS rules at all, so the Impressum/Datenschutz body was rendering flush against the left edge of the viewport (x=0, w=1265 at 1280px viewport). Both view files use the samelegal-pageclass, so one CSS rule fixes both pages.Added a complete
.legal-pagestylesheet (max-width 1200px, margin auto, 6rem 3rem padding, matching the other main sections), plus minimal typography for h1/h2/h3, body text, lists, links, the.legal-divider<hr>, the.legal-backlink, and a 768px mobile padding adjustment.Measured on 1265px viewport (before → after):
main.legal-pageh1content areaThe fix is also deployed to haus.test.kies-media.de for visual sign-off.
Third commit
f75ad99— formatting fix only. The first version of the legal-page CSS used inline multi-propertytransitionvalues which prettier wanted split across multiple lines. Pure formatting, no semantic change.All CI checks now green on the PR ✅ (PHP Syntax, CSS Lint, HTML Lint, PHPUnit).
The floor-accordion was rendering as a stack of plain text rows separated by 1px hairline dividers with no visual affordance indicating they were clickable tabs. CSS for .floor-icon (a 24px circle with a '+' that rotates 45° to '×' on open) already existed, but the corresponding <span class="floor-icon"> element had never been added to the template — the affordance was completely invisible. Changes: 1. Template (app/views/home/index.php): add <span class="floor-icon" aria-hidden="true">+</span> inside the <summary>, enabling the existing rotation/size CSS to take effect. 2. CSS (public/css/haus-schleusingen.css): a. Restyle .floor-item from a thin divider to a real card (1px --warm border, 4px radius, --white background) with a 0.75rem gap between items via flexbox column on .floors-accordion. b. .floor-header: hover background in --cream, focus-visible outline, list-style markers suppressed, padding tightened to 1.25rem 1.5rem. c. .floor-icon: enlarged from 24px to 32px, thicker 1.5px border, font-size 1.15rem so the '+' is clearly legible, white background that goes cream on hover/open. d. .floor-item.open: --accent border, subtle box-shadow (0 4px 20px 6% black), and a 3px-wide ::before accent stripe on the left edge — the canonical 'active tab' indicator. e. .floor-icon rotation on open (45°) now also flips border-color and background to --accent / --cream, plus hover state for the closed icon. f. Renamed dead-code class .floor-size → .floor-area to match the template (refactor mismatch left over from the i18n work). g. Renamed dead-code class .floor-accordion → .floors-accordion to match the template. Measured on 1265px viewport: - 4 items, 4 icons (one per tab) - Each item: 1104x74, white bg, 4px radius, --warm border - Icon: 32x32 at x=1128 (right edge), white bg, '+' glyph - Open state (item[1]): border → --accent, left 3px accent stripe, icon rotates 45° to '×', subtle box-shadow Sweep targets for visual confirmation: - Closed: white card + warm border + '+' icon, hover lifts background to cream and icon border to accent. - Open: accent border + left stripe + '×' icon + soft shadow, body expands below to show the floor-plan image and room list. - Switching tabs: clicking another header collapses the current open one (existing JS accordion behaviour).Fourth commit
7913596— vertical tab affordance fix.The floor-plan accordion (
/grundrisssection) was rendering as a stack of plain text rows separated by 1px hairline dividers. CSS for.floor-icon(a+glyph that rotates 45° to×on open) already existed in the stylesheet — but the corresponding<span class="floor-icon">element had never been added to the template. So the affordance was completely invisible.Two files changed (the first time a non-CSS file in this PR):
app/views/home/index.php— add the missing<span class="floor-icon" aria-hidden="true">+</span>inside the<summary>.public/css/haus-schleusingen.css— restyle the accordion to look like proper tabs:--warmborder, 4px radius,--whitebackground, 0.75rem gap between items (flexbox column on.floors-accordion).+rotates to×, subtle box-shadow..floor-iconfrom 24px → 32px with a thicker 1.5px border so the+reads clearly..floor-size→.floor-areaand.floor-accordion→.floors-accordionto match the template (refactor mismatches left over from the i18n refactor in commit4b1c779).Measured on 1265px viewport:
--warmborder,+icon at x=1128.--accent, 3px left stripe active,+→×(rotated 45°), soft box-shadow, body expands to ~922px showing the floor plan and room list.All CI checks green ✅ on the PR (PHP Syntax, CSS Lint, HTML Lint, PHPUnit) and the deploy-test workflow ran successfully on the push.