From 7cd34ec3c0044ecca4b73b1f032219eef4bd650c Mon Sep 17 00:00:00 2001 From: seaHi Date: Thu, 16 Jul 2026 19:08:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=20VOID=20=E9=A3=8E?= =?UTF-8?q?=E6=A0=BC=E6=96=87=E7=AB=A0=E4=BE=A7=E8=BE=B9=E7=9B=AE=E5=BD=95?= =?UTF-8?q?=E5=8F=8A=E4=BB=A3=E7=A0=81=E5=9D=97=E5=A2=9E=E5=BC=BA=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.css | 435 ++++++++++++++++++++++++--- src/routes/+layout.svelte | 5 - src/routes/posts/[slug]/+page.svelte | 206 ++++++++++--- 3 files changed, 565 insertions(+), 81 deletions(-) diff --git a/src/app.css b/src/app.css index 84b9a24..c7fdf35 100644 --- a/src/app.css +++ b/src/app.css @@ -301,74 +301,245 @@ body.single-col .post-list { } .article-content { - font-family: var(--font-sans); - font-size: 1.05rem; - line-height: 2.2; + font: 400 18px/1.75 'Open Sans', var(--font-sans); + word-break: break-word; } .article-content p { - margin-bottom: 1.5em; + margin: 0.92em 0; } -/* DoIt Style Code Block Wrapper */ -.code-block { +.article-content h1, +.article-content h2, +.article-content h3, +.article-content h4, +.article-content h5, +.article-content h6 { + font-family: var(--font-sans); position: relative; - margin: 1.5rem 0; - border-radius: 4px; - overflow: hidden; - background-color: #f5f5f5; } +.article-content h1 { + font-size: 1.8em; + margin: 1.206em 0 0.36em; +} + +.article-content > h1 { + margin-top: 0; + font-size: 2.2em; +} + +.article-content h2 { + font-size: 1.5em; + margin: 1.005em 0 0.375em; + border-bottom: none; + padding-bottom: 0; +} + +.article-content h3 { + font-size: 1.17em; + margin: 1em 0 0.2925em; +} + +.article-content h4, +.article-content h5, +.article-content h6 { + font-size: 1em; + margin: 1em 0 0.35em; +} + +.article-content h6 { + font-weight: 500; +} + +.article-content a:not([data-fancybox="gallery"]):not(.post-like):not(.edit-button) { + word-wrap: break-word; + word-break: break-all; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + transition: border-color 0.2s; + text-decoration: none; +} + +.article-content a:not([data-fancybox="gallery"]):not(.post-like):not(.edit-button):hover { + border-color: #000; + opacity: 1; +} + +.article-content img { + max-width: 100%; + height: auto; + display: block; + margin: 0 auto; +} + +/* 适配 VOID 的图文混排结构 (figure + figcaption) */ +.article-content figure { + margin: 1.5rem 0; + text-align: center; +} + +.article-content figcaption { + font-size: 0.9rem; + color: #888; + margin-top: 0.5rem; +} + +/* ========== DoIt 代码块样式 ========== */ + +.highlight, +.code-block { + font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace; + font-size: 0.875rem; +} + +.code-block code, +.code-block pre { + background-color: #f5f5f5 !important; +} + +.code-block { + margin: 0.5rem 0; + border-radius: 0; + overflow: hidden; +} + +/* 标题栏 — 高度与 admonition-title 精确对齐 */ .code-block-header { display: flex; justify-content: space-between; align-items: center; + width: 100%; background-color: #ededed; - padding: 0.4rem 0.8rem; - font-size: 0.85rem; - color: var(--text-color); + font-size: 1rem; } -.code-title { - font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace; - font-weight: 500; - color: var(--text-color); -} - -.code-header-actions { +.code-block-title-btn { + margin: 0; display: flex; align-items: center; - gap: 1rem; -} - -.copy-code-button { + flex: 1; background: none; border: none; cursor: pointer; + padding: 0.25rem 2rem; color: inherit; - padding: 0; + font: inherit; + position: relative; +} + +/* 箭头图标 — 与 admonition 完全一致的绝对定位和间距 */ +.code-block-title-btn .chevron-icon { + font-size: 0.9rem; + width: 0.85em; + height: 0.85em; + position: absolute; + top: 0.6rem; + left: 0.75rem; + transition: transform 0.3s ease-in-out; +} + +.code-block.is-open .code-block-title-btn .chevron-icon { + transform: rotate(90deg); +} + +.code-block-title-btn .code-title { + user-select: none; + display: block; + line-height: 1.6; +} + +/* 右侧按钮区 */ +.code-header-actions { display: flex; align-items: center; - transition: color 0.2s; } -.copy-code-button:hover { - color: var(--accent-color, #bd6262); +.code-header-actions button, +.code-header-actions .ellipsis-icon { + background: none; + border: none; + cursor: pointer; + user-select: none; + margin-inline: 0.5rem; + padding: 0; + color: inherit; + display: flex; + align-items: center; } +/* 操作按钮：默认隐藏，展开时显示 */ +.code-header-actions .action-icon { + display: none; +} +.code-block.is-open .code-header-actions .action-icon { + display: flex; +} + +/* 省略号：默认显示，展开时隐藏 */ +.code-header-actions .ellipsis-icon { + display: flex; +} +.code-block.is-open .code-header-actions .ellipsis-icon { + display: none; +} + +/* 按钮激活态（行号/换行开启时高亮） */ +.code-header-actions button.is-active { + color: #2d809a; +} +.code-header-actions button:hover { + color: #2d809a; +} + +/* pre */ .code-block pre { + display: block; margin: 0; - padding: 1rem; - overflow: auto; - -webkit-overflow-scrolling: touch; - line-height: 1.6; - font-size: 0.875rem; - font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace; - background-color: transparent !important; - color: var(--text-color); + padding: 0; border-radius: 0; } +/* code — max-height + padding 同时过渡，收缩彻底无残留 */ +.code-block pre code { + display: block !important; + margin: 0; + max-height: 0; + padding: 0; + transition: max-height 0.3s ease-out, padding 0.3s ease-out; + overflow: hidden; + line-height: 1.6; +} + +/* 覆盖 highlight.js github.css 的默认白色背景 */ +.code-block pre code.hljs { + padding: 0.8rem 0.75rem; + background: #f5f5f5 !important; + overflow-x: auto; +} +.code-block.is-closed pre code.hljs { + padding-top: 0 !important; + padding-bottom: 0 !important; + overflow: hidden !important; /* 防止横向滚动条撑开高度导致“半行内容”残留 */ +} + +/* ---- 行号功能 ---- */ +.code-block.show-line-numbers pre code .code-line::before { + counter-increment: codeblock; + content: counter(codeblock); + display: inline-block; + min-width: 2.5ch; + text-align: right; + margin-right: 0.75rem; + color: #8c8fa1; + user-select: none; +} + +/* ---- 换行功能 ---- */ +.code-block.is-wrap pre code { + white-space: pre-wrap; + word-break: break-all; +} + .article-content code:not(pre code) { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; @@ -597,3 +768,195 @@ footer { background-color: var(--accent-color); opacity: 1; } + +/* ========== VOID 风格 TOC (侧栏目录) ========== */ + +.toc-mask { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.85); + z-index: 3; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 0.3s; + display: block; +} + +@media screen and (max-width: 1199.5px) { + .sidebar-show .toc-mask { + opacity: 1; + visibility: visible; + transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } +} + +.TOC { + position: fixed; + top: 0; + bottom: 0; + z-index: 4; + overflow: auto; + -webkit-overflow-scrolling: touch; + width: 280px; + right: -280px; + background-color: #111; /* VOID style dark background */ + box-shadow: -2px 0 8px rgba(0,0,0,0.05); + padding: 1rem; + padding-right: 0; + padding-top: 60px; + transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.TOC::-webkit-scrollbar { + display: none; +} + +.TOC::before { + content: "Contents"; + position: absolute; + left: 0; + top: 0; + line-height: 60px; + height: 60px; + width: 100%; + font-size: 18px; + font-weight: 600; + text-transform: uppercase; + text-align: center; + color: #b0b0b0; /* VOID style dark text */ + box-sizing: border-box; +} + +.sidebar-show .TOC { + right: 0; +} + +/* 目录内容列表样式 */ +.TOC .toc-list { + position: relative; + list-style: none; + padding-left: 0; + margin: 0; + line-height: 2.1; +} +.TOC .toc-list .toc-list { + position: unset; + padding-left: 1rem; +} + +.TOC .is-collapsible { + max-height: 1000px; + overflow: hidden; + transition: all 300ms ease-in-out; +} + +.TOC .is-collapsed { + max-height: 0; +} + +.TOC li a { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: block; + width: 100%; + color: #b0b0b0; /* VOID style dark text */ + transition: color 0.2s; + text-decoration: none; +} + +.TOC li a:hover, .TOC li a.is-active-link { + color: #54bc4b; + opacity: 1; +} + +.TOC li a.is-active-link { + font-weight: 700; +} + +.TOC .is-active-link::before { + content: ""; + background-color: rgba(0, 0, 0, 0.3); /* VOID style dark highlight */ + display: block; + height: 2.1rem; + left: -1rem; + position: absolute; + width: calc(100% + 1rem); + border-left: 2px solid #54BC4B; + z-index: -1; + box-sizing: border-box; +} + +@media screen and (min-width: 1199.5px) { + .TOC .toc-link:hover::before { + content: ""; + background-color: rgba(0, 0, 0, 0.3); + display: block; + height: 2.1rem; + left: -1rem; + position: absolute; + width: calc(100% + 1rem); + border-left: 2px solid #54BC4B; + z-index: -1; + box-sizing: border-box; + } +} + +/* 主体偏移 */ +@media screen and (min-width: 1199.5px) { + div.contents-wrap { + transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + .sidebar-show div.contents-wrap { + transform: translateX(-140px); + } +} + +@media screen and (max-width: 1199.5px) { + div.contents-wrap { + transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } +} + +/* 展开/关闭按钮 */ +#toggle-toc { + position: fixed; + right: 20px; + bottom: 70px; + width: 40px; + height: 40px; + background-color: var(--header-bg); + border-radius: 50%; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 101; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: #fff; +} + +#toggle-toc:hover { + background-color: var(--accent-color); +} + +#toggle-toc svg { + width: 20px; + height: 20px; + transition: transform 0.3s; +} + +.sidebar-show #toggle-toc svg { + transform: rotate(180deg); +} + +@media screen and (min-width: 1199.5px) { + .sidebar-show #toggle-toc { + right: 300px; + } +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 0dfaca0..299ab81 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -73,11 +73,6 @@