riseforever2026/Blog
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主题大Debuff

Browse Source
This commit is contained in:
RiseForever
2026-08-11 21:07:54 +08:00
parent cc8dbd1233
commit 3a9fcb6c0f
9 changed files with 378 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/content.css
+83 -9
View File
@@ -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; }
src/styles/global.css
+7 -1
View File
@@ -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);
}
}
src/styles/shortcodes.css
+3 -2
View File
@@ -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 {
src/styles/themes.css
+10
View File
@@ -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;
src/styles/tokens.css
+32 -8
View File
@@ -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;
}
}