主题大Debuff

2026-08-11 21:07:54 +08:00
parent cc8dbd1233
commit 3a9fcb6c0f
9 changed files with 378 additions and 238 deletions
@@ -13,7 +13,7 @@ import '../styles/global.css';
 interface Props { title?: string; description?: string; image?: string; type?: 'website' | 'article'; noindex?: boolean; math?: boolean; navbarOverlay?: boolean; }
 const { title, description, image, type, noindex, math, navbarOverlay = false } = Astro.props;
 const hasMasthead = Astro.slots.has('masthead');
-  const appearanceScript = `(function(){var r=document.documentElement,t='mirages-theme',s='mirages-font-scale',f='mirages-font-family',themes=['auto','light','sunset','dark'],fonts=['serif','sans'],stored=Number(localStorage.getItem(s)),scale=stored>=.8&&stored<=1.5?stored*100:stored>=80&&stored<=150?stored:100,theme=localStorage.getItem(t),font=localStorage.getItem(f);scale=Math.round(scale/5)*5;r.dataset.theme=themes.indexOf(theme)>-1?theme:'${siteConfig.appearance.defaultTheme}';r.dataset.font=fonts.indexOf(font)>-1?font:'sans';r.style.fontSize=scale+'%'})();`;
+  const appearanceScript = `(function(){var r=document.documentElement,t='mirages-theme',s='mirages-font-scale',f='mirages-font-family',themes=['auto','light','sunset','dark'],fonts=['serif','sans'],stored=Number(localStorage.getItem(s)),scale=stored>=.8&&stored<=1.5?stored*100:stored>=80&&stored<=150?stored:100,theme=localStorage.getItem(t),font=localStorage.getItem(f);scale=Math.round(scale/5)*5;r.dataset.theme=themes.indexOf(theme)>-1?theme:'${siteConfig.appearance.defaultTheme}';r.dataset.font=fonts.indexOf(font)>-1?font:'sans';r.dataset.platform=/Win/.test(navigator.userAgentData?.platform||navigator.platform)?'windows':'other';r.style.fontSize=scale+'%'})();`;
  const tabsScript = `document.addEventListener('click',function(event){var button=event.target.closest('[data-shortcode-tab]');if(!button)return;var group=button.closest('[data-shortcode-tabs]');var id=button.dataset.shortcodeTab;group.querySelectorAll('[data-shortcode-tab="'+id+'"]').forEach(function(tab){var active=tab===button;tab.setAttribute('aria-selected',String(active));tab.tabIndex=active?0:-1;var panel=group.querySelector('#'+tab.getAttribute('aria-controls'));if(panel)panel.hidden=!active;});});`;
  const collapseScript = `document.querySelectorAll('.shortcode-collapse').forEach(function(details){details.dataset.collapseReady='';details.classList.toggle('is-expanded',details.open);var body=details.querySelector(':scope>.shortcode-body');if(body instanceof HTMLElement&&details.open)body.style.height='auto';});document.addEventListener('click',function(event){var summary=event.target.closest('.shortcode-collapse>summary');if(!summary)return;var details=summary.parentElement;if(!(details instanceof HTMLDetailsElement))return;event.preventDefault();var body=details.querySelector(':scope>.shortcode-body');if(!(body instanceof HTMLElement))return;var expand=!details.classList.contains('is-expanded');details.classList.toggle('is-expanded',expand);if(matchMedia('(prefers-reduced-motion: reduce)').matches){details.open=expand;body.style.height=expand?'auto':'';delete details.dataset.animating;return;}var height=body.getBoundingClientRect().height;details.open=true;body.style.height=height+'px';void body.offsetHeight;details.dataset.animating='true';body.style.height=(expand?body.scrollHeight:0)+'px';});document.addEventListener('transitionend',function(event){var body=event.target;if(!(body instanceof HTMLElement)||!body.classList.contains('shortcode-body')||event.propertyName!=='height')return;var details=body.parentElement;if(!(details instanceof HTMLDetailsElement))return;var expanded=details.classList.contains('is-expanded');details.open=expanded;body.style.height=expanded?'auto':'';delete details.dataset.animating;});`;
 ---
@@ -42,7 +42,7 @@ const dateText = `${date.year} 年 ${date.month} 月 ${date.day} 日`;
    <div class="prose" data-pagefind-body><Content /></div>
    <ImageLightbox />
    {tags.length > 0 && <div class="mt-10 flex flex-wrap justify-center gap-2 border-t border-line pt-5 text-sm" aria-label="标签">
-      {tags.map((tag) => <a class="rounded-[3px] bg-raised px-2.5 py-1 no-underline" href={`/tags/${slugify(tag)}/`}>#{tag}</a>)}
+      {tags.map((tag) => <a class="rounded-[3px] bg-[var(--color-post-tag-bg)] px-2.5 py-1 no-underline" href={`/tags/${slugify(tag)}/`}>#{tag}</a>)}
    </div>}
    <nav class="mt-10 grid grid-cols-1 overflow-hidden rounded-[4px] border border-line bg-raised sm:grid-cols-2" aria-label="相邻文章" data-pagefind-ignore="all">
      {newer ? <a class="grid min-h-24 content-center p-4 no-underline sm:border-r sm:border-line" href={getPostPath(newer)}><span class="text-xs text-subtle">下一篇</span><strong class="mt-1 font-sans text-base font-normal">{newer.data.title}</strong></a> : <span class="grid min-h-24 content-center p-4 sm:border-r sm:border-line"><span class="text-xs text-subtle">下一篇</span><strong class="mt-1 font-sans text-base font-normal">没有更多了</strong></span>}
@@ -1,8 +1,30 @@
 .prose {
-  width: min(100%, var(--article-content-width));
+  width: 100%;
  color: var(--color-text);
  font-family: var(--reading-font-family);
-  font-size: 1em;
+  font-size: 1.0625rem;
+  line-height: 1.8;
+}
+
+@media (min-width: 1456px) and (max-width: 1919px) {
+  :root[data-platform='windows'] .prose { font-size: 1.125rem; }
+}
+
+@media (min-width: 1920px) {
+  .prose { font-size: 1.125rem; }
+}
+
+@media (min-width: 2400px) {
+  .prose { font-size: 1.125rem; }
+}
+
+:root[data-font='serif'] .prose {
+  font-size: 1.125rem;
+  line-height: 2;
+}
+
+@media (min-width: 1920px) {
+  :root[data-font='serif'] .prose { font-size: 1.1875rem; }
 }

 .prose :where(p, li, blockquote, td, th) { overflow-wrap: anywhere; }
@@ -24,8 +46,6 @@
 }

 .prose h2 {
-  padding-bottom: 0.25em;
-  border-bottom: 1px solid var(--color-border);
  font-size: 1.65rem;
 }

@@ -72,7 +92,7 @@
 }

 .prose :not(pre) > code {
-  padding: 0.15em 0.35em;
+  padding: 0.2em 0.45em;
  border-radius: var(--radius-sm);
  background: var(--color-code);
  font-family: var(--mirages-font-code);
@@ -80,12 +100,12 @@
 }

 :root[data-theme='dark'] .prose :not(pre) > code {
-  background: var(--color-surface);
+  background: #464242;
 }

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .prose :not(pre) > code {
-    background: var(--color-surface);
+    background: #464242;
  }
 }

@@ -113,12 +133,60 @@
  line-height: 1.45;
 }

+.prose .astro-code code {
+  --code-line-digits: 1;
+  display: block;
+  padding-block: 1rem;
+  counter-reset: code-line;
+  font-size: 0;
+}
+
+.prose .astro-code code:has(.line:nth-child(10)) { --code-line-digits: 2; }
+.prose .astro-code code:has(.line:nth-child(100)) { --code-line-digits: 3; }
+.prose .astro-code code:has(.line:nth-child(1000)) { --code-line-digits: 4; }
+
+.prose .astro-code .line {
+  display: flex;
+  min-height: 1.45em;
+  counter-increment: code-line;
+  font-size: .875rem;
+  line-height: 1.45;
+}
+
+.prose .astro-code .line::before {
+  display: inline-block;
+  width: calc(var(--code-line-digits) * 1ch + 2rem);
+  flex: 0 0 calc(var(--code-line-digits) * 1ch + 2rem);
+  margin-right: 1rem;
+  padding-inline: 1rem;
+  background: var(--color-code-gutter);
+  box-sizing: border-box;
+  color: var(--color-muted);
+  content: counter(code-line);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.72;
+  text-align: right;
+  user-select: none;
+}
+
+.prose .astro-code .line:first-child::before {
+  box-shadow: 0 -1rem var(--color-code-gutter);
+}
+
+.prose .astro-code .line:last-child::before {
+  box-shadow: 0 1rem var(--color-code-gutter);
+}
+
+.prose .astro-code .line:only-child::before {
+  box-shadow: 0 -1rem var(--color-code-gutter), 0 1rem var(--color-code-gutter);
+}
+
 .prose .astro-code span {
  color: var(--shiki-light);
 }

 :root[data-theme='dark'] .prose .astro-code {
-  background: var(--color-code);
+  background-color: var(--color-code);
  color: var(--shiki-dark);
 }

@@ -128,7 +196,7 @@

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .prose .astro-code {
-    background: var(--color-code);
+    background-color: var(--color-code);
    color: var(--shiki-dark);
  }

@@ -136,6 +204,12 @@
    color: var(--shiki-dark);
  }
 }
+
+.prose .astro-code {
+  padding: 0;
+  background: var(--color-code);
+}
+
 .prose .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: .35em; }

 .prose .mermaid { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 1rem 0; }
@@ -154,9 +154,15 @@ a {
  .card-list-shell {
     width: min(calc(100% - 1.75rem), var(--page-width));
  }
+}
+
+@media (max-width: 767px) {
+  html {
+    scrollbar-gutter: auto;
+  }

  .article-shell {
-     width: min(calc(100% - 3.125rem), var(--article-content-width));
+     width: min(calc(100% - 2.75rem), 666px);
  }
 }

@@ -190,11 +190,12 @@
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
+  font-family: var(--reading-font-family);
 }
 .shortcode-tools-title {
  margin: 0 0 0.55rem;
  color: var(--color-text);
-  font: 600 1rem/1.35 var(--mirages-font-ui);
+  font: 600 1rem/1.35 var(--reading-font-family);
 }
 .shortcode-tool-list {
  display: grid;
@@ -261,7 +262,7 @@
 }
 .shortcode-tool-name {
  font-size: 0.9rem;
-  font-family: var(--mirages-font-ui);
+  font-family: var(--reading-font-family);
  line-height: 1.25;
 }
 .shortcode-tool-description {
@@ -7,6 +7,8 @@
  --color-muted: #6e6a68;
  --color-border: #dedbd8;
  --color-code: #f0eeeb;
+  --color-code-gutter: #dedfdf;
+  --color-post-tag-bg: #eeeeee;
  --color-archive-hover: #f0f0f0;
  --heatmap-0: #ebedf0;
  --heatmap-1: #9be9a8;
@@ -24,6 +26,8 @@
  --color-muted: #786d63;
  --color-border: #ded1c0;
  --color-code: #eee3d3;
+  --color-code-gutter: #d4c8b8;
+  --color-post-tag-bg: #e9ddcc;
  --color-archive-hover: var(--color-code);
  --heatmap-0: #e9dfd0;
  --heatmap-1: #9be9a8;
@@ -41,6 +45,8 @@
  --color-muted: #aaa5a0;
  --color-border: #504c4b;
  --color-code: #242222;
+  --color-code-gutter: #3c3939;
+  --color-post-tag-bg: #3c3939;
  --color-archive-hover: var(--color-surface);
  --heatmap-0: #454242;
  --heatmap-1: #0e4429;
@@ -61,6 +67,8 @@
    --color-muted: #aaa5a0;
    --color-border: #504c4b;
    --color-code: #242222;
+    --color-code-gutter: #3c3939;
+    --color-post-tag-bg: #3c3939;
    --color-archive-hover: var(--color-surface);
    --heatmap-0: #454242;
    --heatmap-1: #0e4429;
@@ -82,6 +90,8 @@
    --color-muted: #6e6a68;
    --color-border: #dedbd8;
    --color-code: #f0eeeb;
+    --color-code-gutter: #dedfdf;
+    --color-post-tag-bg: #eeeeee;
    --color-archive-hover: #f0f0f0;
    --heatmap-0: #ebedf0;
    --heatmap-1: #9be9a8;
@@ -9,14 +9,14 @@
  --color-accent-strong: #138a74;
  --color-accent-contrast: #102b27;
  --mirages-font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --mirages-font-sans: "Mirages Custom", Merriweather, "Open Sans", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif;
+  --mirages-font-sans: "Mirages Custom", Merriweather, "Open Sans", "PingFang SC", "Noto Sans SC", "Noto Sans TC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif;
  --mirages-font-serif: "Noto Serif SC", serif;
  --mirages-font-code: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
  --font-sans: var(--mirages-font-sans);
  --font-serif: var(--mirages-font-serif);
  --reading-font-family: var(--mirages-font-sans);
  --content-width: 704px;
-  --article-content-width: 606px;
+  --article-content-width: 628px;
  --page-width: 720px;
  --nav-height: 4rem;
  --radius-sm: .25rem;
@@ -25,42 +25,66 @@
  --transition-fast: 160ms ease;
 }

-@media (min-width: 1302px) {
+:root[data-font='serif'] {
+  --article-content-width: 684px;
+}
+
+@media (min-width: 1251px) {
  :root {
    --content-width: 848px;
-    --article-content-width: 662px;
+    --article-content-width: 684px;
    --page-width: 864px;
  }
+
+  :root[data-font='serif'] {
+    --article-content-width: 742px;
+  }
 }

@media (min-width: 1600px) {
  :root {
    --content-width: 880px;
-    --article-content-width: 720px;
+    --article-content-width: 742px;
    --page-width: 896px;
  }
+
+  :root[data-font='serif'] {
+    --article-content-width: 802px;
+  }
 }

@media (min-width: 1800px) {
  :root {
    --content-width: 944px;
-    --article-content-width: 752px;
+    --article-content-width: 774px;
    --page-width: 960px;
  }
+
+  :root[data-font='serif'] {
+    --article-content-width: 842px;
+  }
 }

@media (min-width: 1920px) {
  :root {
    --content-width: 976px;
-    --article-content-width: 800px;
+    --article-content-width: 822px;
    --page-width: 992px;
  }
+
+  :root[data-font='serif'] {
+    --article-content-width: 902px;
+  }
 }

@media (min-width: 2400px) {
  :root {
    --content-width: 1008px;
-    --article-content-width: 850px;
+    --article-content-width: 872px;
    --page-width: 1024px;
  }
+
+  :root[data-font='serif'] {
+    --article-content-width: 962px;
+  }
 }