From 56f6fa608b3891fa49c525ed9884575b2fedd515 Mon Sep 17 00:00:00 2001 From: Codex Date: Mon, 7 Sep 2026 09:18:18 +0200 Subject: [PATCH 01/10] chore(foundation): shared pieces for the responsive pass The responsive fixes that follow need a few things in place first so each area can be worked on independently: the i18n keys for the new navigation, carousel, timeline and language-switcher labels (previously hard-coded in English), pause/play icons for the featured card, the sidebar offset as a single set of constants, two small hooks (media query, element width), an `xs` breakpoint at 420px, `scroll-padding-top` so hash links clear the fixed header, a `viewport` export with `viewport-fit=cover` so safe-area insets work on notched phones, and a `className` prop on the footer so the home page can offset it next to the sidebar. - en.json/es.json: nav.*, hero.featuredProject.goTo/pauseRotation/resumeRotation, language.selection/switchTo/current, journey.back/start/yearDetails/ closeDetails/legend*, new top-level `carousel`; shorter OBT subtitle so it fits the featured card without truncation - icons: PauseIcon, PlayIcon - morphNav/layout.ts: SIDEBAR_* constants - lib/hooks: useMediaQuery, useElementWidth - globals.css: @theme --breakpoint-xs, scroll-padding-top - app/layout.tsx: viewport export (replaces the manual theme-color meta) - Footer: optional className Co-Authored-By: Claude Fable 5.1 --- src/app/globals.css | 7 ++++++ src/app/layout.tsx | 10 ++++++-- src/components/common/Footer.tsx | 9 +++++-- src/components/ui/icons.tsx | 17 +++++++++++++ src/components/ui/index.ts | 2 ++ src/features/morphNav/index.ts | 6 +++++ src/features/morphNav/layout.ts | 18 ++++++++++++++ src/i18n/messages/en.json | 42 +++++++++++++++++++++++++++----- src/i18n/messages/es.json | 42 +++++++++++++++++++++++++++----- src/lib/hooks/useElementWidth.ts | 30 +++++++++++++++++++++++ src/lib/hooks/useMediaQuery.ts | 26 ++++++++++++++++++++ 11 files changed, 193 insertions(+), 16 deletions(-) create mode 100644 src/features/morphNav/layout.ts create mode 100644 src/lib/hooks/useElementWidth.ts create mode 100644 src/lib/hooks/useMediaQuery.ts diff --git a/src/app/globals.css b/src/app/globals.css index e0c3d53..7777052 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,10 @@ @import "tailwindcss"; +@theme { + /* Extra breakpoint between small phones (320-419px) and large phones (420-639px). */ + --breakpoint-xs: 26.25rem; +} + /* CSS Variables for theming */ :root { --bg: #040304; @@ -29,6 +34,8 @@ html { color-scheme: dark; scroll-behavior: smooth; + /* Keep hash targets clear of the fixed 4rem header. */ + scroll-padding-top: 5rem; } body { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d433964..c8c2d3a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,4 @@ -import type { Metadata } from 'next' +import type { Metadata, Viewport } from 'next' import './globals.css' import { SITE } from '@/lib/constants' import { OG_IMAGE } from '@/lib/seo' @@ -58,6 +58,13 @@ export const metadata: Metadata = { }, } +export const viewport: Viewport = { + width: 'device-width', + initialScale: 1, + viewportFit: 'cover', + themeColor: '#040304', +} + export default function RootLayout({ children, }: Readonly<{ @@ -66,7 +73,6 @@ export default function RootLayout({ return ( - +