lfg2025/deepstock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hero wordmark fills mobile/tablet width + Portainer pull workaround

Browse Source 
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>
This commit is contained in:
Dorian
2026-05-05 15:08:33 +01:00
parent b7789bcb0c
commit 64dc5cef9c
2 changed files with 12 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docker-compose.yml
View File

@@ -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:

18
src/styles.css
View File

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