okooooooo/edgeever
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(site): 还原 Header 经典标准布局，保留 Pireel 精致字型排版

Browse Source 
- 恢复经典通栏居中 Container Header 布局，移除悬浮胶囊框；
- 借鉴 Pireel 精致字型排版 (text-[13px] font-semibold text-slate-600 hover:text-emerald-700 font-sans tracking-tight)；
- 保留开源 / Open Source GitHub 胶囊标签。
This commit is contained in:
tianma-if committed 2026-07-26 22:34:49 +08:00
1 parent 2e4a7620b7
commit 93ce0a1ea2
2 files changed
+39 -72
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/site/src/components/navbar/dropdown.astro
+5 -5
View File
@@ -6,7 +6,7 @@ const { title, lastItem, children } = Astro.props;
<li class="relative">
<DropdownContainer class="group">
<button
class="flex items-center gap-1.5 w-full lg:w-auto px-3 py-1.5 text-xs font-semibold text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/60 rounded-full transition-all duration-200">
class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-[13px] font-semibold text-slate-600 hover:text-emerald-700 transition-colors">
<span>{title}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -14,7 +14,7 @@ const { title, lastItem, children } = Astro.props;
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor"
class="w-3 h-3 text-slate-400 group-hover:text-emerald-600 group-open:rotate-180 transition-transform duration-200">
class="w-3 h-3 mt-0.5 group-open:rotate-180 transition-transform">
<path
stroke-linecap="round"
stroke-linejoin="round"
@@ -24,18 +24,18 @@ const { title, lastItem, children } = Astro.props;
<DropdownItems>
<div
class:list={[
"lg:absolute w-full lg:w-52 z-50 mt-2",
"lg:absolute w-full lg:w-48 z-50 mt-1",
lastItem
? "lg:right-0 origin-top-right"
: "lg:left-0 origin-top-left",
]}>
<div
class="p-1.5 lg:bg-white/95 lg:backdrop-blur-md lg:rounded-2xl lg:shadow-xl lg:border lg:border-slate-200/90 flex flex-col gap-0.5">
class="px-3 lg:py-2 lg:bg-white lg:rounded-xl lg:shadow-md lg:border lg:border-slate-200/80 flex flex-col gap-0.5">
{
children.map((item) => (
<a
href={item.path}
class="px-3 py-2 text-xs font-medium text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/80 rounded-xl transition-colors">
class="py-1.5 text-[12.5px] font-medium text-slate-600 hover:text-emerald-700 transition-colors">
{item.title}
</a>
))
apps/site/src/components/navbar/navbar.astro
+34 -67
View File
@@ -1,4 +1,5 @@
---
import Container from "@/components/container.astro";
import Dropdown from "./dropdown.astro";
import LanguageSwitcher from "./language-switcher.astro";
import { Icon } from "astro-icon/components";
@@ -44,79 +45,29 @@ const menuitems = [
];
---
<header class="sticky top-3 md:top-4 z-50 max-w-5xl mx-auto px-4">
<div class="relative rounded-full border border-slate-200/90 bg-white/85 backdrop-blur-md shadow-xs transition-all duration-300 hover:shadow-md hover:border-slate-300/90 px-4 py-2">
<Container>
<header class="flex flex-col lg:flex-row justify-between items-center my-5">
<Astronav>
<div class="flex items-center justify-between">
<!-- Logo Left -->
<a href={getLocalizedPath(locale, "/")} class="flex items-center gap-2 text-base select-none" aria-label={copy.homeAria}>
<span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--edgeever-brand-logo-bg)] shadow-xs">
<svg class="h-5 w-5" viewBox="0 0 64 64" role="img" aria-hidden="true">
<div class="flex w-full lg:w-auto items-center justify-between">
<a href={getLocalizedPath(locale, "/")} class="flex items-center gap-2 text-lg" aria-label={copy.homeAria}>
<span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--edgeever-brand-logo-bg)]">
<svg class="h-6 w-6" viewBox="0 0 64 64" role="img" aria-hidden="true">
<rect x="14" y="10" width="36" height="44" rx="8" fill="var(--edgeever-brand-logo-mark)" />
<path d="M24 23h18v5H30v5h11v5H30v6h13v5H24V23Z" fill="var(--edgeever-brand-surface)" />
<path d="M19 16h26" stroke="var(--edgeever-brand-logo-accent)" stroke-width="3" stroke-linecap="round" />
</svg>
</span>
<span class="font-bold text-slate-800 tracking-tight text-sm md:text-base">
Edge<span class="text-emerald-700">Ever</span>
<span>
<span class="font-bold text-slate-800 tracking-tight">Edge</span><span class="text-slate-500">Ever</span>
</span>
</a>
<!-- Desktop Navigation Items Center -->
<MenuItems class="hidden lg:flex items-center gap-1">
<ul class="flex items-center gap-1">
{
menuitems.map((item, index) => (
<>
{item.children && (
<Dropdown
title={item.title}
children={item.children}
lastItem={index === menuitems.length - 1}
/>
)}
{!item.children && (
<li>
<a
href={item.path}
class="px-3 py-1.5 text-xs font-semibold text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/60 rounded-full transition-all duration-200"
>
<span>{item.title}</span>
</a>
</li>
)}
</>
))
}
</ul>
</MenuItems>
<!-- Right Side Actions: Language Switcher & Open Source GitHub Button -->
<div class="hidden lg:flex items-center gap-3">
<LanguageSwitcher pathname={Astro.url.pathname} />
<a
href="https://github.com/tianma-if/edgeever"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:text-emerald-700 bg-white hover:bg-emerald-50/50 border border-slate-200/90 hover:border-emerald-400 rounded-full transition-all duration-200 shadow-2xs"
aria-label="GitHub"
>
<Icon class="h-4 w-4 text-slate-800" name="bx:bxl-github" />
<span>{copy.openSource}</span>
</a>
</div>
<!-- Mobile Menu Toggle Button -->
<div class="flex items-center gap-2 lg:hidden">
<LanguageSwitcher pathname={Astro.url.pathname} compact />
<MenuIcon class="w-5 h-5 text-slate-700 cursor-pointer p-0.5 rounded-md hover:bg-slate-100 transition-colors" />
<div class="block lg:hidden">
<MenuIcon class="w-4 h-4 text-gray-800" />
</div>
</div>
<!-- Mobile Dropdown Menu -->
<MenuItems class="hidden w-full lg:hidden pt-3 pb-2 border-t border-slate-100 mt-2">
<ul class="flex flex-col gap-1">
<MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
<ul class="flex flex-col lg:flex-row lg:gap-1">
{
menuitems.map((item, index) => (
<>
@@ -132,8 +83,7 @@ const menuitems = [
<li>
<a
href={item.path}
class="block px-3 py-2 text-xs font-semibold text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/60 rounded-xl transition-all"
>
class="flex lg:px-3 py-2 items-center text-[13px] font-semibold text-slate-600 hover:text-emerald-700 transition-colors">
<span>{item.title}</span>
</a>
</li>
@@ -142,7 +92,7 @@ const menuitems = [
))
}
</ul>
<div class="flex items-center mt-3 pt-2 border-t border-slate-100 gap-3">
<div class="lg:hidden flex items-center mt-3 gap-4">
<a
href="https://github.com/tianma-if/edgeever"
target="_blank"
@@ -153,8 +103,25 @@ const menuitems = [
<Icon class="h-4 w-4 text-slate-800" name="bx:bxl-github" />
<span>{copy.openSource}</span>
</a>
<LanguageSwitcher pathname={Astro.url.pathname} compact />
</div>
</MenuItems>
</Astronav>
</div>
</header>
<div>
<div class="hidden lg:flex items-center gap-4">
<LanguageSwitcher pathname={Astro.url.pathname} />
<a
href="https://github.com/tianma-if/edgeever"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-200 hover:border-slate-300 rounded-full transition-all duration-200 shadow-2xs"
aria-label="GitHub"
>
<Icon class="h-4 w-4 text-slate-800" name="bx:bxl-github" />
<span>{copy.openSource}</span>
</a>
</div>
</div>
</header>
</Container>