Room under the homepage titles, and the site stops flashing on every click #12

Merged
austin merged 5 commits from home-titles-and-page-transitions into main 2026-07-26 22:21:13 -05:00
Showing only changes of commit b344d45978 - Show all commits
+12 -7
View File
@@ -45,14 +45,18 @@
<!--/* What people come in for */--> <!--/* What people come in for */-->
<section class="section bg-bakery-50"> <section class="section bg-bakery-50">
<div class="container"> <div class="container">
<div class="mb-12" th:replace="~{fragments/opening :: section-head('What people come in for', '')}"></div> <!--/* The gap under a section head belongs to the element BELOW it, the way catering's price grids
<div class="card-grid"> already do it. It cannot live on this tag: th:replace swaps the whole element out for the
fragment, so a class written here never reaches the page — which is what happened to the
mb-12 that used to sit here, leaving the title flush against the cards. */-->
<div th:replace="~{fragments/opening :: section-head('What people come in for', '')}"></div>
<div class="card-grid mt-14 md:mt-18">
<div th:each="item : ${ {'Cinnamon Rolls', 'Sugar Cookies', 'Cakes'} }" <div th:each="item : ${ {'Cinnamon Rolls', 'Sugar Cookies', 'Cakes'} }"
class="panel overflow-hidden text-center"> class="panel overflow-hidden text-center">
<!--/* The filenames carry the spaces in these names; SitePhotos encodes them. */--> <!--/* The filenames carry the spaces in these names; SitePhotos encodes them. */-->
<img th:src="${photos.of('gallery/' + item + '.webp')}" th:alt="${item}" width="600" height="400" loading="lazy" <img th:src="${photos.of('gallery/' + item + '.webp')}" th:alt="${item}" width="600" height="400" loading="lazy"
class="w-full h-56 object-cover"> class="w-full h-56 object-cover">
<h3 class="panel-head border-b-0 border-t h4 md:text-2xl text-bakery-800 py-6" th:text="${item}">Cinnamon Rolls</h3> <h3 class="panel-head border-b-0 border-t h4 md:text-2xl text-bakery-800 px-4 py-8" th:text="${item}">Cinnamon Rolls</h3>
</div> </div>
</div> </div>
</div> </div>
@@ -103,14 +107,15 @@
<!--/* Visit us */--> <!--/* Visit us */-->
<section id="visit" class="section bg-bakery-50 scroll-mt-24"> <section id="visit" class="section bg-bakery-50 scroll-mt-24">
<div class="container"> <div class="container">
<div class="mb-12" th:replace="~{fragments/opening :: section-head('Visit us', '')}"></div> <!--/* Same as above: the margin goes on the grid, not on a tag th:replace is about to discard. */-->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 measure-wide"> <div th:replace="~{fragments/opening :: section-head('Visit us', '')}"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 measure-wide mt-14 md:mt-18">
<div class="panel p-6 md:p-8"> <div class="panel p-6 md:p-8">
<h2 class="h3 text-bakery-900 mb-6">Our hours</h2> <h2 class="h3 text-bakery-900 mb-8">Our hours</h2>
<div th:replace="~{fragments/visit :: hours('text-bakery-800')}"></div> <div th:replace="~{fragments/visit :: hours('text-bakery-800')}"></div>
</div> </div>
<div class="panel p-6 md:p-8"> <div class="panel p-6 md:p-8">
<h2 class="h3 text-bakery-900 mb-6">Find us</h2> <h2 class="h3 text-bakery-900 mb-8">Find us</h2>
<div class="text-bakery-800" <div class="text-bakery-800"
th:replace="~{fragments/visit :: address('link-plain')}"></div> th:replace="~{fragments/visit :: address('link-plain')}"></div>
</div> </div>