From d4a33e947aa85be8f97c4305fadef7db60124dd0 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Tue, 6 Oct 2026 00:10:31 +1100 Subject: [PATCH] fix(home): compact signpost doors on phones #419 renamed the homepage H2s, so the door titles under the hero drifted from the sections they open. On phones the doors stacked as full cards and cost 639px of scroll before the first section. --- app/assets/css/main.css | 31 +++++++++++++++++++++++++++++++ app/pages/index.vue | 6 +++--- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/app/assets/css/main.css b/app/assets/css/main.css index c90ad098..b08b796d 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -1481,6 +1481,37 @@ text-wrap: pretty; } +/* Phones get three one-line jump links. Each section intro below repeats the door text, + and the full doors cost a screen of scroll before the first section. Touch has no + hover, so the arrow stays visible. */ +@media (max-width: 47.999rem) { + .home-door { + flex-direction: row; + align-items: center; + gap: 0.75rem; + padding: 1rem 0; + } + + .home-door-mark { + margin-bottom: 0; + } + + .home-door-title { + flex: 1; + justify-content: space-between; + font-size: 1rem; + } + + .home-door-arrow { + opacity: 1; + transform: none; + } + + .home-door-text { + display: none; + } +} + @media (prefers-reduced-motion: reduce) { .home-door::before, .home-door-arrow { diff --git a/app/pages/index.vue b/app/pages/index.vue index 1abd6313..bcb3a7e9 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -432,17 +432,17 @@ function recentUpdateDescription(item: RecentUpdateCard): string {