padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(home/hero): anchor content to top on mobile

Browse source 
The full-height hero centered its content vertically, leaving a ~188px
dead band between the header and the tagline on phones. Anchor the
content near the top (justify-start + small top padding) below lg, and
keep the centered treatment from lg up. Gap drops 188px -> 48px on
mobile; desktop stays vertically centered.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-14 17:15:12 +02:00
commit 01f62c8041
1 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/views/HomeView.vue
View file

@ -56,8 +56,10 @@ const featuredEvents = [
class="fixed inset-0 -z-50 h-screen w-screen object-cover"
/>
<!-- Hero: full-viewport, transparent over the pinned backdrop -->
<section class="relative isolate flex min-h-screen flex-col items-center justify-center overflow-hidden">
<!-- Hero: full-viewport, transparent over the pinned backdrop. Content is
anchored near the top on mobile (avoids a tall dead band under the
header) and vertically centered from lg up. -->
<section class="relative isolate flex min-h-screen flex-col items-center justify-start overflow-hidden pt-12 sm:pt-16 lg:justify-center lg:pt-0">
<div
class="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-background/55 to-transparent"
></div>