TheVine/itsthevine
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Hero: 56svh, so the homepage looks like it has more than one thing on it

Browse Source 
At 78svh a laptop's first screen was the lockup and nothing else. It is a floor rather than a height —
content still wins on a short window — and at 56 the fold now carries the lockup, the line under it, both
buttons, and the top of "What people come in for", which is what invites the scroll.

Tightened the two gaps inside it to match (mb-10 to mb-8), or the shorter band would just have had the
same air distributed worse.

Checked at 1366×768, the size of the laptop most people have.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
austin
2026-07-26 19:39:24 -05:00
co-authored by Claude Opus 5
parent e2b9af56f1
commit 398233dba4
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/home.html
+11 -4
View File
@@ -3,8 +3,15 @@
<body>
<div th:fragment="content">
<!--/* Hero — centred lockup on a sage wash. */-->
<section class="relative flex items-center min-h-[78svh] py-20 md:py-28 bg-bakery-900 text-white overflow-hidden">
<!--/*
Hero — centred lockup on a sage wash.
56svh, not 78: at 78 a laptop's first screen was the lockup and nothing else, so the page looked like
it had one thing on it. The floor is low enough now that the next section shows above the fold and
invites the scroll, and high enough that the lockup still has room to be the first thing you see. It
is a floor, not a height — the content wins on a short window.
*/-->
<section class="relative flex items-center min-h-[56svh] py-16 md:py-20 bg-bakery-900 text-white overflow-hidden">
<!--/* Softened on purpose: the storefront's own painted sign sits right behind the logo, so a sharp
photo makes you read the name twice. scale-110 hides the blur's feathered edges. */-->
<img th:src="${photos.of('gallery/Outside.webp')}" alt="" fetchpriority="high"
@@ -17,8 +24,8 @@
page on narrow screens. */-->
<div class="relative container w-full min-w-0">
<div class="measure text-center">
<div th:replace="~{fragments/lockup :: large('text-bakery-50 mb-10')}"></div>
<p class="lede sm:text-xl text-bakery-100 mb-10">
<div th:replace="~{fragments/lockup :: large('text-bakery-50 mb-8')}"></div>
<p class="lede sm:text-xl text-bakery-100 mb-8">
A coffeehouse and bakery in downtown Princeville, Illinois.
</p>
<div class="flex flex-col sm:flex-row gap-3 justify-center">