lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(hero): image on top below lg in split layout

Browse Source 
On mobile and tablet the split hero now stacks image-first, copy below
(matches the rhythm users expect when the product is the focal point).
Desktop is unchanged — text left, product right on lg+. Uses order-*
utilities so DOM order stays copy-first for readers/SEO while the
visual order flips.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-04-21 11:56:11 +01:00
parent 80f1c8db08
commit fe5b9641e0
7 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/HeroPreview-DSVvIgM1.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/HeroPreview-DxWKyYcb.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-BRTnN62I.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-DVK2_Qkm.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
dist/assets/index-BOeKBKy1.js → dist/assets/index-DdaejuCj.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -12,11 +12,11 @@
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<script type="module" crossorigin src="/assets/index-BOeKBKy1.js"></script>
<script type="module" crossorigin src="/assets/index-DdaejuCj.js"></script>
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-CjdnoyKJ.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-DWTDSpp2.js">
<link rel="modulepreload" crossorigin href="/assets/vue-router-BrNWkU63.js">
<link rel="stylesheet" crossorigin href="/assets/index-BRTnN62I.css">
<link rel="stylesheet" crossorigin href="/assets/index-DVK2_Qkm.css">
</head>
<body>
<div id="app"></div>

6
src/design-system/components/Hero.vue
View File

@@ -72,11 +72,13 @@ const layout = computed(() => {
mediaSize: 'w-[260px] sm:w-[320px] md:w-[400px] lg:w-[480px]',
}
}
// Split: image on top on mobile/tablet, text-left/image-right on desktop.
// `order-*` flips the stacking order below lg without changing DOM order.
return {
root: 'grid gap-10 md:gap-14 lg:grid-cols-[1.05fr_1fr] lg:items-center',
copy: 'max-w-xl mx-auto lg:mx-0 items-center text-center lg:items-start lg:text-left',
copy: 'order-2 lg:order-1 max-w-xl mx-auto lg:mx-0 items-center text-center lg:items-start lg:text-left',
actions: 'justify-center lg:justify-start',
media: '',
media: 'order-1 lg:order-2',
mediaSize: 'w-[260px] sm:w-[340px] md:w-[420px] lg:w-full lg:max-w-[520px]',
}
})