feat(hugo): 修复植物底纹，添加移动端可折叠导航

site/layouts/_default/baseof.html

@@ -19,6 +19,11 @@
         </a>
         <p class="site-tagline">{{ .Site.Params.description }}</p>
       </div>
+      <button class="menu-toggle" aria-label="菜单" aria-expanded="false">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
       <nav class="site-nav">
         {{ range .Site.Menus.main }}
           <a href="{{ .URL }}">{{ .Name }}</a>
@@ -34,5 +39,18 @@
   <footer class="site-footer wrap">
     <p>© {{ now.Format "2006" }} {{ .Site.Params.owner }} · Hugo personal site for AI briefs / blog / resume.</p>
   </footer>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const toggle = document.querySelector('.menu-toggle');
+      const nav = document.querySelector('.site-nav');
+
+      toggle.addEventListener('click', function() {
+        const isActive = toggle.classList.toggle('active');
+        nav.classList.toggle('active');
+        toggle.setAttribute('aria-expanded', isActive);
+      });
+    });
+  </script>
 </body>
 </html>

site/static/css/site.css

@@ -29,18 +29,29 @@
   --tag-border: #d4e2d7;
 }
 
-/* 复古纸张纹理 */
+/* 复古纸张纹理 + 植物底纹 */
 body {
+  margin: 0;
+  background-color: var(--bg);
   background-image:
-    radial-gradient(circle at 50% 0%, rgba(160, 124, 100, 0.03) 0%, transparent 50%),
-    radial-gradient(circle at 0% 100%, rgba(160, 124, 100, 0.03) 0%, transparent 50%),
-    repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(160, 124, 100, 0.02) 2px, rgba(160, 124, 100, 0.02) 4px);
+    /* 角落晕影 */
+    radial-gradient(circle at 0% 0%, rgba(160, 124, 100, 0.03) 0%, transparent 40%),
+    radial-gradient(circle at 100% 0%, rgba(160, 124, 100, 0.03) 0%, transparent 40%),
+    radial-gradient(circle at 0% 100%, rgba(160, 124, 100, 0.03) 0%, transparent 40%),
+    radial-gradient(circle at 100% 100%, rgba(160, 124, 100, 0.03) 0%, transparent 40%),
+    /* 纸张纹理 */
+    repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(160, 124, 100, 0.02) 2px, rgba(160, 124, 100, 0.02) 4px),
+    /* 植物底纹 - 叶片形状 */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cg fill='%23426b57' fill-opacity='0.04'%3E%3Cpath d='M400 200c-50-50-100-50-150 0s-50 100 0 150 100 50 150 0 50-100 0-150z'/%3E%3Cpath d='M200 600c-50-50-100-50-150 0s-50 100 0 150 100 50 150 0 50-100 0-150z'/%3E%3Cpath d='M600 600c-50-50-100-50-150 0s-50 100 0 150 100 50 150 0 50-100 0-150z'/%3E%3Cg%3E%3Cpath d='M600 200c-50-50-100-50-150 0s-50 100 0 150 100 50 150 0 50-100 0-150z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-blend-mode: multiply;
+  background-size: 400px 400px;
+  background-position: center;
+  background-attachment: fixed;
 }
 
 * { box-sizing: border-box; }
 
 body {
-  margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
@@ -127,6 +138,38 @@ a:hover {
   flex-wrap: wrap;
 }
 
+/* Hamburger 菜单按钮 */
+.menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  flex-direction: column;
+  gap: 5px;
+  z-index: 100;
+}
+
+.menu-toggle span {
+  display: block;
+  width: 24px;
+  height: 2px;
+  background: var(--text);
+  transition: all 0.3s ease;
+}
+
+.menu-toggle.active span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.menu-toggle.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.menu-toggle.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(5px, -5px);
+}
+
 .site-nav a {
   color: var(--text);
   font-weight: 500;
@@ -154,6 +197,37 @@ a:hover {
   width: 100%;
 }
 
+/* 移动端导航菜单 */
+.mobile-nav {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: rgba(251, 249, 246, 0.98);
+  border-bottom: 1px solid var(--border);
+  padding: 16px 24px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.mobile-nav a {
+  display: block;
+  padding: 12px 0;
+  color: var(--text);
+  font-weight: 500;
+  font-size: 1rem;
+  border-bottom: 1px solid rgba(47, 49, 45, 0.06);
+}
+
+.mobile-nav a:last-child {
+  border-bottom: none;
+}
+
+.mobile-nav a:hover {
+  color: var(--accent);
+}
+
 main.wrap {
   padding: 32px 0 48px;
 }
@@ -366,6 +440,37 @@ main.wrap {
     align-items: flex-start;
   }
 
+  .menu-toggle {
+    display: flex;
+  }
+
+  .site-nav {
+    display: none;
+    width: 100%;
+    flex-direction: column;
+    margin-top: 12px;
+    gap: 0;
+  }
+
+  .site-nav.active {
+    display: flex;
+  }
+
+  .site-nav a {
+    font-size: 0.9rem;
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(47, 49, 45, 0.06);
+    width: 100%;
+  }
+
+  .site-nav a::after {
+    display: none;
+  }
+
+  .site-nav a:hover {
+    background: var(--panel-soft);
+  }
+
   .card,
   .hero {
     padding: 20px;
@@ -383,14 +488,4 @@ main.wrap {
     width: 40px;
     height: 40px;
   }
-
-  .site-nav {
-    width: 100%;
-    margin-top: 12px;
-  }
-
-  .site-nav a {
-    font-size: 0.9rem;
-    padding: 6px 12px 6px 0;
-  }
 }