From 2a4c090c5d13298142d02280b03073590d94b870 Mon Sep 17 00:00:00 2001 From: ClovertaTheTrilobita Date: Thu, 18 Jun 2026 17:19:12 +0800 Subject: [PATCH] chore code --- src/styles/global.css | 111 +-------------------------------- src/styles/latest-comments.css | 2 +- src/styles/posts.css | 108 ++++++++++++++++++++++++++++++++ src/styles/variables.css | 5 +- 4 files changed, 115 insertions(+), 111 deletions(-) create mode 100644 src/styles/posts.css diff --git a/src/styles/global.css b/src/styles/global.css index 69d590b..041a567 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -4,6 +4,7 @@ @import "./latest-comments.css"; @import "./variables.css"; @import "./dialog.css"; +@import "./posts.css"; pre { padding: 1rem; @@ -117,7 +118,7 @@ h1 { a { - color: #3D74B6; + color: var(--url-color); font-weight: 700; text-decoration: none; } @@ -162,111 +163,3 @@ img { height: auto; display: block; } - -/* 避免 Markdown 内容撑宽正文 */ -.post-article, -.post-content { - min-width: 0; - max-width: 100%; -} - -/* 块级公式过长时独立横向滚动 */ -.post-content .katex-display { - display: block; - width: 100%; - max-width: 100%; - overflow-x: auto; - overflow-y: hidden; - box-sizing: border-box; - padding: 0.25rem 0; - -webkit-overflow-scrolling: touch; -} - -.post-content .katex-display > .katex { - display: inline-block; - min-width: max-content; - white-space: nowrap; -} - -/* ========================= - Markdown details 下拉栏 - ========================= */ - -.post-content details { - min-width: 0; - max-width: 100%; - box-sizing: border-box; - margin: 1.5rem 0; - overflow: hidden; - - border-top: 2px solid #1e3a5f; - border-radius: 0 0 0.5rem 0.5rem; - background: rgba(128, 128, 128, 0.14); -} - -.post-content details summary { - display: flex; - align-items: center; - gap: 0.5rem; - - min-width: 0; - max-width: 100%; - box-sizing: border-box; - padding: 0.8rem 0.9rem; - - cursor: pointer; - font-weight: 600; - user-select: none; - list-style: none; -} - -.post-content details summary::-webkit-details-marker { - display: none; -} - -.post-content details summary::before { - content: "›"; - display: inline-block; - flex: 0 0 auto; - font-size: 1.25rem; - line-height: 1; - transition: transform 0.2s ease; -} - -.post-content details[open] summary::before { - transform: rotate(90deg); -} - -.post-content details > :not(summary) { - min-width: 0; - max-width: 100%; - box-sizing: border-box; - margin-top: 0; - margin-bottom: 0; - padding-right: 1rem; -} - -.post-content details > ol, -.post-content details > ul { - padding: 0.6rem 1rem 1rem 3rem; -} - -.post-content details li { - margin: 0.8rem 0; -} - -blockquote { - margin: 1.25rem 0; - padding: 0.75rem 1rem; - border-left: 4px solid var(--deep-red); - background: rgba(128, 128, 128, 0.1); - border-radius: 0 0.4rem 0.4rem 0; -} - -blockquote p { - margin: 0; -} - -blockquote p + p { - margin-top: 0.75rem; -} diff --git a/src/styles/latest-comments.css b/src/styles/latest-comments.css index 7751854..58d3548 100644 --- a/src/styles/latest-comments.css +++ b/src/styles/latest-comments.css @@ -38,7 +38,7 @@ margin: 0 0 14px 0; padding: 0.6rem 1rem; border: 2px dashed #aeb8c2; - background-color: #fbf5f2; + background-color: var(--comment-background); } diff --git a/src/styles/posts.css b/src/styles/posts.css new file mode 100644 index 0000000..c403eea --- /dev/null +++ b/src/styles/posts.css @@ -0,0 +1,108 @@ + +/* 避免 Markdown 内容撑宽正文 */ +.post-article, +.post-content { + min-width: 0; + max-width: 100%; +} + +/* 块级公式过长时独立横向滚动 */ +.post-content .katex-display { + display: block; + width: 100%; + max-width: 100%; + overflow-x: auto; + overflow-y: hidden; + box-sizing: border-box; + padding: 0.25rem 0; + -webkit-overflow-scrolling: touch; +} + +.post-content .katex-display > .katex { + display: inline-block; + min-width: max-content; + white-space: nowrap; +} + +/* ========================= + Markdown details 下拉栏 + ========================= */ + +.post-content details { + min-width: 0; + max-width: 100%; + box-sizing: border-box; + margin: 1.5rem 0; + overflow: hidden; + + border-top: 2px solid #1e3a5f; + border-radius: 0 0 0.5rem 0.5rem; + background: rgba(128, 128, 128, 0.14); +} + +.post-content details summary { + display: flex; + align-items: center; + gap: 0.5rem; + + min-width: 0; + max-width: 100%; + box-sizing: border-box; + padding: 0.8rem 0.9rem; + + cursor: pointer; + font-weight: 600; + user-select: none; + list-style: none; +} + +.post-content details summary::-webkit-details-marker { + display: none; +} + +.post-content details summary::before { + content: "›"; + display: inline-block; + flex: 0 0 auto; + font-size: 1.25rem; + line-height: 1; + transition: transform 0.2s ease; +} + +.post-content details[open] summary::before { + transform: rotate(90deg); +} + +.post-content details > :not(summary) { + min-width: 0; + max-width: 100%; + box-sizing: border-box; + margin-top: 0; + margin-bottom: 0; + padding-right: 1rem; +} + +.post-content details > ol, +.post-content details > ul { + padding: 0.6rem 1rem 1rem 3rem; +} + +.post-content details li { + margin: 0.8rem 0; +} + +blockquote { + margin: 1.25rem 0; + padding: 0.75rem 1rem; + border-left: 4px solid var(--deep-red); + background: rgba(128, 128, 128, 0.1); + border-radius: 0 0.4rem 0.4rem 0; +} + +blockquote p { + margin: 0; +} + +blockquote p + p { + margin-top: 0.75rem; +} diff --git a/src/styles/variables.css b/src/styles/variables.css index 8b14afc..71e5df7 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -1,8 +1,11 @@ +/* 默认配色 */ :root { --deep-blue: #536493; --deep-red: #ef5a6f; --background-color: #f9f2ed; - --text-color: #0E2F56; + --text-color: #0e2f56; + --url-color: #3D74B6; + --comment-background: #fbf5f2; --background-color-dark: #1e1e1e; --text-color-dark: #e6e6e6;