Skip to content

Commit 1040923

Browse files
EgonThorneEgonThorne
authored
Merge pull request #17 from MontageSubs/douzi/ui-Improve
Simplify header and footer layout
2 parents efcf8c2 + 27a194b commit 1040923

3 files changed

Lines changed: 53 additions & 70 deletions

File tree

‎src/components/Footer.astro‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,10 @@ const colYear = new Date().getFullYear();
7272

7373
<div class="max-w-[1400px] mx-auto px-5 sm:px-8 lg:px-12 py-16">
7474

75-
<!-- Five-column grid -->
76-
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 mb-14">
77-
<div class="col-span-2 md:col-span-3 lg:col-span-2">
78-
<p class="micro-label mb-5">— {isZh ? '关于本站' : 'About this site'}</p>
75+
<!-- Footer main groups -->
76+
<div class="grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,4fr)] mb-14">
77+
<div>
78+
<p class="micro-label mb-5">{isZh ? '关于本站' : 'About this site'}</p>
7979
<p class="text-bone-dim text-sm leading-relaxed max-w-sm">
8080
{t('footer.tagline')}
8181
</p>
@@ -87,41 +87,43 @@ const colYear = new Date().getFullYear();
8787
</div>
8888
</div>
8989

90-
<div>
91-
<h3 class="micro-label mb-5">— {t('footer.quicklinks')}</h3>
92-
<ul class="space-y-2.5">
93-
{quickLinks.map(({ label, href }) => (
94-
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors">{label}</a></li>
95-
))}
96-
</ul>
97-
</div>
90+
<div class="grid grid-cols-2 md:grid-cols-4 gap-10">
91+
<div>
92+
<h3 class="micro-label mb-5">{t('footer.quicklinks')}</h3>
93+
<ul class="space-y-2.5">
94+
{quickLinks.map(({ label, href }) => (
95+
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors">{label}</a></li>
96+
))}
97+
</ul>
98+
</div>
9899

99-
<div>
100-
<h3 class="micro-label mb-5">— {t('footer.learn_resources')}</h3>
101-
<ul class="space-y-2.5">
102-
{learnLinks.map(({ label, href }) => (
103-
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors">{label}</a></li>
104-
))}
105-
</ul>
106-
</div>
100+
<div>
101+
<h3 class="micro-label mb-5">{t('footer.learn_resources')}</h3>
102+
<ul class="space-y-2.5">
103+
{learnLinks.map(({ label, href }) => (
104+
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors">{label}</a></li>
105+
))}
106+
</ul>
107+
</div>
107108

108-
<div>
109-
<h3 class="micro-label mb-5">— {t('footer.community')}</h3>
110-
<ul class="space-y-2.5">
111-
{communityLinks.map(({ label, href, external }) => (
112-
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors"
113-
target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined}>{label}</a></li>
114-
))}
115-
</ul>
116-
</div>
109+
<div>
110+
<h3 class="micro-label mb-5">{t('footer.community')}</h3>
111+
<ul class="space-y-2.5">
112+
{communityLinks.map(({ label, href, external }) => (
113+
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors"
114+
target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined}>{label}</a></li>
115+
))}
116+
</ul>
117+
</div>
117118

118-
<div>
119-
<h3 class="micro-label mb-5">— {t('footer.contribute')}</h3>
120-
<ul class="space-y-2.5">
121-
{contributeLinks.map(({ label, href }) => (
122-
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors">{label}</a></li>
123-
))}
124-
</ul>
119+
<div>
120+
<h3 class="micro-label mb-5">{t('footer.contribute')}</h3>
121+
<ul class="space-y-2.5">
122+
{contributeLinks.map(({ label, href }) => (
123+
<li><a href={href} class="text-bone-dim hover:text-signal-yellow text-[14px] transition-colors">{label}</a></li>
124+
))}
125+
</ul>
126+
</div>
125127
</div>
126128
</div>
127129

‎src/components/Header.astro‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,18 @@ const { lang, hasTranslation = true, translationPath } = Astro.props;
1111
const l = lang as Lang;
1212
const isZh = lang === 'zh-hans';
1313
14+
// 根据当前语言读取导航与公共文案，缺失时回退到中文。
1415
function t(key: keyof typeof ui['zh-hans']): string {
1516
return ((ui[l] as typeof ui['zh-hans'])[key] ?? ui['zh-hans'][key]) as string;
1617
}
1718
18-
const navItems: { key: keyof typeof ui['zh-hans']; href: string; n: string }[] = [
19-
{ key: 'nav.about', href: `/${lang}/about`, n: '01' },
20-
{ key: 'nav.projects', href: `/${lang}/projects`, n: '02' },
21-
{ key: 'nav.tools', href: `/${lang}/tools`, n: '03' },
22-
{ key: 'nav.learn', href: `/${lang}/learn`, n: '04' },
23-
{ key: 'nav.community', href: `/${lang}/community`, n: '05' },
24-
{ key: 'nav.contribute', href: `/${lang}/contribute`, n: '06' },
19+
const navItems: { key: keyof typeof ui['zh-hans']; href: string }[] = [
20+
{ key: 'nav.about', href: `/${lang}/about` },
21+
{ key: 'nav.projects', href: `/${lang}/projects` },
22+
{ key: 'nav.tools', href: `/${lang}/tools` },
23+
{ key: 'nav.learn', href: `/${lang}/learn` },
24+
{ key: 'nav.community', href: `/${lang}/community` },
25+
{ key: 'nav.contribute', href: `/${lang}/contribute` },
2526
];
2627
2728
const currentPath = Astro.url.pathname;
@@ -50,13 +51,12 @@ const alternatePath = translationPath
5051
</div>
5152
</a>
5253

53-
<!-- Desktop nav (numbered) -->
54+
<!-- Desktop nav -->
5455
<div class="hidden lg:flex items-center gap-0.5">
55-
{navItems.map(({ key, href, n }) => {
56+
{navItems.map(({ key, href }) => {
5657
const active = currentPath.startsWith(href);
5758
return (
58-
<a href={href} class={`relative group px-3 py-2 text-[13px] flex items-center gap-1.5 transition-colors ${active ? 'text-signal-yellow' : 'text-bone-dim hover:text-bone'}`}>
59-
<span class={`font-mono text-[9px] tracking-[0.2em] ${active ? 'text-signal-yellow' : 'text-bone-mute'}`}>{n}</span>
59+
<a href={href} class={`relative group px-3 py-2 text-[13px] transition-colors ${active ? 'text-signal-yellow' : 'text-bone-dim hover:text-bone'}`}>
6060
<span>{t(key)}</span>
6161
{active && <span class="absolute -bottom-px left-3 right-3 h-px bg-signal-yellow"></span>}
6262
</a>
@@ -67,9 +67,6 @@ const alternatePath = translationPath
6767
<!-- Right -->
6868
<div class="flex items-center gap-1 sm:gap-2">
6969

70-
<!-- Live clock -->
71-
<span class="hidden md:inline-block font-mono text-[11px] text-bone-mute tabular-nums tracking-wider mr-3" data-clock>—</span>
72-
7370
<!-- Search -->
7471
<a href={`/${lang}/search`} class="p-2 text-bone-dim hover:text-bone transition-colors" aria-label={t('nav.search')}>
7572
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
@@ -133,11 +130,10 @@ const alternatePath = translationPath
133130
<!-- Mobile menu -->
134131
<div id="mobile-menu" class="hidden lg:hidden border-t border-bone/[0.07] py-4">
135132
<div class="flex flex-col">
136-
{navItems.map(({ key, href, n }) => {
133+
{navItems.map(({ key, href }) => {
137134
const active = currentPath.startsWith(href);
138135
return (
139-
<a href={href} class={`py-3 flex items-center gap-3 text-base transition-colors ${active ? 'text-signal-yellow' : 'text-bone-dim hover:text-bone'}`}>
140-
<span class="font-mono text-[10px] text-bone-mute w-6">{n}</span>
136+
<a href={href} class={`py-3 text-base transition-colors ${active ? 'text-signal-yellow' : 'text-bone-dim hover:text-bone'}`}>
141137
<span>{t(key)}</span>
142138
</a>
143139
);

‎src/components/MotionScripts.astro‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
/**
3-
* Global motion + interaction scripts.
4-
* Pure DOM/IO/RAF — no dependencies.
3+
* 全站动效与交互脚本。
4+
* 仅使用 DOM、IntersectionObserver 与 requestAnimationFrame，不引入依赖。
55
*/
66
---
77

@@ -53,21 +53,6 @@
5353
window.addEventListener('scroll', onScroll, { passive: true });
5454
})();
5555

56-
// ───────── Live local time clock ─────────
57-
(() => {
58-
const el = document.querySelector('[data-clock]');
59-
if (!el) return;
60-
const tick = () => {
61-
const d = new Date();
62-
const hh = String(d.getHours()).padStart(2, '0');
63-
const mm = String(d.getMinutes()).padStart(2, '0');
64-
const ss = String(d.getSeconds()).padStart(2, '0');
65-
el.textContent = `${hh}:${mm}:${ss}`;
66-
};
67-
tick();
68-
setInterval(tick, 1000);
69-
})();
70-
7156
// ───────── Mobile menu ─────────
7257
(() => {
7358
const btn = document.getElementById('mobile-menu-btn');

0 commit comments

Comments
 (0)