From b3dcf38d784e4788e2f2f377ad76f496efad6c9c Mon Sep 17 00:00:00 2001 From: crllect Date: Fri, 15 May 2026 23:33:19 -0400 Subject: [PATCH 1/3] Added mobile ui, changed back to og font --- src/app/globals.css | 80 ++++++++++-- src/app/layout.tsx | 2 +- src/components/Nav.tsx | 272 ++++++++++++++++++++++++++++------------- 3 files changed, 261 insertions(+), 93 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index e7546cd..9980ebd 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -58,7 +58,10 @@ h1, h2, h3 { color: var(--text); - font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; + font-family: "Avenir Next", + "Segoe UI", + "Helvetica Neue", + sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 0.98; @@ -82,7 +85,10 @@ code { justify-content: center; padding: 0.34rem 0.62rem; color: var(--muted); - font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; + font-family: "Avenir Next", + "Segoe UI", + "Helvetica Neue", + sans-serif; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.08em; @@ -101,6 +107,45 @@ code { text-shadow: 0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%); } +.mobile-nav-link { + display: flex; + align-items: center; + min-height: 2.6rem; + padding: 0.5rem 0.72rem; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + background: rgba(255, 255, 255, 0.04); + color: var(--muted); + font-family: "Avenir Next", + "Segoe UI", + "Helvetica Neue", + sans-serif; + font-size: 0.92rem; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + transition: + color 0.1s ease, + background-color 0.1s ease, + border-color 0.1s ease, + text-shadow 0.1s ease; +} + +.mobile-nav-link:hover, +.mobile-nav-link:focus-visible { + border-color: color-mix(in oklab, var(--primary) 68%, white 32%); + background: color-mix(in oklab, var(--primary) 12%, transparent); + color: color-mix(in oklab, var(--primary) 72%, white 28%); + text-shadow: 0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%); +} + +.mobile-nav-link-active { + border-color: rgba(255, 255, 255, 0.25); + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 248, 251, 0.95); + text-shadow: 0 0 1px rgba(255, 248, 251, 0.3); +} + .dock-brand-icon { display: flex; align-items: center; @@ -174,7 +219,10 @@ code { .legacy-stack { display: grid; gap: 1rem; - font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; + font-family: "Avenir Next", + "Segoe UI", + "Helvetica Neue", + sans-serif; font-weight: 400; } @@ -293,6 +341,7 @@ code { .service-source { color: var(--muted); font-size: 0.9rem; + white-space: nowrap; } .social-badge { @@ -329,17 +378,28 @@ code { display: block; font-size: clamp(2.7rem, 12vw, 4rem); } - - .nav-link-plain { - font-size: 0.84rem; - padding: 0.28rem 0.5rem; - } } @media (max-width: 720px) { + .service-row-legacy, .social-row-legacy { - flex-direction: column; - align-items: flex-start; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-wrap: nowrap; + padding: 0.78rem 0.82rem; + gap: 0.75rem; + } + + .service-name, + .social-name { + min-width: 0; + flex: 1 1 auto; + } + + .service-meta, + .social-badge { + flex: 0 0 auto; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 60c602f..8241244 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -28,7 +28,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - +