style: 更新全局样式与公共布局以适配后台管理系统

src/app.css

@@ -56,12 +56,18 @@ a:hover {
 }
 
 /* Base Layout */
-.wrapper {
+.wrapper, .container {
   max-width: var(--layout-width);
   margin: 0 auto;
   padding: 0 20px;
 }
 
+@media screen and (min-width: 1024px) {
+  .wrapper.wide, .container.wide {
+    max-width: 1024px;
+  }
+}
+
 /* Header (VOID style - dark glass, centered links) */
 .header {
   position: fixed;
@@ -105,6 +111,8 @@ a:hover {
   color: var(--header-text);
   position: absolute;
   left: 20px;
+  z-index: 10;
+  text-decoration: none;
 }
 
 .header nav {
@@ -123,17 +131,101 @@ a:hover {
   padding: 0.3rem 0.55rem;
   height: 100%;
   transition: 0.3s;
+  position: relative;
 }
 
 .header nav a:hover {
   color: var(--header-text-hover);
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.header nav a.active,
+.header nav .nav-dropdown-trigger.active {
+  font-weight: 600;
+  color: var(--header-text-hover);
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.header nav a.active::after,
+.header nav .nav-dropdown-trigger.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--accent-color, #bd6262);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Header Dropdown Menu Styles */
+.header nav .nav-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.header nav .nav-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--header-text);
+  font-size: 1rem;
+  padding: 0.3rem 0.55rem;
+  height: 100%;
+  transition: 0.3s;
+  cursor: pointer;
+  position: relative;
+}
+
+.header nav .nav-dropdown-trigger:hover,
+.header nav .nav-dropdown:hover .nav-dropdown-trigger {
+  color: var(--header-text-hover);
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.header nav .dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 120px;
+  background-color: var(--header-bg, #000000);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 1100;
+  padding: 4px 0;
+}
+
+.header nav .nav-dropdown:hover .dropdown-menu {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.header nav .dropdown-menu a {
+  display: block;
+  padding: 8px 16px;
+  height: auto;
+  color: var(--header-text);
+  font-size: 0.9rem;
+  white-space: nowrap;
+  justify-content: flex-start;
+}
+
+.header nav .dropdown-menu a:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: var(--header-text-hover);
 }
 
 /* DoIt Style Home Profile */
 .home-profile {
   text-align: center;
-  padding: 8vh 0 2rem;
+  padding: calc(58px + 8vh) 0 2rem;
   animation: fade-in 1s ease-out;
 }
 
@@ -271,45 +363,66 @@ body.single-col .post-list {
   padding: 2rem 0 4rem 0;
 }
 
-.article-header {
-  text-align: center;
-  margin-bottom: 3rem;
+@keyframes float-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-18px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.article-header h1 {
-  font-size: 2.2rem;
-  margin-bottom: 1rem;
-}
-
-.headline-meta {
-  color: #999;
-  font-size: 1.42em;
-  font-weight: 300;
-  margin: 1.5em 0;
+.banner-title {
   position: relative;
-  padding: 25px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 70px 45px;
+  animation: float-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+@media screen and (max-width: 767px) {
+  .banner-title {
+    padding: 50px 1rem;
+  }
+}
+
+.banner-title .post-title {
   text-align: center;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  font-weight: 400;
+  word-break: break-word;
+  font-size: 2.7rem;
+  line-height: 1.67;
+  margin: 0;
+  color: var(--title-color);
 }
 
-.headline-meta::before,
-.headline-meta::after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -12.5px;
-  width: 25px;
-  height: 25px;
-  background-image: url(data:image/png;base64,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 truncated
-  background-size: cover;
+@media screen and (max-width: 767px) {
+  .banner-title .post-title {
+    font-size: 2.2rem;
+  }
 }
 
-.headline-meta::after {
-  top: auto;
-  bottom: -12.5px;
+.banner-title .post-meta {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 300;
+  margin-bottom: 0;
+  color: var(--text-color);
+}
+
+.banner-title .post-meta a {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+}
+
+.banner-title .post-meta a:hover {
+  border-bottom-color: var(--accent-color);
+  color: var(--accent-color);
 }
 
 .article-content {
@@ -560,6 +673,17 @@ body.single-col .post-list {
   color: #e96900;
 }
 
+.badge {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+  font-family: monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier;
+  color: #e96900;
+  border: none;
+  display: inline-block;
+}
+
 .article-content blockquote {
   margin: 1.5em 0;
   padding: 0.5rem 1rem;
@@ -744,14 +868,55 @@ body.single-col .post-list {
 
 /* Footer */
 footer {
-  padding: 2rem 0;
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--text-muted);
-  border-top: 1px solid var(--border-color);
+  position: relative;
+  background-color: #000;
+  padding-bottom: 1.5rem;
   margin-top: 4rem;
 }
 
+footer .container {
+  display: flex;
+}
+
+footer section {
+  flex: 1;
+  position: relative;
+  margin: 1rem 0.5rem 0 0.5rem;
+}
+
+footer section:nth-child(2) {
+  text-align: right;
+}
+
+footer section, footer section * {
+  color: #ddd;
+  font-weight: 300;
+  text-decoration: none;
+}
+
+footer section p {
+  line-height: 1.5;
+  margin: 0.5rem 0;
+  font-size: 16px;
+}
+
+footer section p:first-child {
+  margin-top: 1rem;
+}
+
+@media screen and (max-width: 767px) {
+  footer .container {
+    flex-direction: column;
+  }
+  footer section:nth-child(2) {
+    margin-top: 0.5rem;
+    text-align: left;
+  }
+  footer section:nth-child(2) p:nth-child(1) {
+    margin-top: 0;
+  }
+}
+
 /* Floating Controllers */
 #ctrler-panel {
   position: fixed;
@@ -760,6 +925,7 @@ footer {
   z-index: 100;
   display: flex;
   flex-direction: column;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .ctrler-item a {
@@ -768,8 +934,8 @@ footer {
   justify-content: center;
   width: 40px;
   height: 40px;
-  background-color: var(--header-bg);
-  color: #fff;
+  background-color: #111;
+  color: #cececf;
   transition: 0.3s;
 }
 
@@ -916,13 +1082,22 @@ footer {
 
 /* 主体偏移 */
 @media screen and (min-width: 1199.5px) {
-    div.contents-wrap {
-        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    div.contents-wrap,
+    .header nav,
+    footer,
+    footer .container.wide {
+        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }
     
-    .sidebar-show div.contents-wrap {
+    .sidebar-show div.contents-wrap,
+    .sidebar-show .header nav,
+    .sidebar-show footer {
         transform: translateX(-140px);
     }
+
+    .sidebar-show footer .container.wide {
+        max-width: 860px;
+    }
 }
 
 @media screen and (max-width: 1199.5px) {
@@ -938,21 +1113,22 @@ footer {
     bottom: calc(1.5rem + 40px); /* Exactly above the go-top button */
     width: 40px;
     height: 40px;
-    background-color: var(--header-bg);
+    background-color: #111;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     z-index: 101;
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    color: #fff;
+    color: #cececf;
 }
 
 #toggle-toc:hover {
     background-color: var(--accent-color);
 }
 
-#toggle-toc svg {
+#toggle-toc svg,
+.ctrler-item svg {
     width: 20px;
     height: 20px;
     transition: transform 0.3s;
@@ -963,7 +1139,39 @@ footer {
 }
 
 @media screen and (min-width: 1199.5px) {
-    .sidebar-show #toggle-toc {
+    .sidebar-show #toggle-toc,
+    .sidebar-show #ctrler-panel {
         right: 300px;
     }
 }
+
+/* Tags Styling (VOID style) */
+.tags {
+    margin: 1.5rem 0;
+    padding-top: 1.125rem;
+    padding-bottom: calc(1.125rem - 5px);
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.tags .tag-item {
+    font-size: 15px;
+    font-family: 'Open Sans', var(--font-sans);
+    margin-right: 12px;
+    margin-bottom: 5px;
+    display: inline-block;
+    border: none !important;
+    opacity: 0.6;
+    text-decoration: none;
+    color: var(--text-color);
+    transition: opacity 0.3s;
+}
+
+.tags .tag-item:hover {
+    opacity: 1;
+}
+
+.tags .tag-item::before {
+    content: "#";
+    margin-right: 2px;
+}

src/routes/+layout.svelte

@@ -31,13 +31,17 @@
 	<title>BlogFlare - A Pure Cloudflare Blog</title>
 </svelte:head>
 
+{#if $page.url.pathname.startsWith('/admin')}
+	{@render children()}
+{:else}
 	<header class="header {scrolled ? 'scrolled' : ''}">
-	<div class="container">
+		<div class="container wide">
 			<a href="/" class="brand">BlogFlare</a>
 			<nav>
-			<a href="/">首页</a>
-			<a href="/about">关于</a>
-			<a href="/admin">后台</a>
+				<a href="/" class={$page.url.pathname === '/' ? 'active' : ''}>首页</a>
+				<a href="/archive" class={$page.url.pathname.startsWith('/posts') || $page.url.pathname.startsWith('/archive') ? 'active' : ''}>文章</a>
+				<a href="/about" class={$page.url.pathname.startsWith('/about') ? 'active' : ''}>关于</a>
+				<a href="/admin" class={$page.url.pathname.startsWith('/admin') ? 'active' : ''}>后台</a>
 			</nav>
 		</div>
 	</header>
@@ -52,7 +56,7 @@
 	</div>
 	{/if}
 
-<main id="pjax-container" style="padding-top: {$page.url.pathname === '/' ? '30px' : '100px'}">
+	<main id="pjax-container" style="padding-top: {$page.url.pathname === '/' ? '30px' : '58px'}">
 		<div class="wrapper container wide">
 			{@render children()}
 		</div>
@@ -75,7 +79,8 @@
 	<aside id="ctrler-panel">
 		<div class="ctrler-item" title="返回顶部">
 			<a href="javascript:void(0);" onclick={scrollToTop}>
-			<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+				<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16"><path fill="currentColor" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>
 			</a>
 		</div>
 	</aside>
+{/if}