|
@@ -1,52 +1,50 @@
|
|
|
:root {
|
|
: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 {
|
|
body {
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
background-color: var(--bg);
|
|
background-color: var(--bg);
|
|
|
|
|
+ /* 纸张质感纹理 */
|
|
|
background-image:
|
|
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; }
|
|
* { box-sizing: border-box; }
|
|
@@ -96,12 +94,11 @@ a:hover {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
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);
|
|
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 {
|
|
.site-title a {
|
|
@@ -114,15 +111,21 @@ a:hover {
|
|
|
|
|
|
|
|
.site-title a:hover {
|
|
.site-title a:hover {
|
|
|
color: var(--accent);
|
|
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 {
|
|
.site-logo {
|
|
|
- width: 64px;
|
|
|
|
|
- height: 64px;
|
|
|
|
|
|
|
+ width: 56px;
|
|
|
|
|
+ height: 56px;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
object-fit: cover;
|
|
object-fit: cover;
|
|
|
- box-shadow: 0 2px 10px rgba(66, 107, 87, 0.08);
|
|
|
|
|
|
|
+ border: 2px solid var(--border);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.site-tagline {
|
|
.site-tagline {
|
|
@@ -240,17 +243,38 @@ main.wrap {
|
|
|
.card {
|
|
.card {
|
|
|
background: var(--panel);
|
|
background: var(--panel);
|
|
|
border: 1px solid var(--border);
|
|
border: 1px solid var(--border);
|
|
|
- border-radius: 18px;
|
|
|
|
|
|
|
+ border-radius: 12px;
|
|
|
padding: 24px;
|
|
padding: 24px;
|
|
|
box-shadow: var(--shadow);
|
|
box-shadow: var(--shadow);
|
|
|
|
|
+ transition: border-color 0.2s ease;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.card:hover {
|
|
|
|
|
+ border-color: rgba(92, 117, 96, 0.15);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hero {
|
|
.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 {
|
|
.hero h1 {
|
|
@@ -296,13 +320,14 @@ main.wrap {
|
|
|
.post-item h3 {
|
|
.post-item h3 {
|
|
|
margin-top: 0;
|
|
margin-top: 0;
|
|
|
color: var(--text);
|
|
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;
|
|
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 h2 { font-size: 1.15rem; }
|
|
|
-.post-item h3 { font-size: 1.05rem; }
|
|
|
|
|
|
|
+.post-item h3 { font-size: 1.1rem; }
|
|
|
|
|
|
|
|
.section-head {
|
|
.section-head {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -310,42 +335,41 @@ main.wrap {
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
gap: 16px;
|
|
|
margin-bottom: 16px;
|
|
margin-bottom: 16px;
|
|
|
|
|
+ padding-bottom: 12px;
|
|
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.section-head h2 {
|
|
.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;
|
|
font-weight: 600;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ letter-spacing: -0.01em;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.post-list {
|
|
.post-list {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
- gap: 16px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* section-card 与 post-list 之间留间距 */
|
|
|
|
|
-.post-list {
|
|
|
|
|
- margin-top: 12px;
|
|
|
|
|
|
|
+ gap: 14px;
|
|
|
|
|
+ margin-top: 16px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.post-item {
|
|
.post-item {
|
|
|
background: var(--panel);
|
|
background: var(--panel);
|
|
|
border: 1px solid var(--border);
|
|
border: 1px solid var(--border);
|
|
|
- border-radius: 18px;
|
|
|
|
|
|
|
+ border-radius: 10px;
|
|
|
padding: 20px;
|
|
padding: 20px;
|
|
|
- transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
|
|
|
|
|
|
|
+ transition: all 0.2s ease;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.post-item:hover {
|
|
.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 {
|
|
.post-item:first-child {
|
|
|
- background: var(--list-highlight);
|
|
|
|
|
- border-color: rgba(66, 107, 87, 0.14);
|
|
|
|
|
|
|
+ background: var(--list-accent);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.meta {
|
|
.meta {
|
|
@@ -355,10 +379,11 @@ main.wrap {
|
|
|
|
|
|
|
|
.article h1 {
|
|
.article h1 {
|
|
|
margin-bottom: 12px;
|
|
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,
|
|
.article h2,
|
|
@@ -366,13 +391,15 @@ main.wrap {
|
|
|
.article h4,
|
|
.article h4,
|
|
|
.article h5,
|
|
.article h5,
|
|
|
.article h6 {
|
|
.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;
|
|
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 {
|
|
.prose :first-child {
|
|
|
margin-top: 0;
|
|
margin-top: 0;
|
|
@@ -417,19 +444,20 @@ main.wrap {
|
|
|
|
|
|
|
|
.tag {
|
|
.tag {
|
|
|
display: inline-flex;
|
|
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);
|
|
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-weight: 500;
|
|
|
|
|
+ font-family: "PingFang SC", sans-serif;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tag:first-child {
|
|
.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 {
|
|
.site-footer {
|
|
@@ -493,4 +521,9 @@ main.wrap {
|
|
|
width: 40px;
|
|
width: 40px;
|
|
|
height: 40px;
|
|
height: 40px;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .site-nav a {
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ padding: 10px 0;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|