From 48b656c949000ec88d6e46afbdb8d2d6adf10d70 Mon Sep 17 00:00:00 2001
From: Verdant <i@glowisle.me>
Date: Sat, 28 Mar 2026 15:47:16 +0800
Subject: style: refactor CSS style

---
 hugo.toml                            |  36 +---------
 layouts/archives/single.html         | 125 ++++++++++++++++++++++++++---------
 layouts/partials/style.html          |  74 +++++++++------------
 layouts/shortcodes/recent-posts.html |  17 +++--
 4 files changed, 140 insertions(+), 112 deletions(-)

diff --git a/hugo.toml b/hugo.toml
index d62a255..6dd4800 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -59,11 +59,7 @@ tabWidth = 4
         name = "归档"
         url = "/archives/"
         weight = 4
-    [[languages.zh-cn.menu.main]]
-        name = "书单"
-        url = "/readings/"
- 	weight = 5
-    [[languages.zh-cn.menu.main]]
+   [[languages.zh-cn.menu.main]]
         name = "关于"
         url = "/about/"
         weight = 6
@@ -93,41 +89,13 @@ tabWidth = 4
         name = "About"
         url = "/about/"
         weight = 6
-
-# [menu]
-
-# [[menu.main]]
-#     name = "分类"
-#     url = "/categories/"
-#     weight = 2
-
-# [[menu.main]]
-#     name = "友人"
-#     url = "/links/"
-#     weight = 3
-
-# [[menu.main]]
-#     name = "归档"
-#     url = "/archives"
-#     weight = 3
-
-# [[menu.main]]
-#     name = "书单"
-#     url = "/readings"
-#     weight = 3
-
-# [[menu.main]]
-#     name = "关于"
-#     url = "/about"
-#     weight = 6
-
 [params]
 	upvote = true
     upvoteURL = "https://upvote.glowisle.me/"
 	description = "关于互联网、书籍、生活琐事以及那些一闪而过的念头。计算机技术 & 读书感悟 & 日常随笔。映屿(GlowIsle)"
 	postSearch = false
 	groupByYear = true
-	toc = true
+	toc = false
 	showPostCount = true
 	favicon = "/favicon.png"
     hideMadeWithLine = true
diff --git a/layouts/archives/single.html b/layouts/archives/single.html
index efafdca..be44c9f 100644
--- a/layouts/archives/single.html
+++ b/layouts/archives/single.html
@@ -1,42 +1,107 @@
 {{ define "main" }}
-<header>{{- partial "header.html" . -}}</header>
+<header>
+{{- partial "header.html" . -}}
+</header>
 <content>
+  {{ if .Data.Singular }}
+  <h3 style="margin-bottom:0">Filtering for "{{ .Title }}"</h3>
+  <small>
+    <a href="{{ "blog" | relURL }}">Remove filter</a>
+  </small>
+  {{ end }}
+
+  {{ if .Site.Params.postSearch }}
+  <input id="search-input" type="text" placeholder="Search..." style="margin-top: 16px" />
+  <script>
+    // 等待 DOM 完全加载后执行
+    document.addEventListener('DOMContentLoaded', function () {
+      // 缓存 DOM 元素
+      const searchInput = document.getElementById('search-input');
+      const posts = document.querySelectorAll('.blog-posts li');
+      const years = document.querySelectorAll('.blog-posts h3');
+
+      // 更新搜索结果
+      function updateSearchResults(searchTerm) {
+        let visiblePosts = 0;
+        const displayedYears = new Set();
+        posts.forEach(function (post) {
+          const title = post.querySelector('a').textContent.toLowerCase();
+          const year = post.querySelector('time').getAttribute('datetime').split('-')[0];
+          if (title.includes(searchTerm)) {
+            post.style.display = '';
+            visiblePosts++;
+            displayedYears.add(year);
+          } else {
+            post.style.display = 'none';
+          }
+        });
+
+        {{ if .Site.Params.groupByYear }}
+        years.forEach(function (y) {
+          const year = y.textContent;
+          y.style.display = displayedYears.has(year) ? '' : 'none';
+        });
+        {{ end }}
+
+        {{ if .Site.Params.showPostCount }}
+        const countText = `There ${visiblePosts <= 1 ? `is ${visiblePosts} piece.` : `are ${visiblePosts} pieces.`}`;
+        document.getElementById('post-count').innerHTML = countText;
+        {{ end }}
+      }
+
+      searchInput.addEventListener('input', function () {
+        updateSearchResults(this.value.toLowerCase().trim());
+      });
+    });
+  </script>
+  {{ end }}
+
   {{ $allPosts := where .Site.RegularPages "Type" "eq" "posts" }}
   {{ $excludePosts := where $allPosts "Params.categories" "intersect" (slice "1") }}
-  {{ $postPages := $allPosts | complement $excludePosts }}
+  {{ $postPages := ($allPosts | complement $excludePosts) }}
 
   {{ if .Site.Params.showPostCount }}
-  <p id="post-count">共 {{ len $postPages }} 篇文章</p>
+  <p id="post-count">There {{ if le (len $postPages) 1 }} is {{ len $postPages }} piece. {{ else }} are {{ len $postPages }} pieces. {{ end }}</p>
   {{ end }}
 
-  <div class="blog-posts">
-    {{ if gt (len $postPages) 0 }}
-      {{ range $postPages.GroupByDate "2006" }}
-      <details>
-        <summary>
-          <p style="display: inline;">{{ .Key }} 年 ({{ len .Pages }})</p>
-        </summary>
-        
-        <ul>
-          {{ range .Pages }}
-          <li>
-            <span>
-              <i>
-                <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
-                  {{ .Date.Format (default "2006-01-02" $.Site.Params.dateFormat) }}
-                </time>
-              </i>
-            </span>
-            <a href="{{ .Permalink }}">{{ .Title }}</a>
-          </li>
-          {{ end }}
-        </ul>
-      </details>
+  <ul class="blog-posts">
+    {{ $currentYear := 0 }}
+    {{ range $postPages }}
+      {{ if .Site.Params.groupByYear }}
+        {{ $year := .Date.Year }}
+        {{ if ne $year $currentYear }}
+          <h3>{{ $year }}</h3>
+          {{ $currentYear = $year }}
+        {{ end }}
       {{ end }}
+      <li>
+        <span class="{{ if .Site.Params.groupByYear }} grouped {{ else }} ungrouped {{ end }}">
+          <i>
+            <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
+              {{ if .Site.Params.groupByYear }}
+                {{ .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }}
+              {{ else }}
+                {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
+              {{ end }}
+            </time>
+          </i>
+        </span>
+        <a href="{{ .Permalink }}">{{ .Title }}</a>
+      </li>
     {{ else }}
-      <p>暂无文章</p>
+      <li>No posts yet</li>
     {{ end }}
-  </div>
+  </ul>
+
+  {{ if .Data.Singular }}
+  {{ else }}
+  <small>
+    <div>
+      {{ range .Site.Taxonomies.tags }}
+        <a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a>&nbsp;
+      {{ end }}
+    </div>
+  </small>
+  {{ end }}
 </content>
-<hr />
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/layouts/partials/style.html b/layouts/partials/style.html
index 4b29810..1297f6d 100644
--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@@ -1,10 +1,10 @@
 <style>
 
 :root {
-    --width-max: 720px;
+    --width-max: 550px;
     --font-secondary: monospace;
-    --font-size-primary: 1.1rem;
-    --font-size-secondary: .83rem;
+    --font-size-primary: 1rem;
+    --font-size-secondary: .93rem;
     --body-bg-color: #fbfbf6;
     --bold-text-color: #222;
     --body-text-color: #444;
@@ -25,11 +25,24 @@
     --music-bg-light: rgba(229, 229, 229, 0.5);
     --music-text-secondary: #666;
     --music-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    --summary-text-color: #4e4e4e;
+    --summary-text-color: #706c6c;
     --svg-size: 0.85em;
     --title-color: #444444;
 }
 
+.recent-title {
+    font-weight: 700;
+    border: none;
+}
+
+.recent-date {
+    display: block;
+}
+
+summary p{
+    color: var(--summary-text-color);
+}
+
 :is(article, .summary) p:not(.music-card *) {
     margin-top: 1.6rem;
 }
@@ -39,7 +52,8 @@
 .e-content h4, 
 .e-content h5,
 .e-content h6 {
-    font-weight: 400;
+    font-weight: 800;
+
 }
 
 h1, h2 {
@@ -110,7 +124,7 @@ body {
 
 p {
     line-height: 2;
-    font-weight: 350;
+    font-weight: inherit;
 }
 
 div.summary {
@@ -122,10 +136,9 @@ div.summary p {
 }
 
 a {
-    color: var(--link-color);
-    cursor: pointer;
-    text-decoration: none;
-    transition-duration: 0.3s;
+  text-decoration: none;
+  border-bottom: 1px dotted;
+  color: var(--body-text-color) !important;
 }
 
 strong, b {
@@ -172,6 +185,7 @@ a.title h1 {
 
 nav a {
   margin-right: 8px;
+  border: none;
 }
 
 footer {
@@ -184,16 +198,12 @@ footer {
     margin: 0 0 120px 0;
 }
 
-.recent-list {
-    padding-left: 2vw;
+.recent-item {
+    margin-bottom: 4rem;
 }
 
-.recent-item {
-    position: relative;
-    margin-bottom: 8px;
-    display: flex;
-    align-items: flex-start;
-    list-style-type: none;
+.recent-list {
+    padding-left: 2vw;
 }
 
 <!-- .item-link { -->
@@ -211,6 +221,7 @@ footer {
 
 .post-title a.item-link {
 font-size: 1.8rem;
+border: none;
 }
 
 h1.post-title {
@@ -246,22 +257,6 @@ ul.blog-posts li {
     margin-bottom: 8px;
 }
 
-ul.blog-posts li a {
-    margin-left: 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: none !important;
-}
-
-ul.blog-posts li a:hover {
-    text-decoration: underline 0.5px !important;
-}
-
-ul.blog-posts li a:visited {
-    color: var(--link-visited-color);
-}
-
 ul.blog-posts li span {
     flex: 0 0 130px;
 }
@@ -621,7 +616,7 @@ ul li:has(input) {
 @media (prefers-color-scheme: dark) {
     :root {
         --summary-text-color: #c9c6c5;
-        --body-bg-color: #121212;
+        --body-bg-color: #262624;
         --bold-text-color: #eee;
         --body-text-color: #e8e6e3;
         --text-color-tertiary: #a0a0a0;
@@ -641,6 +636,7 @@ ul li:has(input) {
         --music-bg-dark: rgba(82, 82, 82, 0.5);
         --music-text-secondary: #a3a3a3;
         --color-background: var(--body-bg-color) !important;
+        --summary-text-color: #a2a2a2;
     }
 
     a {
@@ -653,10 +649,6 @@ h3.recent-post-title a {
 color: var(--body-text-color);
 }
 
-    a:hover {
-        text-decoration: underline;
-    }
-
     .post-meta-item svg {
         filter: invert(1) hue-rotate(180deg);
     }
@@ -713,9 +705,7 @@ color: var(--body-text-color);
         border: 1px solid #414141 !important;
     }
 
-    a {
-        font-weight: 500 !important;
-    }
+    
 }
 
 @media (min-width: 768px) {
diff --git a/layouts/shortcodes/recent-posts.html b/layouts/shortcodes/recent-posts.html
index ce5fba0..5c209f1 100644
--- a/layouts/shortcodes/recent-posts.html
+++ b/layouts/shortcodes/recent-posts.html
@@ -8,12 +8,11 @@
     padding: 0;
   }
   .recent-list li {
-    margin-bottom: 0.5em;
-    line-height: 1.4;
+    margin-bottom: 8px;
   }
   .recent-date {
     font-family: monospace;
-    margin-right: 1.5em;
+    margin-right: 10px;
     white-space: nowrap;
   }
   .recent-title {
@@ -46,14 +45,20 @@
 </style>
 
 <div class="recent-posts">
-  <h2>最近更新</h2>
   {{ if $recent }}
   <ul class="recent-list">
     {{ range $recent }}
-    <li>
+    <div class="recent-item">
+      <li>
       <span class="recent-date">{{ .Date.Format "2006-01-02" }}</span>
       <a href="{{ .RelPermalink }}" class="recent-title">{{ .Title }}</a>
-    </li>
+      </li>
+
+      <summary>
+	{{ .Summary }}
+      </summary>
+
+      </div>
     {{ end }}
   </ul>
   {{ else }}
-- 
cgit v1.2.3