Explorar o código

refactor(hugo): 重构为植物学研究手稿风格

Daily Deploy Bot hai 16 horas
pai
achega
3218c7b4f1
Modificáronse 2 ficheiros con 130 adicións e 93 borrados
  1. 4 0
      site/layouts/_default/baseof.html
  2. 126 93
      site/static/css/site.css

+ 4 - 0
site/layouts/_default/baseof.html

@@ -8,6 +8,10 @@
   <link rel="stylesheet" href="{{ "css/site.css" | relURL }}">
   <link rel="icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
   <link rel="apple-touch-icon" href="{{ "logo.png" | relURL }}">
+  <!-- 学术手稿字体 -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap" rel="stylesheet">
 </head>
 <body>
   <header class="site-header">

+ 126 - 93
site/static/css/site.css

@@ -1,52 +1,50 @@
 :root {
-  /* Botanical academic palette: 优雅复古 + 清新自然 */
-  --bg: #f6f3ee;
-  --panel: #fbf9f6;
-  --panel-soft: #f1ece5;
-  --text: #2f312d;
-  --muted: #6f7168;
-
-  /* 主强调色:植物绿 */
-  --accent: #426b57;
-  --accent-hover: #355746;
-  --accent-soft: #dce8df;
-
-  /* 次级色:雾灰绿 */
-  --accent-2: #8ca395;
-
-  /* 复古暖调 */
-  --warm: #a07c64;
-  --warm-soft: #efe5da;
-
-  --border: rgba(47, 49, 45, 0.08);
-  --shadow: 0 6px 20px rgba(47, 49, 45, 0.05);
-
-  /* 替换原来的 rose / blue 系 */
-  --hero-bg: #ece4da;
-  --hero-tint: #f3ede5;
-  --list-highlight: #e5efe8;
-  --tag-bg: #eef4ef;
-  --tag-border: #d4e2d7;
-}
-
-/* 复古纸张纹理 + 植物底纹 */
+  /* 植物学研究手稿风格 */
+  /* 主背景:浅米色纸张质感 */
+  --bg: #f9f7f1;
+  --panel: #fcfaf5;
+  --panel-soft: #f2efe6;
+  
+  /* 文字色:墨灰(不是纯黑) */
+  --text: #3a3832;
+  --muted: #7a7870;
+  
+  /* 植物绿:鼠尾草绿(低饱和) */
+  --accent: #5c7560;
+  --accent-hover: #4a5e4b;
+  --accent-light: #e8ece6;
+  
+  /* 辅助色:暖棕(不是蓝色/紫色) */
+  --warm: #8b7355;
+  --warm-soft: #f0e8dc;
+  
+  /* 边框和阴影:极淡 */
+  --border: rgba(58, 56, 50, 0.06);
+  --shadow: 0 2px 8px rgba(58, 56, 50, 0.03);
+  
+  /* Hero 和卡片 */
+  --hero-bg: #fcfaf5;
+  --list-accent: #eef2ee;
+}
+
+/* 植物学研究手稿风格背景 */
 body {
   margin: 0;
   background-color: var(--bg);
+  /* 纸张质感纹理 */
   background-image:
-    /* 角落晕影 */
-    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;
+    /* 角落淡色晕影(不在中心) */
+    radial-gradient(circle at 0% 0%, rgba(139, 115, 85, 0.04) 0%, transparent 50%),
+    radial-gradient(circle at 100% 0%, rgba(139, 115, 85, 0.03) 0%, transparent 50%),
+    radial-gradient(circle at 0% 100%, rgba(139, 115, 85, 0.03) 0%, transparent 50%),
+    radial-gradient(circle at 100% 100%, rgba(139, 115, 85, 0.04) 0%, transparent 50%),
+    /* 极淡的纸张纤维纹理 */
+    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, rgba(58, 56, 50, 0.01) 2px, rgba(58, 56, 50, 0.01) 4px),
+    /* 植物学研究手稿风格 - 角落装饰 */
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%235c7560' stroke-width='0.5' stroke-opacity='0.08'%3E%3Cpath d='M50 50 Q80 30 100 60 T140 80'/%3E%3Cpath d='M55 55 Q75 40 90 65 T130 75'/%3E%3Cpath d='M540 50 Q510 30 490 60 T450 80'/%3E%3Cpath d='M535 55 Q515 40 500 65 T460 75'/%3E%3Cpath d='M50 550 Q80 570 100 540 T140 520'/%3E%3Cpath d='M55 545 Q75 560 90 535 T130 525'/%3E%3Cpath d='M540 550 Q510 570 490 540 T450 520'/%3E%3Cpath d='M535 545 Q515 560 500 535 T460 525'/%3E%3C/g%3E%3Cg fill='%235c7560' stroke='none' opacity='0.04'%3E%3Cpath d='M20 200 Q40 180 60 200 T80 240 Q60 260 40 240 T20 200'/%3E%3Cpath d='M580 200 Q560 180 540 200 T520 240 Q540 260 560 240 T580 200'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: 600px 600px, 4px 4px, 800px 800px;
+  background-position: center, center, center;
+  background-attachment: local, local, fixed;
 }
 
 * { box-sizing: border-box; }
@@ -96,12 +94,11 @@ a:hover {
   display: flex;
   align-items: center;
   gap: 12px;
-  font-family: "Noto Serif SC", "Source Han Serif CN", "Songti SC", "SimSun", serif;
-  font-size: 1.8rem;
-  font-weight: 700;
+  font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
+  font-size: 1.9rem;
+  font-weight: 600;
   color: var(--text);
-  letter-spacing: -0.02em;
-  text-shadow: 1px 1px 0 rgba(160, 124, 100, 0.08);
+  letter-spacing: -0.01em;
 }
 
 .site-title a {
@@ -114,15 +111,21 @@ a:hover {
 
 .site-title a:hover {
   color: var(--accent);
-  text-shadow: 1px 2px 6px rgba(66, 107, 87, 0.12);
+}
+
+.site-tagline {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 400;
 }
 
 .site-logo {
-  width: 64px;
-  height: 64px;
+  width: 56px;
+  height: 56px;
   border-radius: 50%;
   object-fit: cover;
-  box-shadow: 0 2px 10px rgba(66, 107, 87, 0.08);
+  border: 2px solid var(--border);
 }
 
 .site-tagline {
@@ -240,17 +243,38 @@ main.wrap {
 .card {
   background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: 18px;
+  border-radius: 12px;
   padding: 24px;
   box-shadow: var(--shadow);
+  transition: border-color 0.2s ease;
+}
+
+.card:hover {
+  border-color: rgba(92, 117, 96, 0.15);
 }
 
 .hero {
-  padding: 28px 24px;
-  margin-bottom: 24px;
-  background: linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-tint) 100%);
-  border: 1px solid rgba(160, 124, 100, 0.12);
-  border-radius: 18px;
+  padding: 32px 28px;
+  margin-bottom: 28px;
+  background: var(--hero-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+
+.hero h1 {
+  font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0 0 8px;
+  color: var(--text);
+  letter-spacing: -0.02em;
+}
+
+.hero p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.6;
 }
 
 .hero h1 {
@@ -296,13 +320,14 @@ main.wrap {
 .post-item h3 {
   margin-top: 0;
   color: var(--text);
-  font-family: "Noto Serif SC", "Source Han Serif CN", "Songti SC", "SimSun", serif;
+  font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
   font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
-.section-card h2 { font-size: 1.2rem; }
+.section-card h2 { font-size: 1.25rem; }
 .post-item h2 { font-size: 1.15rem; }
-.post-item h3 { font-size: 1.05rem; }
+.post-item h3 { font-size: 1.1rem; }
 
 .section-head {
   display: flex;
@@ -310,42 +335,41 @@ main.wrap {
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
 }
 
 .section-head h2 {
-  font-family: "Noto Serif SC", "Source Han Serif CN", "Songti SC", "SimSun", serif;
-  font-size: 1.2rem;
+  font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
+  font-size: 1.3rem;
   font-weight: 600;
   margin: 0;
+  color: var(--text);
+  letter-spacing: -0.01em;
 }
 
 .post-list {
   display: grid;
-  gap: 16px;
-}
-
-/* section-card 与 post-list 之间留间距 */
-.post-list {
-  margin-top: 12px;
+  gap: 14px;
+  margin-top: 16px;
 }
 
 .post-item {
   background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: 18px;
+  border-radius: 10px;
   padding: 20px;
-  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
+  transition: all 0.2s ease;
 }
 
 .post-item:hover {
-  transform: translateY(-1px);
-  border-color: rgba(66, 107, 87, 0.14);
+  border-color: rgba(92, 117, 96, 0.2);
+  box-shadow: var(--shadow);
 }
 
-/* 只高亮第一个 */
+/* 第一个项目用淡色背景 */
 .post-item:first-child {
-  background: var(--list-highlight);
-  border-color: rgba(66, 107, 87, 0.14);
+  background: var(--list-accent);
 }
 
 .meta {
@@ -355,10 +379,11 @@ main.wrap {
 
 .article h1 {
   margin-bottom: 12px;
-  font-family: "Noto Serif SC", "Source Han Serif CN", "Songti SC", "SimSun", serif;
-  font-size: 1.8rem;
-  letter-spacing: -0.03em;
-  font-weight: 700;
+  font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
+  font-size: 2rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+  color: var(--text);
 }
 
 .article h2,
@@ -366,13 +391,15 @@ main.wrap {
 .article h4,
 .article h5,
 .article h6 {
-  font-family: "Noto Serif SC", "Source Han Serif CN", "Songti SC", "SimSun", serif;
+  font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
   font-weight: 600;
-  margin-top: 1.5em;
+  margin-top: 1.8em;
+  color: var(--text);
+  letter-spacing: -0.01em;
 }
 
-.article h2 { font-size: 1.4rem; }
-.article h3 { font-size: 1.2rem; }
+.article h2 { font-size: 1.5rem; }
+.article h3 { font-size: 1.3rem; }
 
 .prose :first-child {
   margin-top: 0;
@@ -417,19 +444,20 @@ main.wrap {
 
 .tag {
   display: inline-flex;
-  padding: 5px 11px;
-  border-radius: 999px;
-  background: var(--tag-bg);
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: var(--panel-soft);
   color: var(--accent);
-  font-size: 0.85rem;
-  border: 1px solid var(--tag-border);
+  font-size: 0.8rem;
+  border: 1px solid var(--border);
   font-weight: 500;
+  font-family: "PingFang SC", sans-serif;
 }
 
 .tag:first-child {
-  background: var(--warm-soft);
-  border-color: rgba(160, 124, 100, 0.18);
-  color: var(--warm);
+  background: var(--accent-light);
+  border-color: rgba(92, 117, 96, 0.12);
+  color: var(--accent);
 }
 
 .site-footer {
@@ -493,4 +521,9 @@ main.wrap {
     width: 40px;
     height: 40px;
   }
+  
+  .site-nav a {
+    font-size: 0.9rem;
+    padding: 10px 0;
+  }
 }