refactor: 优化文章系列导航组件的样式与布局

src/routes/posts/[slug]/+page.svelte

@@ -88,15 +88,15 @@
 			{/if}
 
 			{#if data.series && data.seriesPosts.length > 0}
-				<details class="series-navigation" open>
+				<details class="series-nav" open>
 					<summary class="series-title" id="series-navigation-title">
 						<span
 							>{$page.data.aliases?.series || '系列'} -
 							<a href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a
 							></span
 						>
+						<span class="details-icon">
 							<svg
-							class="details-icon"
 								aria-hidden="true"
 								focusable="false"
 								role="img"
@@ -109,13 +109,15 @@
 									d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
 								></path></svg
 							>
+						</span>
 					</summary>
 					<div class="series-content">
-						<ol>
+						<nav>
+							<ul>
 								{#each data.seriesPosts as seriesPost (seriesPost.id)}
 									<li class:current={seriesPost.id === data.post.id}>
 										{#if seriesPost.id === data.post.id}
-										<span aria-current="page">{seriesPost.title}</span>
+											<span class="active" aria-current="page">{seriesPost.title}</span>
 										{:else}
 											<a href={resolve('/posts/[slug]', { slug: seriesPost.slug })}
 												>{seriesPost.title}</a
@@ -123,9 +125,9 @@
 										{/if}
 									</li>
 								{/each}
-						</ol>
+							</ul>
 							{#if previousSeriesPost || nextSeriesPost}
-							<nav class="series-prev-next" aria-label="系列文章翻页">
+								<div class="series-prev-next" aria-label="系列文章翻页">
 									{#if previousSeriesPost}
 										<a href={resolve('/posts/[slug]', { slug: previousSeriesPost.slug })}
 											>← {previousSeriesPost.title}</a
@@ -136,8 +138,9 @@
 											>{nextSeriesPost.title} →</a
 										>
 									{/if}
-							</nav>
+								</div>
 							{/if}
+						</nav>
 					</div>
 				</details>
 			{/if}
@@ -185,102 +188,118 @@
 </main>
 
 <style>
-	.series-navigation {
+	.series-nav {
-		margin: 1.5rem 0;
+		margin: 0.8rem 0;
 		border-radius: 4px;
 		overflow: hidden;
-		border: 1px solid var(--border-color);
 	}
 
-	.series-navigation .series-title {
+	.series-nav .series-title {
+		font-size: 1.15rem;
+		font-weight: bold;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0.75rem 1rem;
+		line-height: 2em;
-		background: rgba(0, 0, 0, 0.05);
+		padding: 0 0.75rem;
-		font-weight: 600;
+		background-color: rgba(0, 0, 0, 0.05);
 		cursor: pointer;
 		list-style: none;
 		user-select: none;
+		transition: background-color 0.3s;
 	}
 
-	.series-navigation .series-title::-webkit-details-marker {
+	.series-nav[open] .series-title {
+		background-color: rgba(0, 0, 0, 0.08);
+	}
+
+	.series-nav .series-title::-webkit-details-marker {
 		display: none;
 	}
 
-	.series-navigation .details-icon {
+	.series-nav .details-icon {
 		transition: transform 0.3s;
+		display: flex;
+		align-items: center;
 	}
 
-	.series-navigation[open] .details-icon {
+	.series-nav[open] .details-icon {
 		transform: rotate(90deg);
 	}
 
-	.series-navigation .series-title a,
+	.series-nav .series-title a,
-	.series-navigation li a,
+	.series-nav li a,
-	.series-prev-next a {
+	.series-nav .series-prev-next a {
 		color: var(--text-color);
 		text-decoration: none;
 	}
 
-	.series-navigation .series-title a:hover,
+	.series-nav .series-title a:hover,
-	.series-navigation li a:hover,
+	.series-nav li a:hover,
-	.series-prev-next a:hover {
+	.series-nav .series-prev-next a:hover {
 		color: var(--accent-color, #419b38);
 	}
 
-	.series-navigation .series-content {
+	.series-nav .series-content {
-		padding: 1rem;
+		font-size: 1rem;
-		background: rgba(0, 0, 0, 0.015);
+		background-color: rgba(0, 0, 0, 0.02);
 	}
 
-	.series-navigation ol {
+	.series-nav .series-content > nav > ul {
 		margin: 0;
-		padding: 0 0 0 1.5rem;
+		padding: 0.4rem 1rem 0.4rem 1.8rem;
-		list-style-type: none;
+		list-style: none;
+		text-indent: -0.85rem;
 	}
 
-	.series-navigation li {
+	.series-nav li {
-		padding: 0.35rem 0;
+		padding: 0;
-		position: relative;
+		line-height: 1.8;
+		padding-left: 0.8rem;
 	}
 
-	.series-navigation li::before {
+	.series-nav li a::before {
 		content: '|';
-		position: absolute;
+		font-weight: bolder;
-		left: -1rem;
+		margin-right: 0.5rem;
-		color: var(--border-color);
+		color: var(--text-color);
-		font-weight: bold;
+		opacity: 0.6;
 	}
 
-	.series-navigation li.current {
+	.series-nav li span.active {
-		font-weight: 700;
+		font-weight: bolder;
+		color: var(--text-color);
+	}
+
+	.series-nav li span.active::before {
+		content: '|';
+		font-weight: bolder;
+		margin-right: 0.5rem;
 		color: var(--accent-color, #419b38);
 	}
 
-	.series-navigation li.current::before {
+	.series-nav li a:hover::before {
 		color: var(--accent-color, #419b38);
 	}
 
-	.series-prev-next {
+	.series-nav .series-prev-next {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
-		margin-top: 1rem;
+		padding: 0.8rem 1rem;
-		padding-top: 1rem;
 		border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.12));
 		font-size: 0.9em;
 	}
 
-	.series-prev-next a:last-child {
+	.series-nav .series-prev-next a:last-child {
 		text-align: right;
 	}
 
 	@media (max-width: 640px) {
-		.series-prev-next {
+		.series-nav .series-prev-next {
 			grid-template-columns: 1fr;
 		}
-		.series-prev-next a:last-child {
+		.series-nav .series-prev-next a:last-child {
 			text-align: left;
 		}
 	}