seahi/blogflare
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加绿色主题品牌图标与管理后台侧边栏UI样式

Browse Source
This commit is contained in:
seahi committed 2026-09-27 20:25:42 +08:00
1 parent 70470a5f6d
commit d1abc1657d
3 files changed
+78 -43
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app.html
+18
View File
@@ -14,6 +14,24 @@
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet" />
<link rel="icon" href="%sveltekit.assets%/brand/green-echo/favicon.svg" type="image/svg+xml" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="%sveltekit.assets%/brand/green-echo/favicon-32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="%sveltekit.assets%/brand/green-echo/favicon-16.png"
/>
<link
rel="apple-touch-icon"
sizes="48x48"
href="%sveltekit.assets%/brand/green-echo/favicon-48.png"
/>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
src/routes/+layout.svelte
+21 -5
View File
@@ -66,9 +66,13 @@
class="header {scrolled ? 'scrolled' : ''} {isMobileMenuOpen ? 'mobile-menu-open' : ''}"
>
<div class="container wide">
<a href={resolve('/')} class="brand" onclick={() => (isMobileMenuOpen = false)}
>{$page.data.site?.title || 'BlogFlare'}</a
>
<a href={resolve('/')} class="brand" onclick={() => (isMobileMenuOpen = false)}>
<img
src={resolve('/brand/green-echo/icon-green.svg')}
alt="Logo"
style="height: 1.6rem; margin-right: 0.5rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
/>{$page.data.site?.title || 'BlogFlare'}
</a>
<button
class="mobile-menu-btn"
onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
@@ -149,7 +153,13 @@
/>
</div>
{/if}
<h1 class="home-title">{$page.data.site?.title || 'BlogFlare'}</h1>
<h1 class="home-title">
<img
src={resolve('/brand/green-echo/icon-green.svg')}
alt="Logo"
style="height: 2.2rem; margin-right: 0.8rem; vertical-align: text-bottom; margin-bottom: 0.2rem;"
/>{$page.data.site?.title || 'BlogFlare'}
</h1>
<p class="home-subtitle">
{$page.data.site?.description ||
'A high-performance blog powered by Cloudflare D1, R2, and KV.'}
@@ -168,7 +178,13 @@
<section>
<p>
© {new Date().getFullYear()}
<span class="brand">{$page.data.site?.title || 'BlogFlare'}</span>
<span class="brand">
<img
src={resolve('/brand/green-echo/icon-green.svg')}
alt="Logo"
style="height: 1.2rem; margin-right: 0.4rem; vertical-align: text-bottom; margin-bottom: 0.1rem;"
/>{$page.data.site?.title || 'BlogFlare'}
</span>
</p>
{#if uptimeText}
<p>感谢陪伴：{uptimeText}</p>
src/routes/admin/+layout.svelte
+39 -38
View File
@@ -48,7 +48,14 @@
<aside class="sidebar">
<div class="sidebar-header">
<a href={resolve('/admin')} class="brand">{$page.data.site?.title || 'BlogFlare'} 控制台</a>
<a href={resolve('/admin')} class="brand">
<img
src={resolve('/brand/green-echo/icon-green.svg')}
alt="Logo"
style="height: 1.4rem; margin-right: 0.5rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
/>
{$page.data.site?.title || 'BlogFlare'} 控制台
</a>
</div>
<div class="sidebar-action">
@@ -157,7 +164,14 @@
<Menu size={24} />
</button>
<div class="header-spacer"></div>
<span class="brand-mobile">{$page.data.site?.title || 'BlogFlare'} 控制台</span>
<span class="brand-mobile">
<img
src={resolve('/brand/green-echo/icon-green.svg')}
alt="Logo"
style="height: 1.2rem; margin-right: 0.4rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
/>
{$page.data.site?.title || 'BlogFlare'} 控制台
</span>
</header>
<main id="pjax-container" class="content-area">
@@ -189,8 +203,8 @@
.sidebar {
width: 260px;
flex-shrink: 0;
background: var(--bg-color, #ffffff);
border-right: 2px solid var(--text-color);
background: #111; /* Matching TOC background */
border-right: none;
display: flex;
flex-direction: column;
height: 100vh;
@@ -204,13 +218,13 @@
display: flex;
align-items: center;
padding: 0 24px;
border-bottom: 2px solid var(--text-color);
background: #0a0a0a; /* Slightly darker header */
}
.brand {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-color);
font-size: 1.1rem;
font-weight: 600;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
text-transform: uppercase;
@@ -218,13 +232,7 @@
.sidebar-action {
padding: 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
.sidebar-action {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
border-bottom: 1px solid #222;
}
.btn-new {
@@ -234,14 +242,14 @@
gap: 8px;
width: 100%;
padding: 12px 14px;
background: var(--text-color);
color: var(--bg-color, #fff);
background: #222;
color: #fff;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid var(--text-color);
border: 1px solid #333;
transition: all 0.2s ease;
}
@@ -262,7 +270,7 @@
width: 4px;
}
.sidebar-scrollable::-webkit-scrollbar-thumb {
background: var(--text-color);
background: #333;
}
.nav-group {
@@ -270,14 +278,13 @@
}
.nav-group-title {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-color);
font-size: 0.75rem;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 24px;
margin-bottom: 12px;
opacity: 0.6;
}
.nav-item {
@@ -285,34 +292,29 @@
align-items: center;
gap: 12px;
padding: 10px 24px;
color: var(--text-color);
color: #b0b0b0; /* TOC text color */
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.2s;
border-left: 3px solid transparent;
position: relative;
border-left: 2px solid transparent;
}
.nav-item:hover {
color: var(--accent-color, #419b38);
padding-left: 28px;
}
.nav-item.active {
border-left: 3px solid var(--accent-color, #419b38);
color: var(--accent-color, #419b38);
font-weight: 700;
background: rgba(0, 0, 0, 0.03);
}
@media (prefers-color-scheme: dark) {
.nav-item.active {
background: rgba(255, 255, 255, 0.05);
}
border-left: 2px solid var(--accent-color, #419b38);
background: rgba(255, 255, 255, 0.05);
}
.sidebar-footer {
padding: 20px 24px;
border-top: 2px solid var(--text-color);
border-top: 1px solid #222;
display: flex;
flex-direction: column;
gap: 12px;
@@ -323,7 +325,7 @@
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-color);
color: #b0b0b0;
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
@@ -338,8 +340,7 @@
.user-email {
font-weight: 500;
word-break: break-all;
color: var(--text-color);
opacity: 0.8;
color: #777;
}
/* Main Wrapper */