From e609ecfd4321b5bc32bf3372c26833a8ed64ef4f Mon Sep 17 00:00:00 2001 From: kaermaxc <59996146+magic-alt@users.noreply.github.com> Date: Fri, 17 Oct 2025 12:40:47 +0800 Subject: [PATCH] feat: restyle site with PaperMod-inspired theme --- _includes/footer.html | 43 ++- _includes/head.html | 51 ++- assets/css/styles.css | 856 +++++++++++++++++++++--------------------- 3 files changed, 502 insertions(+), 448 deletions(-) diff --git a/_includes/footer.html b/_includes/footer.html index eb486d7..4a6f475 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -27,8 +27,45 @@

联系

© {{ site.time | date: "%Y" }} {{ site.title }} · 借助 Jekyll 与开源主题生态构建

- {% if page.math or site.mathjax %} - - {% endif %} + diff --git a/_includes/head.html b/_includes/head.html index e5d05f7..cdf9d62 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,17 +1,14 @@ - + - - + {% seo %} - - + - - + - - + + + + + - - + + + + {% if page.math or site.mathjax %} - + + {% endif %} @@ -60,7 +75,17 @@
  • 归档
  • 关于
    • - 订阅 RSS +
    + 订阅 RSS + +
    diff --git a/assets/css/styles.css b/assets/css/styles.css index 45d4890..4c320f9 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,20 +1,45 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@500;600;700&display=swap"); :root { + color-scheme: light; + --font-sans: "Inter", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-serif: "Source Serif 4", "Noto Serif SC", serif; + --color-bg: #f8fafc; + --color-surface: #ffffff; + --color-surface-alt: #eef2ff; + --color-border: rgba(148, 163, 184, 0.28); + --color-divider: rgba(148, 163, 184, 0.2); + --color-text: #0f172a; + --color-muted: #64748b; + --color-accent: #2563eb; + --color-accent-soft: rgba(37, 99, 235, 0.12); + --color-tag-bg: rgba(37, 99, 235, 0.08); + --color-tag-text: #1d4ed8; + --color-code-bg: #f1f5f9; + --color-header: rgba(248, 250, 252, 0.9); + --shadow-card: 0 18px 40px rgba(15, 23, 42, 0.12); + --radius-lg: 24px; + --radius-md: 18px; + --radius-sm: 12px; + --transition-fast: 150ms ease; +} + +html[data-theme="dark"] { color-scheme: dark; - --bg-color: #0f172a; - --bg-overlay: rgba(15, 23, 42, 0.72); - --text-color: #e2e8f0; - --muted-color: #94a3b8; - --accent-color: #38bdf8; - --accent-strong: #fbbf24; - --card-bg: rgba(15, 23, 42, 0.82); - --card-border: rgba(148, 163, 184, 0.24); - --chip-bg: rgba(148, 163, 184, 0.16); - --chip-hover: rgba(148, 163, 184, 0.35); - --shadow-soft: 0 18px 42px rgba(15, 23, 42, 0.45); - --heading-font: "Playfair Display", "Noto Serif SC", serif; - font-family: "Inter", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --color-bg: #0f172a; + --color-surface: rgba(15, 23, 42, 0.88); + --color-surface-alt: rgba(30, 41, 59, 0.74); + --color-border: rgba(148, 163, 184, 0.32); + --color-divider: rgba(71, 85, 105, 0.45); + --color-text: #e2e8f0; + --color-muted: #94a3b8; + --color-accent: #60a5fa; + --color-accent-soft: rgba(96, 165, 250, 0.18); + --color-tag-bg: rgba(96, 165, 250, 0.16); + --color-tag-text: #dbeafe; + --color-code-bg: rgba(30, 41, 59, 0.88); + --color-header: rgba(15, 23, 42, 0.85); + --shadow-card: 0 24px 56px rgba(8, 11, 19, 0.55); } *, *::before, *::after { @@ -24,52 +49,29 @@ body { margin: 0; min-height: 100vh; - background-color: var(--bg-color); - background-image: url("../images/aurora-background.svg"); - background-position: center; - background-size: cover; - background-attachment: fixed; - color: var(--text-color); + font-family: var(--font-sans); font-size: 16px; line-height: 1.75; - position: relative; - overflow-x: hidden; -} - -body::before { - content: ""; - position: fixed; - inset: 0; - background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.16), transparent 55%), - radial-gradient(circle at 82% 15%, rgba(14, 165, 233, 0.22), transparent 50%), - linear-gradient(160deg, rgba(14, 116, 144, 0.3), rgba(15, 23, 42, 0.85)); - z-index: -2; -} - -body::after { - content: ""; - position: fixed; - inset: 0; - background: rgba(10, 17, 32, 0.35); - backdrop-filter: blur(22px); - z-index: -1; + background: var(--color-bg); + color: var(--color-text); + transition: background-color var(--transition-fast), color var(--transition-fast); } a { - color: var(--accent-color); + color: var(--color-accent); text-decoration: none; - transition: color 0.2s ease, opacity 0.2s ease; + transition: color var(--transition-fast), opacity var(--transition-fast); } a:hover, a:focus { - color: var(--accent-strong); + color: #1d4ed8; } img { max-width: 100%; height: auto; - display: block; + border-radius: var(--radius-sm); } h1, @@ -78,32 +80,58 @@ h3, h4, h5, h6 { - font-family: var(--heading-font); + font-family: var(--font-serif); font-weight: 600; - color: #f8fafc; line-height: 1.3; + margin-top: 0; + color: inherit; } p { - margin: 0 0 1.25rem; + margin: 0 0 1.2rem; } ul, ol { margin: 0 0 1.25rem 1.25rem; + padding-left: 0; +} + +pre { + background: var(--color-code-bg); + border-radius: var(--radius-sm); + padding: 1.25rem; + overflow-x: auto; + font-size: 0.9rem; +} + +code { + font-family: "Fira Code", "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + background: var(--color-code-bg); + border-radius: 0.5rem; + padding: 0.15rem 0.45rem; + font-size: 0.9em; +} + +blockquote { + margin: 1.5rem 0; + padding: 1rem 1.5rem; + border-left: 4px solid var(--color-accent); + background: var(--color-accent-soft); + border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .skip-link { position: absolute; top: -999px; left: 0; - padding: 0.5rem 1rem; - background: var(--accent-color); - color: #0f172a; + padding: 0.75rem 1.5rem; + background: var(--color-accent); + color: #ffffff; font-weight: 600; border-radius: 999px; z-index: 1000; - transition: top 0.2s ease; + transition: top var(--transition-fast); } .skip-link:focus { @@ -111,88 +139,136 @@ ol { } .wrapper { - width: min(1160px, 92vw); + width: min(960px, 92vw); margin: 0 auto; - padding: 0 1rem; - position: relative; + padding: 0 1.5rem; } .site-header { position: sticky; top: 0; z-index: 20; - background: rgba(15, 23, 42, 0.75); - border-bottom: 1px solid var(--card-border); - backdrop-filter: blur(14px); + backdrop-filter: blur(16px); + background: var(--color-header); + border-bottom: 1px solid var(--color-border); + transition: background-color var(--transition-fast), border-color var(--transition-fast); } .header-grid { display: flex; align-items: center; justify-content: space-between; - gap: 2.5rem; - padding: 1.5rem 0; + gap: 2rem; + padding: 1.35rem 0; } .site-brand { display: flex; flex-direction: column; - gap: 0.25rem; + gap: 0.35rem; } .site-title { font-weight: 700; - font-size: 1.25rem; - letter-spacing: 0.12em; + font-size: 1.35rem; + letter-spacing: 0.08em; text-transform: uppercase; + color: inherit; } .site-subtitle { margin: 0; - color: var(--muted-color); - font-size: 0.92rem; + font-size: 0.95rem; + color: var(--color-muted); max-width: 420px; } .site-nav { display: flex; align-items: center; - gap: 1.5rem; + gap: 1.75rem; } .site-nav ul { list-style: none; display: flex; - gap: 1rem; + gap: 1.25rem; margin: 0; padding: 0; } .site-nav a { - color: var(--muted-color); + color: var(--color-muted); font-weight: 500; } .site-nav a[aria-current="page"] { - color: var(--accent-color); + color: var(--color-accent); + font-weight: 600; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 1rem; } .nav-cta { display: inline-flex; align-items: center; justify-content: center; - padding: 0.55rem 1.25rem; + padding: 0.55rem 1.4rem; border-radius: 999px; - border: 1px solid rgba(56, 189, 248, 0.6); - color: var(--accent-color); + border: 1px solid var(--color-border); + color: var(--color-accent); font-weight: 600; - transition: transform 0.2s ease, box-shadow 0.2s ease; + background: transparent; + transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .nav-cta:hover, .nav-cta:focus { transform: translateY(-1px); - box-shadow: 0 10px 28px rgba(56, 189, 248, 0.35); + border-color: var(--color-accent); + box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18); +} + +.theme-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + border: 1px solid var(--color-border); + background: var(--color-surface); + padding: 0; + cursor: pointer; + transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); +} + +.theme-toggle:hover, +.theme-toggle:focus { + transform: translateY(-1px); + border-color: var(--color-accent); +} + +.theme-icon { + width: 1.3rem; + height: 1.3rem; + fill: currentColor; +} + +.theme-icon-moon { + display: none; +} + +html[data-theme="dark"] .theme-icon-sun { + display: none; +} + +html[data-theme="dark"] .theme-icon-moon { + display: block; } .site-shell { @@ -201,123 +277,117 @@ ol { } .site-main { - padding: 2.5rem 0 0; + padding: 3rem 0 4.5rem; + display: block; } .hero { - text-align: center; - margin: 4rem auto 3.5rem; - max-width: 640px; + background: var(--color-surface); + border-radius: var(--radius-lg); + padding: 3.5rem 3rem; + margin-bottom: 2.5rem; + box-shadow: var(--shadow-card); + border: 1px solid var(--color-border); } .hero-label { - color: var(--accent-strong); - font-size: 0.82rem; - letter-spacing: 0.45em; text-transform: uppercase; + letter-spacing: 0.12em; + font-size: 0.8rem; + color: var(--color-muted); margin-bottom: 0.75rem; - display: inline-block; } .hero-title { - font-family: var(--heading-font); - font-size: clamp(2.6rem, 6vw, 3.7rem); - letter-spacing: 0.03em; - margin: 0 0 1.5rem; + font-size: clamp(2.4rem, 5vw, 2.9rem); + margin-bottom: 1rem; } .hero-description { - color: var(--muted-color); - font-size: 1.08rem; - margin: 0 auto 2rem; - max-width: 560px; + max-width: 520px; + color: var(--color-muted); + font-size: 1.05rem; } .hero-actions { + margin-top: 2rem; display: flex; - justify-content: center; - gap: 1rem; flex-wrap: wrap; + gap: 1rem; } .hero-button { display: inline-flex; align-items: center; justify-content: center; - padding: 0.75rem 1.9rem; + gap: 0.5rem; + padding: 0.8rem 1.6rem; border-radius: 999px; - background: linear-gradient(135deg, var(--accent-color), #14b8a6); - color: #0f172a; font-weight: 600; - border: none; - box-shadow: var(--shadow-soft); - transition: transform 0.2s ease, box-shadow 0.2s ease; + border: 1px solid transparent; + background: var(--color-accent); + color: #ffffff; + transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .hero-button:hover, .hero-button:focus { - transform: translateY(-2px); - box-shadow: 0 22px 44px rgba(14, 165, 233, 0.35); + transform: translateY(-1px); + box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24); } .hero-button.ghost { background: transparent; - color: var(--accent-color); - border: 1px solid var(--accent-color); - box-shadow: none; + color: var(--color-accent); + border-color: var(--color-accent); } .hero-button.ghost:hover, .hero-button.ghost:focus { - color: var(--accent-strong); - border-color: var(--accent-strong); + background: var(--color-accent-soft); } .home-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; - align-items: start; } .post-list { - display: grid; + display: flex; + flex-direction: column; gap: 1.75rem; } .post-item { - background: var(--card-bg); - border: 1px solid var(--card-border); - border-radius: 1.35rem; - padding: 1.9rem; - box-shadow: var(--shadow-soft); - backdrop-filter: blur(18px); - transition: transform 0.2s ease, border-color 0.2s ease; + background: var(--color-surface); + border-radius: var(--radius-lg); + padding: 2.2rem; + border: 1px solid var(--color-border); + box-shadow: var(--shadow-card); + transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } -.post-item:hover, -.post-item:focus-within { - transform: translateY(-6px); - border-color: rgba(56, 189, 248, 0.45); +.post-item:hover { + transform: translateY(-4px); + border-color: var(--color-accent); + box-shadow: 0 20px 40px rgba(37, 99, 235, 0.16); } .post-item h2 { - margin: 0 0 0.75rem; - font-size: clamp(1.6rem, 3vw, 2rem); + font-size: 1.6rem; + margin-bottom: 0.75rem; } .post-date { - margin: 0 0 0.75rem; - color: var(--muted-color); - font-size: 0.9rem; - letter-spacing: 0.08em; - text-transform: uppercase; + color: var(--color-muted); + font-size: 0.95rem; + margin-bottom: 0.75rem; } .post-excerpt { - margin: 0 0 1.25rem; - color: #cbd5f5; - font-size: 1.02rem; + color: var(--color-muted); + margin-bottom: 1.1rem; } .post-card-tags { @@ -325,57 +395,54 @@ ol { display: flex; flex-wrap: wrap; gap: 0.6rem; - margin: 0 0 1.1rem; + margin: 0 0 1.2rem; padding: 0; } .post-card-tags a { display: inline-flex; align-items: center; - padding: 0.35rem 0.75rem; + gap: 0.3rem; + padding: 0.35rem 0.9rem; border-radius: 999px; - background: rgba(56, 189, 248, 0.14); - border: 1px solid rgba(56, 189, 248, 0.25); - color: var(--accent-color); - font-size: 0.9rem; - font-weight: 500; + background: var(--color-tag-bg); + color: var(--color-tag-text); + font-size: 0.85rem; + font-weight: 600; } .read-more { font-weight: 600; - display: inline-flex; - align-items: center; - gap: 0.35rem; + color: var(--color-accent); } .sidebar { + position: sticky; + top: 6.5rem; display: flex; flex-direction: column; - gap: 2rem; + gap: 1.75rem; + height: fit-content; } .highlight-card { - background: var(--card-bg); - border: 1px solid var(--card-border); - border-radius: 1.35rem; - padding: 1.75rem; - box-shadow: var(--shadow-soft); - backdrop-filter: blur(18px); + background: var(--color-surface); + border-radius: var(--radius-lg); + padding: 1.8rem; + border: 1px solid var(--color-border); + box-shadow: var(--shadow-card); } .highlight-title { - font-size: 0.92rem; - letter-spacing: 0.4em; - color: var(--muted-color); - margin: 0 0 1.35rem; - text-transform: uppercase; + font-size: 1.2rem; + margin-bottom: 1rem; } .tag-cloud { + list-style: none; display: flex; flex-wrap: wrap; - gap: 0.75rem; - list-style: none; + gap: 0.6rem; margin: 0; padding: 0; } @@ -383,84 +450,99 @@ ol { .tag-chip { display: inline-flex; align-items: center; - gap: 0.5rem; - padding: 0.35rem 0.9rem; + gap: 0.35rem; + padding: 0.4rem 0.95rem; border-radius: 999px; - background: var(--chip-bg); - border: 1px solid transparent; - color: var(--muted-color); - transition: transform 0.2s ease, border-color 0.2s ease; + background: var(--color-tag-bg); + color: var(--color-tag-text); + font-size: 0.85rem; + font-weight: 600; } -.tag-chip:hover, -.tag-chip:focus { - transform: translateY(-1px); - border-color: var(--chip-hover); - color: var(--accent-strong); +.tag-count { + font-variant-numeric: tabular-nums; + opacity: 0.7; } -.tag-count { - font-size: 0.82rem; - color: var(--muted-color); +.empty-copy { + color: var(--color-muted); } -.about-intro { - margin: 0 0 1.35rem; - color: #e5e7ff; +.about-me .about-intro { + color: var(--color-muted); + margin-bottom: 1.1rem; } .about-list { list-style: none; + margin: 0; padding: 0; + display: grid; + gap: 0.6rem; + color: var(--color-muted); +} + +.about { + margin-top: 2rem; +} + +.about-card { + background: var(--color-surface); + border-radius: var(--radius-lg); + display: grid; + gap: 2rem; + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + padding: 3rem; + box-shadow: var(--shadow-card); + border: 1px solid var(--color-border); +} + +.about-portrait { margin: 0; +} + +.about-content p { + color: var(--color-muted); +} + +.about-highlights { + list-style: none; + padding: 0; + margin: 1.5rem 0 0; display: grid; - gap: 0.65rem; - color: var(--muted-color); + gap: 0.85rem; + color: var(--color-text); + font-weight: 600; } .post { - background: var(--card-bg); - border: 1px solid var(--card-border); - border-radius: 1.75rem; - padding: 2.5rem; - box-shadow: var(--shadow-soft); - backdrop-filter: blur(22px); - margin-bottom: 3rem; + background: var(--color-surface); + border-radius: var(--radius-lg); + padding: 3rem; + box-shadow: var(--shadow-card); + border: 1px solid var(--color-border); } .post-hero { - border-bottom: 1px solid rgba(148, 163, 184, 0.18); - padding-bottom: 1.75rem; - margin-bottom: 2rem; + margin-bottom: 2.5rem; } .post-meta { display: flex; flex-wrap: wrap; - gap: 1rem; - align-items: center; - margin: 0 0 1rem; - color: var(--muted-color); + gap: 0.8rem; + color: var(--color-muted); font-size: 0.95rem; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.post-reading { - display: inline-flex; - align-items: center; - gap: 0.35rem; } .post-title { - margin: 0 0 1.25rem; - font-size: clamp(2.2rem, 5vw, 3.1rem); + font-size: clamp(2.2rem, 4vw, 2.8rem); + margin-bottom: 1rem; } .post-lede { - margin: 0 0 1.5rem; - color: #e9edff; - font-size: 1.12rem; + color: var(--color-muted); + font-size: 1.1rem; } .post-tag-list { @@ -468,313 +550,222 @@ ol { display: flex; flex-wrap: wrap; gap: 0.6rem; - margin: 0; + margin: 1.2rem 0 0; padding: 0; } .post-tag-list a { display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.35rem 0.85rem; + padding: 0.35rem 0.95rem; border-radius: 999px; - background: rgba(56, 189, 248, 0.14); - border: 1px solid rgba(56, 189, 248, 0.3); - color: var(--accent-color); - font-weight: 500; + background: var(--color-tag-bg); + color: var(--color-tag-text); + font-weight: 600; } .post-body { display: grid; - grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); + grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); gap: 2.5rem; } .post-content { - font-size: 1.05rem; - color: #e2e8f0; -} - -.post-content > *:first-child { - margin-top: 0; -} - -.post-content .toc { - list-style: none; - margin: 1.5rem 0; - padding: 1.25rem 1.5rem; - border-radius: 1.2rem; - background: rgba(148, 163, 184, 0.12); - border: 1px solid rgba(148, 163, 184, 0.25); - font-size: 0.95rem; -} - -.post-content .toc li { - margin-bottom: 0.45rem; -} - -.post-content .toc li:last-child { - margin-bottom: 0; + min-width: 0; } .post-content h2 { - margin-top: 2.4rem; - margin-bottom: 1.1rem; -} - -.post-content h3 { - margin-top: 2rem; + margin-top: 2.2rem; margin-bottom: 1rem; } -.post-content blockquote { - margin: 2rem 0; - padding: 1.5rem 1.75rem; - border-left: 3px solid var(--accent-color); - background: rgba(148, 163, 184, 0.12); - border-radius: 1.1rem; - color: #f1f5ff; -} - -.post-content pre { - background: rgba(15, 23, 42, 0.9); - border: 1px solid rgba(148, 163, 184, 0.25); - border-radius: 1rem; - padding: 1.25rem; - overflow: auto; - font-size: 0.95rem; +.post-content h3 { + margin-top: 1.8rem; + margin-bottom: 0.9rem; } -.post-content code { - background: rgba(148, 163, 184, 0.16); - border-radius: 0.35rem; - padding: 0.1rem 0.35rem; - font-size: 0.95em; +.post-content p, +.post-content li { + color: var(--color-text); } .post-content table { width: 100%; border-collapse: collapse; - margin: 1.5rem 0; - font-size: 0.95rem; + margin-bottom: 1.5rem; } .post-content th, .post-content td { - border: 1px solid rgba(148, 163, 184, 0.3); - padding: 0.75rem 1rem; + border: 1px solid var(--color-border); + padding: 0.8rem 1rem; + text-align: left; } -.post-content th { - background: rgba(148, 163, 184, 0.12); +.post-content hr { + border: none; + border-top: 1px solid var(--color-divider); + margin: 2.5rem 0; } .post-aside { display: flex; flex-direction: column; - gap: 1.5rem; + gap: 1.4rem; } .post-aside-card { - background: rgba(15, 23, 42, 0.78); - border: 1px solid var(--card-border); - border-radius: 1.25rem; + background: var(--color-surface-alt); + border-radius: var(--radius-md); padding: 1.5rem; - box-shadow: var(--shadow-soft); + border: 1px solid var(--color-border); } .post-aside-card h2 { font-size: 1.05rem; - margin: 0 0 1rem; - letter-spacing: 0.12em; - text-transform: uppercase; + margin-bottom: 1rem; } .post-aside-card dl { margin: 0; -} - -.post-aside-card dl div { - margin-bottom: 1rem; + display: grid; + gap: 0.75rem; } .post-aside-card dt { - font-size: 0.82rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--muted-color); - margin-bottom: 0.25rem; + font-weight: 600; + color: var(--color-muted); } .post-aside-card dd { margin: 0; - font-weight: 600; } .post-aside-card ul { - list-style: none; margin: 0; padding: 0; + list-style: none; display: grid; gap: 0.6rem; } .post-footer { - border-top: 1px solid rgba(148, 163, 184, 0.18); margin-top: 2.5rem; - padding-top: 1.75rem; - color: var(--muted-color); - font-size: 0.98rem; + padding-top: 2rem; + border-top: 1px solid var(--color-divider); } -.post-share a { - font-weight: 600; +.post-share { + color: var(--color-muted); } .post-pagination { + margin-top: 2.5rem; display: flex; justify-content: space-between; gap: 1rem; - margin-bottom: 4rem; } -.post-pagination a { +.post-previous, +.post-next { flex: 1; - text-align: center; - padding: 1rem 1.25rem; - border-radius: 1rem; - background: rgba(15, 23, 42, 0.78); - border: 1px solid var(--card-border); - box-shadow: var(--shadow-soft); + display: inline-flex; + align-items: center; + justify-content: center; + padding: 1rem 1.4rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-surface); font-weight: 600; -} - -.post-pagination a:hover, -.post-pagination a:focus { - border-color: rgba(56, 189, 248, 0.45); + text-align: center; } .archive, .tags { - background: var(--card-bg); - border: 1px solid var(--card-border); - border-radius: 1.5rem; - padding: 2.25rem; - box-shadow: var(--shadow-soft); - backdrop-filter: blur(20px); + background: var(--color-surface); + border-radius: var(--radius-lg); + padding: 3rem; + box-shadow: var(--shadow-card); + border: 1px solid var(--color-border); + display: grid; + gap: 2rem; } .archive h2, .tags h2 { - margin-top: 2.25rem; + font-size: 1.5rem; + margin-bottom: 1rem; } -.archive h2:first-child, -.tags h2:first-child { - margin-top: 0; +.archive-date, +.tag-date { + color: var(--color-muted); + font-variant-numeric: tabular-nums; + margin-right: 1rem; } .archive ul, .tags ul { list-style: none; - margin: 1rem 0 0; + margin: 0; padding: 0; + display: grid; + gap: 0.8rem; } -.archive li, -.tags li { - display: flex; - gap: 0.75rem; - margin-bottom: 0.6rem; +.tag-group { + border-bottom: 1px solid var(--color-divider); + padding-bottom: 1.5rem; } -.archive-date, -.tag-date { - color: var(--muted-color); - min-width: 4.2rem; - letter-spacing: 0.08em; - text-transform: uppercase; +.tag-group:last-of-type { + border-bottom: none; + padding-bottom: 0; } -.about { +.pagination { + margin-top: 3rem; display: flex; - justify-content: center; - margin: 4rem 0 5rem; -} - -.about-card { - display: grid; - grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr); - gap: 2.5rem; align-items: center; - width: min(960px, 100%); - background: var(--card-bg); - border: 1px solid var(--card-border); - border-radius: 1.75rem; - padding: 3rem; - box-shadow: var(--shadow-soft); - backdrop-filter: blur(22px); -} - -.about-portrait { - margin: 0; -} - -.about-portrait img { - border-radius: 1.35rem; - box-shadow: var(--shadow-soft); -} - -.about-content h1 { - margin-top: 0; - margin-bottom: 1.25rem; - font-size: clamp(2rem, 4vw, 2.6rem); -} - -.about-content p { - margin-bottom: 1.2rem; + justify-content: center; + gap: 1rem; + color: var(--color-muted); } -.about-highlights { - list-style: none; - padding: 0; - margin: 1.5rem 0 0; - display: grid; - gap: 0.75rem; - color: var(--muted-color); - font-size: 0.98rem; +.pagination-item { + display: inline-flex; + padding: 0.7rem 1.4rem; + border-radius: 999px; + border: 1px solid var(--color-border); + background: var(--color-surface); + font-weight: 600; } .site-footer { - border-top: 1px solid var(--card-border); - background: rgba(10, 16, 28, 0.92); - padding: 3rem 0 2rem; - color: var(--muted-color); + border-top: 1px solid var(--color-border); + background: var(--color-surface); + padding: 3rem 0 2.5rem; } .footer-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 2.5rem; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 2rem; + align-items: start; + padding-bottom: 2rem; + border-bottom: 1px solid var(--color-divider); } .footer-title { - margin: 0 0 0.5rem; - font-size: 1.5rem; - letter-spacing: 0.2em; - text-transform: uppercase; + margin-bottom: 0.6rem; } .footer-description { - margin: 0; - max-width: 360px; + color: var(--color-muted); } .footer-heading { - margin: 0 0 0.75rem; font-size: 1rem; - letter-spacing: 0.16em; - text-transform: uppercase; + margin-bottom: 1rem; } .footer-links { @@ -785,102 +776,103 @@ ol { gap: 0.6rem; } -.footer-meta { - margin-top: 2.5rem; - text-align: center; - font-size: 0.88rem; -} - -mjx-container { - color: #f8fafc; +.footer-links a { + color: var(--color-muted); + font-weight: 500; } -mjx-container[jax="CHTML"][display="true"] { - margin: 1.5rem 0; +.footer-links a:hover { + color: var(--color-accent); } -mjx-container[jax="CHTML"] { - font-size: 1.05rem; +.footer-meta { + padding-top: 2rem; + color: var(--color-muted); + font-size: 0.9rem; + text-align: center; } -@media (max-width: 1080px) { +@media (max-width: 960px) { .home-layout { grid-template-columns: 1fr; } + .sidebar { + position: relative; + top: 0; + } + + .about-card { + grid-template-columns: 1fr; + } + .post-body { grid-template-columns: 1fr; } } -@media (max-width: 860px) { +@media (max-width: 720px) { + .wrapper { + padding: 0 1rem; + } + .header-grid { flex-direction: column; align-items: flex-start; - gap: 1.25rem; + gap: 1rem; } .site-nav { width: 100%; - flex-direction: column; - align-items: flex-start; + flex-wrap: wrap; gap: 1rem; } .site-nav ul { + flex: 1; flex-wrap: wrap; } - .hero { - margin-top: 3.5rem; + .nav-actions { + width: 100%; + justify-content: flex-start; } - .about-card { - grid-template-columns: 1fr; - text-align: center; + .hero { + padding: 2.5rem 2rem; } - .about-portrait img { - max-width: 420px; - margin: 0 auto; + .post-item { + padding: 1.8rem; } .post { - padding: 2rem; - } -} - -@media (max-width: 640px) { - .wrapper { - width: min(96vw, 640px); - padding: 0 0.75rem; - } - - .hero-title { - font-size: clamp(2.2rem, 9vw, 3rem); - } - - .post-item { - padding: 1.35rem; + padding: 2.4rem 1.8rem; } - .post-hero { - padding-bottom: 1.25rem; + .post-pagination { + flex-direction: column; } - .post-title { - font-size: clamp(1.9rem, 7vw, 2.4rem); + .archive, + .tags { + padding: 2.4rem 1.8rem; } +} - .post { - padding: 1.75rem 1.35rem; +@media (max-width: 520px) { + .site-nav ul { + flex-direction: column; + align-items: flex-start; } - .post-pagination { + .hero-actions { flex-direction: column; + align-items: stretch; } - .footer-grid { - gap: 1.5rem; + .theme-toggle { + width: 2.25rem; + height: 2.25rem; } }