From ef9b29b4194a28219fdb5d3cc824853b3d164c6e Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Sun, 6 Apr 2025 01:04:10 +0800 Subject: [PATCH] style(docs): 98.css style --- docs/astro.config.ts | 1 + docs/src/layouts/98.astro | 7 + docs/src/styles/98-patched.css | 279 +++++++++++++++++++++++++++++++++ 3 files changed, 287 insertions(+) create mode 100644 docs/src/layouts/98.astro create mode 100644 docs/src/styles/98-patched.css diff --git a/docs/astro.config.ts b/docs/astro.config.ts index 1db067e40..fd37b8a49 100644 --- a/docs/astro.config.ts +++ b/docs/astro.config.ts @@ -40,6 +40,7 @@ export default defineConfig({ customCss: [ './src/styles/custom.css', '@fontsource/quicksand/300.css', + '@fontsource/fusion-pixel-12px-proportional-sc/400.css', ], }), ], diff --git a/docs/src/layouts/98.astro b/docs/src/layouts/98.astro new file mode 100644 index 000000000..fc8087b81 --- /dev/null +++ b/docs/src/layouts/98.astro @@ -0,0 +1,7 @@ +--- +import { getCollection, render } from 'astro:content'; +import '98.css'; +import '../styles/98-patched.css'; +--- + + diff --git a/docs/src/styles/98-patched.css b/docs/src/styles/98-patched.css new file mode 100644 index 000000000..7996924b1 --- /dev/null +++ b/docs/src/styles/98-patched.css @@ -0,0 +1,279 @@ +@font-face { + font-family: 'Departure Mono'; + src: + url('https://cdn.jsdelivr.net/gh/OverflowCat/blog@test_a/font/departure-mono/DepartureMono-Regular.woff2') + format('woff2'), + url('https://cdn.jsdelivr.net/gh/OverflowCat/blog@test_a/font/departure-mono/DepartureMono-Regular.woff') + format('woff'), + url('https://cdn.jsdelivr.net/gh/OverflowCat/blog@test_a/font/departure-mono/DepartureMono-Regular.otf') + format('opentype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +body { + font-family: 'Departure Mono', 'Fusion Pixel 12px Proportional SC', monospace; + color-scheme: light; + background: #ddd !important; + font-size: 14px; +} + +starlight-menu-button button { + padding: 0; + min-width: 0; + display: flex; + align-items: center; + justify-content: center; +} + +starlight-menu-button button svg { + font-size: 2em; + color: black; +} + +.content-panel { + padding: 0; +} + +.content-panel .sl-container .sl-markdown-content { + padding: 0 0 !important; +} + +.content-panel .sl-container h1, +.content-panel .sl-container h2, +.content-panel .sl-container h3, +.content-panel .sl-container h4, +.content-panel .sl-container h5, +.content-panel .sl-container h6 { + margin-top: 2em; + color: #000; + font-size: 2em; +} + +@media (max-width: 72rem) { + .content-panel .sl-container h1, + .content-panel .sl-container h2, + .content-panel .sl-container h3, + .content-panel .sl-container h4, + .content-panel .sl-container h5, + .content-panel .sl-container h6 { + margin-top: 0.5em; + } +} +.content-panel .sl-container .sl-markdown-content p > code { + font-family: 'Departure Mono', 'Fusion Pixel 12px Proportional SC', monospace; + background-color: #00007b; + color: #fff; +} + +.content-panel .sl-container .sl-markdown-content p a code { + font-family: 'Departure Mono', 'Fusion Pixel 12px Proportional SC', monospace; + background-color: #00007b; +} + +.content-panel .sl-container .sl-markdown-content .expressive-code pre { + background: #fff; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + display: block; + margin: 0; + padding: 6px; +} + +.content-panel .sl-container .sl-markdown-content .expressive-code pre code { + font-family: 'Departure Mono', 'Fusion Pixel 12px Proportional SC', monospace; +} + +.content-panel .sl-container .sl-markdown-content .title-bar { +} + +.content-panel .sl-container .sl-markdown-content .title-bar .title-bar-controls, +.content-panel .sl-container .sl-markdown-content .title-bar .title-bar-controls button { + margin-top: 0; +} + +@media (min-width: 72rem) { + [data-has-sidebar][data-has-toc] div.main-pane { + width: calc(100% - 300px); + } +} + +.main-pane { + position: relative; + z-index: -1; +} + +.main-pane main { + display: flex; + justify-content: center; + width: 100%; +} + +@media (max-width: 1200px) { + .main-pane main { + padding-left: 2em; + padding-right: 2em; + display: block; + } +} + +.main-pane main .content-panel:first-child { + display: none; +} + +.main-pane main .content-panel:not(:first-child) { + border-top: none; +} + +.devlog-window { + background: silver; + box-shadow: + inset -1px -1px #0a0a0a, + inset 1px 1px #dfdfdf, + inset -2px -2px grey, + inset 2px 2px #fff; + padding: 3px; +} + +.sidebar-pane .sidebar-content { + color: #000; + background: #fff; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + display: block; + margin: 0; + padding: 6px; +} + +summary .group-label .large { + color: #000; +} + +.sidebar-content li a, +.right-sidebar-panel li a { + color: #000; + border-radius: 0; + background-color: unset; +} + +.sidebar-content li a:hover, +.right-sidebar-panel li a:hover { + color: #000; + background-color: unset; +} + +.sidebar-content li a:active, +.right-sidebar-panel li a:active { + box-shadow: + inset -1px -1px #fff, + inset 1px 1px #0a0a0a, + inset -2px -2px #dfdfdf, + inset 2px 2px grey; + text-shadow: 1px 1px #222; +} + +.sidebar-content li a:focus, +.right-sidebar-panel li a:focus { + background-color: navy; + color: #fff; +} + +.right-sidebar { + color: #000; + border: none; +} + +.right-sidebar-container { + position: fixed; + height: calc(100% - 65px); + right: 0; + width: 300px; +} + +@media (max-width: 72rem) { + .right-sidebar-container { + display: none; + } +} + +@media (min-width: 72rem) { + .right-sidebar-container { + position: fixed; + top: 0; + border-inline-start: 1px solid var(--sl-color-hairline); + margin-top: var(--sl-nav-height); + height: 100vh; + overflow-y: auto; + scrollbar-width: none; + } +} + +.right-sidebar-panel nav h2 { + color: #000; +} + +.right-sidebar-container .right-sidebar { + margin-top: calc(var(--sl-nav-height)); + color: #000; + background: #fff; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + display: block; + padding: 6px; +} + +@media (max-width: 72rem) { + .right-sidebar-container .right-sidebar { + margin-top: 0; + padding: 0; + } +} + +.pagination-links a { + background: silver; + border: none; + border-radius: 0; + box-shadow: + inset -1px -1px #0a0a0a, + inset 1px 1px #fff, + inset -2px -2px grey, + inset 2px 2px #dfdfdf; + box-sizing: border-box; + color: transparent; + min-height: 23px; + min-width: 75px; + padding: 0 12px; + text-shadow: 0 0 #222; +} + +.pagination-links a:not(:disabled):active { + box-shadow: + inset -1px -1px #fff, + inset 1px 1px #0a0a0a, + inset -2px -2px #dfdfdf, + inset 2px 2px grey; + text-shadow: 1px 1px #222; +} + +.pagination-links a:not(:disabled):focus { + outline: 1px dotted #000; + outline-offset: -4px; +} + +mobile-starlight-toc { + color: white; +} + +starlight-theme-select select { + color: black; +}