|
|
@@ -0,0 +1,938 @@
|
|
|
+:root {
|
|
|
+ /* Botanical Research Notebook / Latent Garden */
|
|
|
+ --bg: #f9f7f1;
|
|
|
+ --panel: rgba(252, 250, 245, 0.9);
|
|
|
+ --panel-strong: rgba(252, 250, 245, 0.96);
|
|
|
+ --panel-soft: #f2efe6;
|
|
|
+
|
|
|
+ --text: #3a3832;
|
|
|
+ --text-soft: #4a473f;
|
|
|
+ --muted: #7a7870;
|
|
|
+
|
|
|
+ --accent: #5c7560;
|
|
|
+ --accent-hover: #4a5e4b;
|
|
|
+ --accent-light: #e8ece6;
|
|
|
+ --accent-line: rgba(92, 117, 96, 0.18);
|
|
|
+
|
|
|
+ --warm: #8b7355;
|
|
|
+ --warm-soft: #f0e8dc;
|
|
|
+
|
|
|
+ --border: rgba(58, 56, 50, 0.08);
|
|
|
+ --border-soft: rgba(58, 56, 50, 0.05);
|
|
|
+
|
|
|
+ --shadow: 0 6px 18px rgba(58, 56, 50, 0.05);
|
|
|
+ --shadow-soft: 0 3px 10px rgba(58, 56, 50, 0.035);
|
|
|
+
|
|
|
+ --hero-bg: rgba(252, 250, 245, 0.92);
|
|
|
+ --list-accent: rgba(238, 242, 238, 0.92);
|
|
|
+
|
|
|
+ --paper-dot: rgba(58, 56, 50, 0.012);
|
|
|
+ --paper-line: rgba(58, 56, 50, 0.018);
|
|
|
+
|
|
|
+ --header-bg: rgba(246, 243, 238, 0.82);
|
|
|
+}
|
|
|
+
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+html {
|
|
|
+ scroll-behavior: smooth;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
+ color: var(--text);
|
|
|
+ font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
+ line-height: 1.8;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+ background-color: var(--bg);
|
|
|
+ background-image:
|
|
|
+ url("../background.png"),
|
|
|
+ radial-gradient(circle at 20% 20%, rgba(139, 115, 85, 0.025) 0%, transparent 32%),
|
|
|
+ radial-gradient(circle at 80% 30%, rgba(92, 117, 96, 0.02) 0%, transparent 30%),
|
|
|
+ repeating-radial-gradient(
|
|
|
+ circle at 50% 50%,
|
|
|
+ transparent 0,
|
|
|
+ transparent 2px,
|
|
|
+ var(--paper-dot) 2px,
|
|
|
+ var(--paper-dot) 4px
|
|
|
+ );
|
|
|
+ background-size: cover, auto, auto, 4px 4px;
|
|
|
+ background-position: center top, center, center, center;
|
|
|
+ background-repeat: no-repeat, no-repeat, no-repeat, repeat;
|
|
|
+ background-attachment: fixed, scroll, scroll, local;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端优化：使用移动端专属背景图 */
|
|
|
+@media (max-width: 720px) {
|
|
|
+ body {
|
|
|
+ background-image: url("../background-mobile.png") !important;
|
|
|
+ background-size: cover !important;
|
|
|
+ background-position: center !important;
|
|
|
+ background-repeat: no-repeat !important;
|
|
|
+ background-attachment: scroll !important;
|
|
|
+ background-color: var(--bg) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+a {
|
|
|
+ color: var(--accent);
|
|
|
+ text-decoration: none;
|
|
|
+ transition: color 0.2s ease, opacity 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+a:hover {
|
|
|
+ color: var(--accent-hover);
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ max-width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap {
|
|
|
+ width: min(960px, calc(100% - 32px));
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+/* Header */
|
|
|
+
|
|
|
+.site-header {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ background: var(--header-bg);
|
|
|
+ border-bottom: 1px solid var(--border-soft);
|
|
|
+ z-index: 50;
|
|
|
+}
|
|
|
+
|
|
|
+.header-inner {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 24px;
|
|
|
+ padding: 16px 0;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.site-brand {
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.site-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ 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.01em;
|
|
|
+ line-height: 1.1;
|
|
|
+}
|
|
|
+
|
|
|
+.site-title a {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ text-decoration: none;
|
|
|
+ color: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+.site-title a:hover {
|
|
|
+ color: var(--accent);
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.site-logo {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 50%;
|
|
|
+ object-fit: cover;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ box-shadow: 0 2px 10px rgba(58, 56, 50, 0.04);
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.site-tagline {
|
|
|
+ margin: 6px 0 0;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.95rem;
|
|
|
+}
|
|
|
+
|
|
|
+.site-nav {
|
|
|
+ display: flex;
|
|
|
+ gap: 18px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.site-nav a {
|
|
|
+ color: var(--text);
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ padding: 4px 2px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.site-nav a:hover {
|
|
|
+ color: var(--accent);
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.site-nav a::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: -3px;
|
|
|
+ width: 0;
|
|
|
+ height: 2px;
|
|
|
+ background: var(--accent);
|
|
|
+ transition: width 0.22s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.site-nav a:hover::after,
|
|
|
+.site-nav a.active::after {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* Mobile menu */
|
|
|
+
|
|
|
+.menu-toggle {
|
|
|
+ display: none;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 8px;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+ z-index: 100;
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-toggle span {
|
|
|
+ display: block;
|
|
|
+ width: 24px;
|
|
|
+ height: 2px;
|
|
|
+ background: var(--text);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-toggle:hover span {
|
|
|
+ background: var(--accent);
|
|
|
+}
|
|
|
+
|
|
|
+.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);
|
|
|
+}
|
|
|
+
|
|
|
+.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: 12px 24px 16px;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
|
|
|
+}
|
|
|
+
|
|
|
+.mobile-nav a {
|
|
|
+ display: block;
|
|
|
+ padding: 12px 0;
|
|
|
+ color: var(--text);
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ 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);
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* Layout */
|
|
|
+
|
|
|
+main.wrap {
|
|
|
+ padding: 32px 0 48px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Generic card */
|
|
|
+
|
|
|
+.card {
|
|
|
+ position: relative;
|
|
|
+ background: var(--panel);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 24px;
|
|
|
+ box-shadow: var(--shadow-soft);
|
|
|
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
|
|
|
+ backdrop-filter: blur(1.5px);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.card::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background-image:
|
|
|
+ repeating-radial-gradient(
|
|
|
+ circle at 30% 20%,
|
|
|
+ transparent 0,
|
|
|
+ transparent 2px,
|
|
|
+ rgba(58, 56, 50, 0.008) 2px,
|
|
|
+ rgba(58, 56, 50, 0.008) 4px
|
|
|
+ );
|
|
|
+ opacity: 0.55;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.card > * {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.card:hover {
|
|
|
+ border-color: rgba(92, 117, 96, 0.15);
|
|
|
+ box-shadow: 0 10px 24px rgba(58, 56, 50, 0.07);
|
|
|
+}
|
|
|
+
|
|
|
+/* Hero */
|
|
|
+
|
|
|
+.hero {
|
|
|
+ position: relative;
|
|
|
+ padding: 32px 28px;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ background: var(--hero-bg);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 14px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.hero::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)),
|
|
|
+ radial-gradient(circle at 85% 20%, rgba(92,117,96,0.035), transparent 28%);
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.hero h1 {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ font-size: 2rem;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0 0 10px;
|
|
|
+ color: var(--text);
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ line-height: 1.1;
|
|
|
+}
|
|
|
+
|
|
|
+.hero p,
|
|
|
+.hero ul,
|
|
|
+.hero li {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.hero p {
|
|
|
+ margin: 0 0 12px;
|
|
|
+ color: var(--text-soft);
|
|
|
+ font-size: 1rem;
|
|
|
+ line-height: 1.7;
|
|
|
+}
|
|
|
+
|
|
|
+.eyebrow {
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: var(--warm);
|
|
|
+ font-size: 0.8rem;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+/* Grid sections */
|
|
|
+
|
|
|
+.grid {
|
|
|
+ display: grid;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.three-up {
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
+}
|
|
|
+
|
|
|
+.section-card {
|
|
|
+ background: rgba(252, 250, 245, 0.88);
|
|
|
+ transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.section-card:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 12px 26px rgba(47, 49, 45, 0.06);
|
|
|
+ border-color: rgba(66, 107, 87, 0.14);
|
|
|
+ background: rgba(252, 250, 245, 0.94);
|
|
|
+}
|
|
|
+
|
|
|
+.section-card h2,
|
|
|
+.post-item h2,
|
|
|
+.post-item h3 {
|
|
|
+ margin-top: 0;
|
|
|
+ color: var(--text);
|
|
|
+ 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.25rem;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.post-item h2 {
|
|
|
+ font-size: 1.15rem;
|
|
|
+}
|
|
|
+
|
|
|
+.post-item h3 {
|
|
|
+ font-size: 1.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.section-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+}
|
|
|
+
|
|
|
+.section-head h2 {
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+/* 页面头部标题 */
|
|
|
+.page-head h1 {
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ font-size: 2rem;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0 0 12px;
|
|
|
+ color: var(--text);
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索框样式 */
|
|
|
+.search-box {
|
|
|
+ margin: 24px 0;
|
|
|
+}
|
|
|
+
|
|
|
+#search-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 14px 18px;
|
|
|
+ font-size: 1rem;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: var(--panel);
|
|
|
+ color: var(--text);
|
|
|
+ font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
|
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+#search-input:focus {
|
|
|
+ border-color: var(--accent);
|
|
|
+ box-shadow: 0 0 0 3px rgba(92, 117, 96, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+#search-input::placeholder {
|
|
|
+ color: var(--muted);
|
|
|
+}
|
|
|
+
|
|
|
+.search-results {
|
|
|
+ margin-top: 16px;
|
|
|
+ max-height: 60vh;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item {
|
|
|
+ background: var(--panel);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item:hover {
|
|
|
+ border-color: rgba(92, 117, 96, 0.2);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item h3 {
|
|
|
+ margin: 0 0 8px;
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text);
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item h3 a {
|
|
|
+ color: inherit;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: color 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item h3 a:hover {
|
|
|
+ color: var(--accent);
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item .meta {
|
|
|
+ margin: 0 0 8px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.85rem;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item .preview {
|
|
|
+ margin: 0 0 10px;
|
|
|
+ color: var(--text);
|
|
|
+ font-size: 0.95rem;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item .tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item .tag {
|
|
|
+ background: rgba(92, 117, 96, 0.1);
|
|
|
+ color: var(--accent);
|
|
|
+ font-size: 0.75rem;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.no-results {
|
|
|
+ color: var(--muted);
|
|
|
+ text-align: center;
|
|
|
+ padding: 24px;
|
|
|
+ font-size: 0.95rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* Post list */
|
|
|
+
|
|
|
+.post-list {
|
|
|
+ display: grid;
|
|
|
+ gap: 14px;
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.post-item {
|
|
|
+ position: relative;
|
|
|
+ background: var(--panel);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px 20px 20px 22px;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.post-item::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 14px;
|
|
|
+ bottom: 14px;
|
|
|
+ width: 3px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgba(92, 117, 96, 0),
|
|
|
+ rgba(92, 117, 96, 0.22),
|
|
|
+ rgba(92, 117, 96, 0)
|
|
|
+ );
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.post-item:hover {
|
|
|
+ border-color: rgba(92, 117, 96, 0.2);
|
|
|
+ box-shadow: var(--shadow-soft);
|
|
|
+}
|
|
|
+
|
|
|
+.post-item:first-child {
|
|
|
+ background: var(--list-accent);
|
|
|
+}
|
|
|
+
|
|
|
+.meta {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* Article */
|
|
|
+
|
|
|
+.article {
|
|
|
+ background: rgba(252, 250, 245, 0.9);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 28px 30px;
|
|
|
+ box-shadow: var(--shadow-soft);
|
|
|
+ backdrop-filter: blur(1px);
|
|
|
+}
|
|
|
+
|
|
|
+.article h1 {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ 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);
|
|
|
+ line-height: 1.15;
|
|
|
+}
|
|
|
+
|
|
|
+.article h2,
|
|
|
+.article h3,
|
|
|
+.article h4,
|
|
|
+.article h5,
|
|
|
+.article h6 {
|
|
|
+ position: relative;
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 1.8em;
|
|
|
+ color: var(--text);
|
|
|
+ letter-spacing: -0.01em;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.article h2 {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ padding-bottom: 0.28em;
|
|
|
+ border-bottom: 1px solid rgba(92, 117, 96, 0.14);
|
|
|
+}
|
|
|
+
|
|
|
+.article h3 {
|
|
|
+ font-size: 1.3rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* 正文内容中的标题使用衬线体 */
|
|
|
+.prose h1,
|
|
|
+.prose h2,
|
|
|
+.prose h3,
|
|
|
+.prose h4,
|
|
|
+.prose h5,
|
|
|
+.prose h6 {
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text);
|
|
|
+ letter-spacing: -0.01em;
|
|
|
+ margin-top: 1.8em;
|
|
|
+ margin-bottom: 0.8em;
|
|
|
+}
|
|
|
+
|
|
|
+.prose h1 { font-size: 1.8rem; letter-spacing: -0.02em; }
|
|
|
+.prose h2 { font-size: 1.5rem; border-bottom: 1px solid rgba(92, 117, 96, 0.14); padding-bottom: 0.28em; }
|
|
|
+.prose h3 { font-size: 1.3rem; }
|
|
|
+.prose h4 { font-size: 1.15rem; }
|
|
|
+.prose h5 { font-size: 1.05rem; }
|
|
|
+.prose h6 { font-size: 1rem; }
|
|
|
+
|
|
|
+.prose :first-child {
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.prose p,
|
|
|
+.prose li {
|
|
|
+ color: var(--text-soft);
|
|
|
+}
|
|
|
+
|
|
|
+.prose img {
|
|
|
+ max-width: 100%;
|
|
|
+ height: auto;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.prose blockquote {
|
|
|
+ margin: 1.2rem 0;
|
|
|
+ padding: 1rem 1.2rem;
|
|
|
+ background: rgba(242, 239, 230, 0.88);
|
|
|
+ border-left: 3px solid var(--accent);
|
|
|
+ border-radius: 8px;
|
|
|
+ color: var(--text);
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.prose code {
|
|
|
+ background: rgba(242, 239, 230, 0.92);
|
|
|
+ padding: 0.18rem 0.42rem;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 0.9em;
|
|
|
+ color: var(--accent-hover);
|
|
|
+}
|
|
|
+
|
|
|
+.prose pre {
|
|
|
+ background: rgba(242, 239, 230, 0.96);
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow-x: auto;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
|
|
|
+}
|
|
|
+
|
|
|
+.prose pre code {
|
|
|
+ background: transparent;
|
|
|
+ padding: 0;
|
|
|
+ color: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+/* Tags */
|
|
|
+
|
|
|
+.tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag {
|
|
|
+ display: inline-flex;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: var(--panel-soft);
|
|
|
+ color: var(--accent);
|
|
|
+ font-size: 0.8rem;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: "PingFang SC", sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.tag:first-child {
|
|
|
+ background: var(--accent-light);
|
|
|
+ border-color: rgba(92, 117, 96, 0.12);
|
|
|
+ color: var(--accent);
|
|
|
+}
|
|
|
+
|
|
|
+/* Footer */
|
|
|
+
|
|
|
+.site-footer {
|
|
|
+ padding: 0 0 48px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* Mobile */
|
|
|
+
|
|
|
+@media (max-width: 720px) {
|
|
|
+ body {
|
|
|
+ background-image:
|
|
|
+ radial-gradient(circle at 0% 0%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
|
|
|
+ radial-gradient(circle at 100% 0%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
|
|
|
+ radial-gradient(circle at 0% 100%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
|
|
|
+ radial-gradient(circle at 100% 100%, rgba(139, 115, 85, 0.03) 0%, transparent 40%),
|
|
|
+ url("../background-mobile.png"),
|
|
|
+ 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
|
|
|
+ );
|
|
|
+ background-size: auto, auto, auto, auto, cover, 4px 4px;
|
|
|
+ background-position: center, center, center, center, center top, center;
|
|
|
+ background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
|
|
|
+ background-attachment: scroll, scroll, scroll, scroll, scroll, local;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-inner,
|
|
|
+ .section-head {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-toggle {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .site-nav {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .site-nav.active,
|
|
|
+ .mobile-nav.active {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card,
|
|
|
+ .hero,
|
|
|
+ .article {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .article h1 {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero h1 {
|
|
|
+ font-size: 1.7rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .site-title {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ padding-right: 56px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .site-logo {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .site-tagline {
|
|
|
+ font-size: 0.88rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .three-up {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .post-item {
|
|
|
+ padding: 18px 16px 18px 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索框样式 */
|
|
|
+.search-box {
|
|
|
+ margin: 24px 0;
|
|
|
+}
|
|
|
+
|
|
|
+#search-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 14px 18px;
|
|
|
+ font-size: 1rem;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: var(--panel);
|
|
|
+ color: var(--text);
|
|
|
+ font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
|
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
|
+ outline: none;
|
|
|
+ box-shadow: var(--shadow-soft);
|
|
|
+}
|
|
|
+
|
|
|
+#search-input:focus {
|
|
|
+ border-color: var(--accent);
|
|
|
+ box-shadow: 0 0 0 3px rgba(92, 117, 96, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+#search-input::placeholder {
|
|
|
+ color: var(--muted);
|
|
|
+}
|
|
|
+
|
|
|
+.search-results {
|
|
|
+ margin-top: 16px;
|
|
|
+ max-height: 60vh;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item {
|
|
|
+ background: var(--panel);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item:hover {
|
|
|
+ border-color: rgba(92, 117, 96, 0.2);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item h3 {
|
|
|
+ margin: 0 0 8px;
|
|
|
+ font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif CN", serif;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text);
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item h3 a {
|
|
|
+ color: inherit;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: color 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item h3 a:hover {
|
|
|
+ color: var(--accent);
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item .meta {
|
|
|
+ margin: 0 0 8px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.85rem;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item .preview {
|
|
|
+ margin: 0 0 10px;
|
|
|
+ color: var(--text);
|
|
|
+ font-size: 0.95rem;
|
|
|
+ line-height: 1.7;
|
|
|
+}
|
|
|
+
|
|
|
+.search-result-item .tags {
|
|
|
+ display: flex;
|
|
|
+ gap: 6px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ background: var(--accent-light);
|
|
|
+ color: var(--accent);
|
|
|
+ border-radius: 4px;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.tag:hover {
|
|
|
+ background: var(--accent);
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.no-results {
|
|
|
+ color: var(--muted);
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px;
|
|
|
+}
|
Daily Deploy Bot
