cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-04-02 01:54:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fixed navbar and banner

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-03-25 20:51:38 +02:00
parent 361f98e437
commit 10ba755a71
2 changed files with 113 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/Header.astro
View file

@ -24,6 +24,7 @@ const t = getTranslations(lang);
.header-nav h1 a {
color: inherit;
text-decoration: none;
display: block;
}
.site-header {
@ -31,14 +32,11 @@ const t = getTranslations(lang);
padding-top: 0.5rem;
}
.site-header .header-nav h1 {
font-size: 2.5rem;
}
.theme-icon-wrap {
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.header-nav {
@ -50,5 +48,23 @@ const t = getTranslations(lang);
.header-nav h1 {
margin: 0;
font-style: italic;
line-height: 1.1;
/* 给右上角 ThemeIcon 留空间 */
max-width: calc(100% - 4rem);
/* 桌面正常，手机自动缩小 */
font-size: clamp(1.6rem, 6vw, 2.5rem);
}
@media (max-width: 768px) {
.site-header {
padding-top: 0.25rem;
}
.header-nav h1 {
max-width: calc(100% - 3.5rem);
font-size: clamp(1.25rem, 7vw, 2rem);
}
}
</style>

102
src/components/Navigation.astro
View file

@ -5,19 +5,29 @@ const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
---
<nav class="site-nav">
<a href={`/${lang}`} data-astro-reload>{t.nav.home}</a>
<a href={`/${lang}/about`}>{t.nav.about}</a>
<a href={`/${lang}/tags`}>{t.nav.tags}</a>
<a href={`/${lang}/timeline`}>{t.nav.timeline}</a>
<a href={`/${lang}/friends`}>{t.nav.friends}</a>
<nav class="site-nav" aria-label="Site navigation">
<div class="site-nav-desktop">
<a href={`/${lang}`} data-astro-reload>{t.nav.home}</a>
<a href={`/${lang}/about`}>{t.nav.about}</a>
<a href={`/${lang}/tags`}>{t.nav.tags}</a>
<a href={`/${lang}/timeline`}>{t.nav.timeline}</a>
<a href={`/${lang}/friends`}>{t.nav.friends}</a>
</div>
<details class="site-nav-mobile">
<summary>☰ {lang === "zh" ? "导航栏" : "Menu"}</summary>
<div class="dropdown-menu">
<a href={`/${lang}`} data-astro-reload>{t.nav.home}</a>
<a href={`/${lang}/about`}>{t.nav.about}</a>
<a href={`/${lang}/tags`}>{t.nav.tags}</a>
<a href={`/${lang}/timeline`}>{t.nav.timeline}</a>
<a href={`/${lang}/friends`}>{t.nav.friends}</a>
</div>
</details>
</nav>
<style>
.site-nav {
display: flex;
gap: 1.5rem;
align-items: center;
margin: 1rem 0;
padding-bottom: 3rem;
position: relative;
@ -50,6 +60,12 @@ const t = getTranslations(lang);
);
}
.site-nav-desktop {
display: flex;
gap: 1.5rem;
align-items: center;
}
.site-nav a {
color: black;
text-decoration: underline;
@ -68,4 +84,72 @@ const t = getTranslations(lang);
:global(.dark) .site-nav a:hover {
color: #ddd;
}
.site-nav-mobile {
display: none;
position: relative;
}
.site-nav-mobile summary {
list-style: none;
cursor: pointer;
display: inline-block;
font-weight: 700;
font-size: 1.1rem;
color: black;
text-decoration: underline;
user-select: none;
}
.site-nav-mobile summary::-webkit-details-marker {
display: none;
}
:global(.dark) .site-nav-mobile summary {
color: white;
}
.dropdown-menu {
position: absolute;
top: calc(100% + 0.75rem);
left: 0;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.9rem 1rem;
background: #fffaf5;
border: 2px dashed #8b5e3c;
border-radius: 0;
z-index: 20;
}
.dropdown-menu a {
font-size: 1rem;
text-decoration: none;
color: black;
}
.dropdown-menu a:hover {
text-decoration: underline;
}
:global(.dark) .dropdown-menu {
background: #1f1b18;
border-color: #c8a98a;
}
:global(.dark) .dropdown-menu a {
color: white;
}
@media (max-width: 768px) {
.site-nav-desktop {
display: none;
}
.site-nav-mobile {
display: block;
}
}
</style>