From 75d1558508cb89db1b526b2f10dd7ee92ae831ba Mon Sep 17 00:00:00 2001 From: gahusb Date: Thu, 23 Apr 2026 14:28:22 +0900 Subject: [PATCH] style(responsive): add viewport-fit=cover and safe area CSS variables Add viewport-fit=cover to meta tag for notched devices. Add --bottom-nav-h / --safe-area-bottom tokens and body padding-bottom for mobile bottom navigation safe area support. Co-Authored-By: Claude Opus 4.6 --- index.html | 2 +- src/index.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6940a72..91cd047 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + 가후습 개인기록 diff --git a/src/index.css b/src/index.css index a324804..5dddb5f 100644 --- a/src/index.css +++ b/src/index.css @@ -72,6 +72,8 @@ /* ── Layout ──────────────────────────────────────────────────────── */ --sidebar-w: 240px; --topbar-h: 56px; + --bottom-nav-h: 64px; + --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* ── Typography ──────────────────────────────────────────────────── */ --font-display: 'Space Grotesk', 'Noto Sans KR', system-ui, serif; @@ -240,5 +242,6 @@ select option { body { overflow: auto; background-attachment: scroll; + padding-bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom)); } }