From 4b40acf6b83e14d7e8c42d216e0171bb5ca5f921 Mon Sep 17 00:00:00 2001
From: austin <austin@thebennett.net>
Date: Sun, 26 Jul 2026 22:07:42 -0500
Subject: [PATCH] Room under the homepage titles, which had none
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"What people come in for" and "Visit us" were written with an mb-12 and rendered
with nothing: th:replace swaps the whole host element out for the fragment, so
the class attribute on that tag never reaches the page. Both titles sat flush on
the grid below them. Confirmed against the running site — mb-12 appears nowhere
in the served HTML.

The gap moves to the element below, which is where catering already keeps it
(mt-8 on its price grids) and which is the only place th:replace cannot eat it.
A little wider than the twelve that was intended, since the point is the breath:
14, and 18 from md.

The card captions get the same treatment — py-8 rather than py-6, and px-4 so a
longer name than "Cakes" doesn't run to the edges — and the two panel headings
in Visit us go mb-6 to mb-8.
---
 src/main/resources/templates/home.html | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index aa7b568..2718bf9 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -45,14 +45,18 @@
   <!--/* What people come in for */-->
   <section class="section bg-bakery-50">
     <div class="container">
-      <div class="mb-12" th:replace="~{fragments/opening :: section-head('What people come in for', '')}"></div>
-      <div class="card-grid">
+      <!--/* The gap under a section head belongs to the element BELOW it, the way catering's price grids
+             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'} }"
              class="panel overflow-hidden text-center">
           <!--/* 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"
                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>
@@ -103,14 +107,15 @@
   <!--/* Visit us */-->
   <section id="visit" class="section bg-bakery-50 scroll-mt-24">
     <div class="container">
-      <div class="mb-12" 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">
+      <!--/* Same as above: the margin goes on the grid, not on a tag th:replace is about to discard. */-->
+      <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">
-          <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>
         <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"
                th:replace="~{fragments/visit :: address('link-plain')}"></div>
         </div>