From 18ef21d984b85306064f4a374121d1980237c62f Mon Sep 17 00:00:00 2001 From: biss Date: Sun, 3 May 2026 07:15:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B1=89=E5=A0=A1=E8=8F=9C?= =?UTF-8?q?=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/BaseLayout.astro | 44 +++++++++++++++++- src/styles/global.css | 89 +++++++++++++++++++++++++++++++++++- 2 files changed, 130 insertions(+), 3 deletions(-) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 41526d0..0fa177a 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -19,7 +19,18 @@ const { title = site.title } = Astro.props;
{site.className} -
@@ -27,5 +38,36 @@ const { title = site.title } = Astro.props;
{site.footer}
+ diff --git a/src/styles/global.css b/src/styles/global.css index 53a31e5..2f63b49 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -59,6 +59,32 @@ a { white-space: nowrap; } +.nav-toggle { + display: none; + width: 44px; + height: 44px; + place-items: center; + align-content: center; + justify-items: center; + gap: 5px; + border: 1px solid rgba(255, 253, 247, 0.36); + border-radius: 8px; + background: rgba(31, 43, 42, 0.2); + color: #fffdf7; + backdrop-filter: blur(12px); + cursor: pointer; +} + +.nav-toggle span { + width: 20px; + height: 2px; + border-radius: 999px; + background: currentColor; + transition: + transform 180ms ease, + opacity 180ms ease; +} + .nav { display: flex; gap: clamp(12px, 2vw, 26px); @@ -752,12 +778,71 @@ footer { @media (max-width: 820px) { .site-header { - align-items: flex-start; position: absolute; + align-items: center; + flex-wrap: wrap; + gap: 12px; + padding-block: 12px; + } + + .nav-toggle { + display: grid; } .nav { - display: none; + position: fixed; + top: 68px; + left: 16px; + right: 16px; + display: grid; + gap: 4px; + padding: 10px; + border: 1px solid rgba(255, 253, 247, 0.22); + border-radius: 8px; + background: rgba(31, 43, 42, 0.94); + box-shadow: 0 18px 44px rgba(13, 20, 19, 0.28); + opacity: 0; + pointer-events: none; + transform: translateY(-8px); + transition: + opacity 180ms ease, + transform 180ms ease; + backdrop-filter: blur(16px); + } + + .nav a { + min-height: 44px; + display: flex; + align-items: center; + padding: 8px 12px; + border-radius: 7px; + opacity: 1; + } + + .nav a:hover { + background: rgba(255, 253, 247, 0.12); + } + + .site-header.is-open { + background: linear-gradient(180deg, rgba(22, 30, 29, 0.72), rgba(22, 30, 29, 0)); + } + + .site-header.is-open .nav { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + + .site-header.is-open .nav-toggle span:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + + .site-header.is-open .nav-toggle span:nth-child(2) { + opacity: 0; + } + + .site-header.is-open .nav-toggle span:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); } .hero {