From 64dc5cef9c40c58d6239bd98b7e0a764dab5f6f6 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 5 May 2026 15:08:33 +0100
Subject: [PATCH] fix: hero wordmark fills mobile/tablet width + Portainer pull
 workaround
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS: hero h1 used `(100vw - 48px) / 7` on mobile and `-64px / 7` on
tablet — the wider gutter assumption left 12-16px of unused white
space inside the 16px hero padding. Tightened both to `(100vw - 32px)
/ 7` so the wordmark spans the actual hero content area. Divisor 7
preserves the safety margin for the wider "Kammergut" wordmark.

Compose: dropped the `image: kammergut:0.1.0` field. Older Portainer
Compose runtimes (pre-v2.20) ignore `pull_policy: build` and still
ran `compose pull` against the image name, hitting "pull access
denied". Without an image name there's nothing for compose pull to
attempt; build runs during `up`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docker-compose.yml |  9 ++++-----
 src/styles.css     | 18 ++++++++----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index dbbbc68..c14d35e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,11 +3,10 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: kammergut:0.1.0
-    # Build the image locally instead of pulling from a registry —
-    # otherwise Portainer's `compose pull` step fails since this image
-    # isn't published anywhere.
-    pull_policy: build
+    # No `image:` field on purpose — Portainer's `docker compose pull`
+    # step would otherwise try to fetch this name from a registry and
+    # fail with "pull access denied" since the image is built locally.
+    # Compose builds from `build:` during `up`.
     container_name: kammergut
     restart: unless-stopped
     ports:
diff --git a/src/styles.css b/src/styles.css
index cef48e0..11be2b2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -119,14 +119,11 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
   position: relative; z-index: 1;
   font-family: var(--font-display);
   font-weight: 400;
-  /* Mobile (default): fill viewport minus 16px gutters each side.
-     Divisor 5 ≈ measured ratio of "Deepstock" rendered width to font-size
-     in DM Serif Display at 0.05em tracking. Tweak if the text overflows
-     or under-fills its container. */
-  /* Divisor 7 leaves enough horizontal room for the wider "Kammergut"
-     wordmark without overflow at the mobile/tablet breakpoint
-     transition (~704px was clipping at /6). */
-  font-size: calc((100vw - 48px) / 7);
+  /* Mobile: fill viewport minus the hero's 16px padding each side
+     (= 32px total). Divisor 7 keeps the wider "Kammergut" wordmark
+     from clipping at the mobile/tablet boundary (~704px was clipping
+     at /6). */
+  font-size: calc((100vw - 32px) / 7);
   line-height: 1;
   letter-spacing: 0.05em;
   color: #1A1A18;
@@ -139,9 +136,10 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
     background: linear-gradient(rgba(250,250,250,0.5), rgba(250,250,250,0.5)), url('/images/bg-1.jpg') center/cover no-repeat;
   }
 }
-/* Tablet — 32px gutters each side */
+/* Tablet — match the hero's 16px padding each side (32px total) so
+   the wordmark fills the available width like it does on mobile. */
 @media (min-width: 768px) {
-  .hero h1 { font-size: calc((100vw - 64px) / 7); }
+  .hero h1 { font-size: calc((100vw - 32px) / 7); }
 }
 @media (min-width: 900px) {
   .hero h1 { font-size: clamp(120px, 14vw, 176px); }