j.foucher/AsterionWP2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(home): full-viewport-height video hero (100vh) with vertical centering

Browse Source 
Hero section now min-height: 100vh — fills the entire viewport, content
vertically centered via flex-column + justify-content: center. Scrolling
reveals the rest of the page below (3-pillars cards, industries, etc.).

Replaces the previous fixed-padding approach (9rem top, 8rem bottom) which
left visible space below the hero on tall monitors and forced the hero
shorter on mobile.

Padding kept minimal (2rem top/bottom) for breathing room when content
gets close to the viewport edges on very short displays.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
j.foucher
2026-05-15 08:22:48 +02:00
parent 621425025c
commit 98dfa6d8b6
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
tools/av-generate-home.php
View File

@@ -263,17 +263,19 @@ function av_build_home_video_hero() {
$els = []; $els = [];
// SECTION — full bleed, large vertical padding, video bg or navy // SECTION — full-bleed, 100vh tall, content vertically centered.
// Using min-height (not fixed height) so content can still extend if needed.
// 100dvh fallback handles mobile address bar collapse correctly (newer browsers).
$els[] = [ $els[] = [
'id' => $sid, 'name' => 'section', 'parent' => 0, 'children' => [$oct], 'id' => $sid, 'name' => 'section', 'parent' => 0, 'children' => [$oct],
'settings' => [ 'settings' => [
'_padding' => av_sp('9rem', '0', '8rem', '0'), '_padding' => av_sp('2rem', '0', '2rem', '0'), // breathing room at top/bottom
'_padding:tablet_portrait' => av_sp('7rem', '0', '6rem', '0'), '_heightMin' => '100vh', // full viewport height
'_padding:mobile_landscape' => av_sp('5rem', '0', '4rem', '0'), '_justifyContent' => 'center', // vertical centering (flex-column)
'_padding:mobile_portrait' => av_sp('4rem', '0', '3.5rem', '0'), '_background' => $section_background,
'_background' => $section_background, '_position' => 'relative',
'_position' => 'relative', '_overflow' => 'hidden',
'_overflow' => 'hidden', '_cssCustom' => '%root% { min-height: 100vh; min-height: 100dvh; }',
], ],
]; ];