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); }