From 77ccbe72fad5a4870185fff374f75471c16a9043 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 10 Apr 2026 12:29:34 +0200 Subject: fix: hide skip-to-content link with transform instead of top positioning Replace top: -40px positioning with transform: translateY(-100%) for more robust hiding. The link now: - Stays hidden by default (translateY(-100%) moves it above viewport) - Smoothly slides in when focused (on keyboard navigation) - Uses fixed positioning for reliability This is a more modern and accessible approach that ensures the skip link is invisible until needed. Co-Authored-By: Claude Haiku 4.5 --- assets/css/components/hamburger.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'assets/css/components/hamburger.css') diff --git a/assets/css/components/hamburger.css b/assets/css/components/hamburger.css index 200e81d..2c868d8 100644 --- a/assets/css/components/hamburger.css +++ b/assets/css/components/hamburger.css @@ -170,18 +170,20 @@ /* Skip Link */ .skip-link { - position: absolute; - top: -40px; + position: fixed; + top: 0; left: 0; background: var(--accent); color: var(--bg); - padding: var(--sp-2) var(--sp-4); + padding: var(--sp-3) var(--sp-4); z-index: var(--z-modal); text-decoration: none; font-family: var(--font-mono); font-size: 0.9rem; + transform: translateY(-100%); + transition: transform var(--duration-base) ease; } .skip-link:focus { - top: 0; + transform: translateY(0); } -- cgit v1.2.3