diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/README.md | 7 | ||||
| -rw-r--r-- | docs/_zh_CN/README.md | 5 | ||||
| -rw-r--r-- | docs/_zh_CN/index.html | 8 | ||||
| -rw-r--r-- | docs/_zh_CN/pages/1-intro.md | 16 | ||||
| -rw-r--r-- | docs/css/dark.css | 923 | ||||
| -rw-r--r-- | docs/css/light.css | 884 | ||||
| -rw-r--r-- | docs/doc.html | 14 | ||||
| -rw-r--r-- | docs/example-pages/examples.json | 281 | ||||
| -rw-r--r-- | docs/example-viewer.html | 628 | ||||
| -rw-r--r-- | docs/examples.html | 488 | ||||
| -rw-r--r-- | docs/index.html | 116 | ||||
| -rw-r--r-- | docs/play/play.html | 6 | ||||
| -rw-r--r-- | docs/play/player.js | 9 | ||||
| -rw-r--r-- | docs/play/style.css | 136 |
14 files changed, 2318 insertions, 1203 deletions
diff --git a/docs/README.md b/docs/README.md index 151e348..15c072e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,9 +1,4 @@ -<p align="center"> - <a href="https://github.com/CatilGrass/mingling"> - <img alt="Mingling" src="res/pixel_icon_o_1024.png" width="40%"> - </a> -</p> -<h1 align="center">Mingling Documentation</h1> +<h1 align="center">Mingling Helpdoc</h1> <p align="center"> This is documentation for the <b>Mingling</b> command-line framework, maintained by <a href="https://github.com/Weicao-CatilGrass">Weicao-CatilGrass</a> diff --git a/docs/_zh_CN/README.md b/docs/_zh_CN/README.md index 36019aa..b302220 100644 --- a/docs/_zh_CN/README.md +++ b/docs/_zh_CN/README.md @@ -1,8 +1,3 @@ -<p align="center"> - <a href="https://github.com/CatilGrass/mingling"> - <img alt="Mingling" src="../res/pixel_icon_o_1024.png" width="40%"> - </a> -</p> <h1 align="center">Mingling 中文文档 🇨🇳</h1> <p align="center"> diff --git a/docs/_zh_CN/index.html b/docs/_zh_CN/index.html index e3841b7..db89bae 100644 --- a/docs/_zh_CN/index.html +++ b/docs/_zh_CN/index.html @@ -16,9 +16,10 @@ <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link - href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Roboto+Mono&family=Dosis:wght@500&display=swap" + href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet" /> + <link rel="stylesheet" href="../css/light.css" /> <link id="dark-style" @@ -30,11 +31,6 @@ <body> <nav> - <a href="https://crates.io/crates/mingling">发布页</a> - <a href="https://docs.rs/mingling/latest/mingling/">API文档</a> - <a href="https://git.catilgrass.cn/catilgrass/mingling.git" - ><b>源代码</b></a - > <a href="#" onclick=" diff --git a/docs/_zh_CN/pages/1-intro.md b/docs/_zh_CN/pages/1-intro.md index eea766b..8c5472d 100644 --- a/docs/_zh_CN/pages/1-intro.md +++ b/docs/_zh_CN/pages/1-intro.md @@ -11,22 +11,6 @@ 若您在使用过程中遇到任何问题，欢迎提交 [Issue](https://github.com/catilgrass/mingling/issues)，我们乐意解决。 -<div style="display: flex; gap: 16px; padding: 8px; align-items: stretch; max-width: 90%;"> - <div style="flex-shrink: 0; display: flex; align-items: center;"> - <a href="https://github.com/catilgrass/mingling" target="_blank"> - <img src="../res/pixel_icon_core_1024.png" style="height: 120px; object-fit: contain; padding: 8px;" /> - </a> - </div> - <div style="display: flex; flex-direction: column; justify-content: flex-start;"> - <div style="font-weight: bold; font-size: 1.2em; margin-bottom: 8px;"> - <a href="https://github.com/catilgrass/mingling" target="_blank" style="text-decoration: none; color: inherit;">Mingling - Github</a> - </div> - <div style="color: #555;"> - A Rust CLI framework for many subcmds & complex workflows, reduces boilerplate via proc macros, focus on biz logic - </div> - </div> -</div> - ## Mingling 是什么？ **Mingling** 是一款 Rust 命令行开发框架，更准确地说，它是一款在调度、执行、渲染等方面提供高度抽象的框架。 diff --git a/docs/css/dark.css b/docs/css/dark.css index 551be70..b14f3dc 100644 --- a/docs/css/dark.css +++ b/docs/css/dark.css @@ -1,9 +1,8 @@ /* - * Based on vue.css - * Original: https://cdn.jsdelivr.net/npm/docsify@4.13.1/lib/themes/vue.css + * Mingling Helpdoc — Dark theme (Imperial Edict style) + * Warm dark parchment / gold & vermilion accents */ -@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600"); * { -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; @@ -15,9 +14,9 @@ body:not(.ready) { overflow: hidden; } +body:not(.ready) [data-cloak], body:not(.ready) .app-nav, -body:not(.ready) > nav, -body:not(.ready) [data-cloak] { +body:not(.ready) > nav { display: none; } div#app { @@ -26,61 +25,57 @@ div#app { margin: 40vh auto; text-align: center; } -div#app:empty:before { +div#app:empty::before { content: "Loading..."; } img.emoji { height: 1.2em; -} -img.emoji, -span.emoji { vertical-align: middle; } span.emoji { font-family: - Apple Color Emoji, - Segoe UI Emoji, - Segoe UI Symbol, - Noto Color Emoji; + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; font-size: 1.2em; + vertical-align: middle; } + +/* ── Progress bar ── */ .progress { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); + background-color: #c43931; height: 2px; - left: 0; + left: 0px; position: fixed; - right: 0; - top: 0; + right: 0px; + top: 0px; transition: width 0.2s, opacity 0.4s; - width: 0; + width: 0%; z-index: 999999; } -.search .search-keyword, + +/* ── Search ── */ .search a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); + color: #d4a84b; } .search .search-keyword { + color: #d4a84b; font-style: normal; - font-weight: 700; + font-weight: bold; } -body, -html { + +/* ── Base ── */ +html, +body { height: 100%; } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - background-color: #121212 !important; - color: #f4fefe; - font-family: - Source Sans Pro, - Helvetica Neue, - Arial, - sans-serif; + background-color: #1a1410; + color: #e8ddd0; + font-family: "Noto Serif SC", Georgia, "Times New Roman", serif; font-size: 15px; letter-spacing: 0; margin: 0; @@ -94,8 +89,8 @@ a[disabled] { opacity: 0.6; } kbd { - border: 1px solid #ccc; - border-radius: 3px; + border: solid 1px #3a2e24; + border-radius: 2px; display: inline-block; font-size: 12px !important; line-height: 12px; @@ -107,6 +102,8 @@ li input[type="checkbox"] { margin: 0 0.2em 0.25em 0; vertical-align: middle; } + +/* ── Nav bar ── */ .app-nav { margin: 25px 60px 0 0; position: absolute; @@ -124,26 +121,24 @@ li input[type="checkbox"] { margin: 0 1rem; padding: 5px 0; } -.app-nav li, -.app-nav ul { +.app-nav ul, +.app-nav li { display: inline-block; list-style: none; margin: 0; } .app-nav a { - color: inherit; + color: #9a8a7a; font-size: 16px; text-decoration: none; transition: color 0.3s; } -.app-nav a.active, .app-nav a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); + color: #d4a84b; } .app-nav a.active { - border-bottom: 2px solid #ff5722; - border-bottom: 2px solid var(--theme-color, #ff5722); + border-bottom: 2px solid #d4a84b; + color: #d4a84b; } .app-nav li { display: inline-block; @@ -153,10 +148,9 @@ li input[type="checkbox"] { cursor: pointer; } .app-nav li ul { - background-color: #fff; - border: 1px solid; - border-color: #ddd #ddd #ccc; - border-radius: 4px; + background-color: #241c16; + border: 1px solid #3a2e24; + border-radius: 2px; box-sizing: border-box; display: none; max-height: calc(100vh - 61px); @@ -187,6 +181,8 @@ li input[type="checkbox"] { .app-nav li:hover ul { display: block; } + +/* ── GitHub corner ── */ .github-corner { border-bottom: 0; position: fixed; @@ -196,15 +192,16 @@ li input[type="checkbox"] { z-index: 1; } .github-corner:hover .octo-arm { - animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 560ms ease-in-out; } .github-corner svg { - color: #fff; - fill: #ff5722; - fill: var(--theme-color, #ff5722); + color: #1a1410; + fill: #d4a84b; height: 80px; width: 80px; } + +/* ── Main ── */ main { display: block; position: relative; @@ -221,20 +218,23 @@ main.hidden { transition: all 0.3s; } .anchor span { - color: #f4fefe; + color: #e8ddd0; } .anchor:hover { text-decoration: underline; } + +/* ── Sidebar ── */ .sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); + background-color: #0e0a08; + border-right: 1px solid rgba(212, 168, 75, 0.1); overflow-y: auto; padding: 40px 0 0; position: absolute; top: 0; bottom: 0; left: 0; - transition: transform 0.25s ease-out; + transition: transform 250ms ease-out; width: 300px; z-index: 20; } @@ -243,6 +243,7 @@ main.hidden { font-size: 1.5rem; font-weight: 300; text-align: center; + color: #e8ddd0; } .sidebar > h1 a { color: inherit; @@ -266,6 +267,7 @@ main.hidden { .sidebar li > p { font-weight: 700; margin: 0; + color: #e8ddd0; } .sidebar ul, .sidebar ul li { @@ -274,10 +276,31 @@ main.hidden { .sidebar ul li a { border-bottom: none; display: block; + color: #9a8a7a; + font-size: 14px; + font-weight: 400; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + transition: color 0.2s; +} +.sidebar ul li a:hover { + color: #d4a84b; } .sidebar ul li ul { padding-left: 20px; } +.sidebar ul li.active > a { + border-right: 2px solid #c43931; + color: #d4a84b; + font-weight: 600; + background: linear-gradient( + to left, + rgba(196, 57, 49, 0.15), + transparent 30% + ); +} .sidebar::-webkit-scrollbar { width: 4px; } @@ -286,14 +309,15 @@ main.hidden { border-radius: 4px; } .sidebar:hover::-webkit-scrollbar-thumb { - background: hsla(0, 0%, 53.3%, 0.4); + background: rgba(212, 168, 75, 0.3); } .sidebar:hover::-webkit-scrollbar-track { - background: hsla(0, 0%, 53.3%, 0.1); + background: rgba(212, 168, 75, 0.08); } + +/* ── Sidebar toggle ── */ .sidebar-toggle { background-color: transparent; - background-color: transparent; border: 0; outline: none; padding: 10px; @@ -310,8 +334,7 @@ main.hidden { opacity: 0.4; } .sidebar-toggle span { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); + background-color: #d4a84b; display: block; margin-bottom: 4px; width: 16px; @@ -321,6 +344,8 @@ body.sticky .sidebar, body.sticky .sidebar-toggle { position: fixed; } + +/* ── Content ── */ .content { padding-top: 60px; position: absolute; @@ -328,16 +353,15 @@ body.sticky .sidebar-toggle { right: 0; bottom: 0; left: 300px; - transition: left 0.25s ease; - background-color: #121212; + transition: left 250ms ease; } + +/* ── Markdown ── */ .markdown-section { margin: 0 auto; max-width: 80%; - padding: 30px 45px 40px; + padding: 30px 15px 40px 15px; position: relative; - background-color: #121212; - color: #fefefe; } .markdown-section > * { box-sizing: border-box; @@ -348,14 +372,9 @@ body.sticky .sidebar-toggle { } .markdown-section hr { border: none; - border-bottom: 1px solid #323232; + border-bottom: 1px solid #3a2e24; margin: 2em 0; } -.markdown-section iframe { - border: 1px solid #eee; - width: 1px; - min-width: 100%; -} .markdown-section table { border-collapse: collapse; border-spacing: 0; @@ -365,311 +384,28 @@ body.sticky .sidebar-toggle { width: 100%; } .markdown-section th { - font-weight: 700; + border: 1px solid #3a2e24; + font-weight: bold; + padding: 6px 13px; + color: #e8ddd0; + background-color: #241c16; } -.markdown-section td, -.markdown-section th { - border: 1px solid #333; +.markdown-section td { + border: 1px solid #3a2e24; padding: 6px 13px; } .markdown-section tr { - border-top: 1px solid #222; + border-top: 1px solid #3a2e24; } -.markdown-section p.tip, .markdown-section tr:nth-child(2n) { - background-color: #252525; -} -.markdown-section p.tip { - border-bottom-right-radius: 2px; - border-left: 4px solid #ff4081; - border-top-right-radius: 2px; - margin: 2em 0; - padding: 12px 24px 12px 30px; - position: relative; -} -.markdown-section p.tip:before { - background-color: #ff4081; - border-radius: 100%; - color: #fff; - content: "!"; - font-family: - Dosis, - Source Sans Pro, - Helvetica Neue, - Arial, - sans-serif; - font-size: 14px; - font-weight: 700; - left: -12px; - line-height: 20px; - position: absolute; - height: 20px; - width: 20px; - text-align: center; - top: 14px; -} -.markdown-section p.tip code { - background-color: #efefef; -} -.markdown-section p.tip em { - color: #f4fefe; -} -.markdown-section p.warn { - background: rgba(66, 185, 131, 0.1); - border-radius: 2px; - padding: 1rem; -} -.markdown-section ul.task-list > li { - list-style-type: none; -} -body.close .sidebar { - transform: translateX(-300px); -} -body.close .sidebar-toggle { - width: auto; -} -body.close .content { - left: 0; -} -@media print { - .app-nav, - .github-corner, - .sidebar, - .sidebar-toggle { - display: none; - } -} -@media screen and (max-width: 768px) { - .github-corner, - .sidebar, - .sidebar-toggle { - position: fixed; - } - .app-nav { - margin-top: 16px; - } - .app-nav li ul { - top: 30px; - } - main { - height: auto; - min-height: 100vh; - overflow-x: hidden; - } - .sidebar { - left: -300px; - transition: transform 0.25s ease-out; - } - .content { - left: 0; - max-width: 100vw; - position: static; - padding-top: 20px; - transition: transform 0.25s ease; - } - .app-nav, - .github-corner { - transition: transform 0.25s ease-out; - } - .sidebar-toggle { - background-color: transparent; - width: auto; - padding: 30px 30px 10px 10px; - } - body.close .sidebar { - transform: translateX(300px); - } - body.close .sidebar-toggle { - transition: background-color 1s; - width: 284px; - padding: 10px; - } - body.close .content { - transform: translateX(300px); - } - body.close .app-nav, - body.close .github-corner { - display: none; - } - .github-corner:hover .octo-arm { - animation: none; - } - .github-corner .octo-arm { - animation: octocat-wave 0.56s ease-in-out; - } -} -@keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } -} -section.cover { - position: relative; - align-items: center; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - min-height: 100vh; - width: 100%; - display: none; -} -section.cover.show { - display: flex; -} -section.cover.has-mask .mask { - background-color: #fff; - opacity: 0.8; - position: absolute; - top: 0; - bottom: 0; - width: 100%; -} -section.cover .cover-main { - flex: 1; - margin: 0 16px; - text-align: center; - position: relative; -} -section.cover a { - color: inherit; -} -section.cover a, -section.cover a:hover { - text-decoration: none; -} -section.cover p { - line-height: 1.5rem; - margin: 1em 0; -} -section.cover h1 { - color: inherit; - font-size: 2.5rem; - font-weight: 300; - margin: 0.625rem 0 2.5rem; - position: relative; - text-align: center; -} -section.cover h1 a { - display: block; -} -section.cover h1 small { - bottom: -0.4375rem; - font-size: 1rem; - position: absolute; -} -section.cover blockquote { - font-size: 1.5rem; - text-align: center; -} -section.cover ul { - line-height: 1.8; - list-style-type: none; - margin: 1em auto; - max-width: 500px; - padding: 0; -} -section.cover .cover-main > p:last-child a { - border-radius: 2rem; - border: 1px solid #ff5722; - border-color: var(--theme-color, #ff5722); - box-sizing: border-box; - color: #ff5722; - color: var(--theme-color, #ff5722); - display: inline-block; - font-size: 1.05rem; - letter-spacing: 0.1rem; - margin: 0.5rem 1rem; - padding: 0.75em 2rem; - text-decoration: none; - transition: all 0.15s ease; -} -section.cover .cover-main > p:last-child a:last-child { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); - color: #fff; -} -section.cover .cover-main > p:last-child a:last-child:hover { - color: inherit; - opacity: 0.8; -} -section.cover .cover-main > p:last-child a:hover { - color: inherit; -} -section.cover blockquote > p > a { - border-bottom: 2px solid #ff5722; - border-bottom: 2px solid var(--theme-color, #ff5722); - transition: color 0.3s; -} -section.cover blockquote > p > a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); -} -.sidebar, -body { - background-color: #fefefe; -} -.sidebar { - background-color: #080808; - color: #fefefe; -} -.sidebar li { - margin: 6px 0; -} -.sidebar ul li a { - color: #fefefe; - font-size: 14px; - font-weight: 400; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; -} -.sidebar ul li a:hover { - text-decoration: underline; -} -.sidebar ul li ul { - padding: 0; -} -.sidebar ul li.active > a { - border-right: 2px solid; - color: #ff5722; - color: var(--theme-color, #ff5722); - font-weight: 600; - background: linear-gradient(to left, #ff572255, transparent 30%); - text-shadow: 0 0 8px rgba(255, 87, 34, 0.3); -} -.sidebar ul li > a:hover { - background: linear-gradient( - to left, - rgba(255, 87, 34, 0.05), - transparent 50% - ); -} -.app-sub-sidebar li:before { - content: "-"; - padding-right: 4px; - float: left; + background-color: #1e1612; } .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong { - color: #f2fefe; - font-weight: 600; -} -.markdown-section a { - color: #ff5722; - color: var(--theme-color, #ff5722); + color: #e8ddd0; font-weight: 600; } .markdown-section h1 { @@ -686,106 +422,85 @@ body { } .markdown-section h4 { font-size: 1.25rem; + margin: 35px 0 0.5rem; } .markdown-section h5 { font-size: 1rem; } .markdown-section h6 { - color: #777; - font-size: 1rem; + font-size: 0.9rem; + color: #9a8a7a; } -.markdown-section figure, -.markdown-section p { - margin: 1.2em 0; -} -.markdown-section ol, -.markdown-section p, -.markdown-section ul { - line-height: 1.6rem; - word-spacing: 0.05rem; +.markdown-section a { + color: #d4a84b; } -.markdown-section ol, -.markdown-section ul { - padding-left: 1.5rem; +.markdown-section code { + color: #e8c46a; + background-color: #241c16; + border-radius: 2px; + padding: 0.15em 0.4em; } -.markdown-section blockquote { - border-left: 4px solid #ff5722; - border-left: 4px solid var(--theme-color, #ff5722); - color: #858585; - margin: 2em 0; - padding-left: 20px; +.markdown-section pre { + background-color: #241c16; + border: 1px solid #3a2e24; + border-radius: 2px; + padding: 1rem; + overflow-x: auto; } -.markdown-section blockquote p { - font-weight: 600; - margin-left: 0; +.markdown-section pre > code { + background: transparent; + padding: 0; + color: #e8ddd0; } -.markdown-section iframe { +.markdown-section blockquote { + border-left: 3px solid #c43931; + color: #9a8a7a; margin: 1em 0; + padding: 0.5em 1em; } -.markdown-section em { - color: #7f8c8d; +.markdown-section p.tip { + background-color: #241c16; + border-bottom-right-radius: 2px; + border-left: 4px solid #c43931; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; } -.markdown-section code, -.markdown-section output:after, -.markdown-section pre { - font-family: - Roboto Mono, - Monaco, - courier, - monospace; +.markdown-section p.tip:before { + background-color: #c43931; + border-radius: 100%; + color: #e8ddd0; + content: "!"; + font-family: "Noto Serif SC", Georgia, "Times New Roman", serif; + font-size: 14px; + font-weight: bold; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; } -.markdown-section code, -.markdown-section pre { - background-color: #212121; +.markdown-section p.tip code { + background-color: #1a1410; } -.markdown-section output, -.markdown-section pre { - margin: 1.2em 0; - position: relative; - border-radius: 6px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +.markdown-section p.tip em { + color: #d4a84b; } -.markdown-section output, -.markdown-section pre > code { +.markdown-section p.warn { + background: rgba(212, 168, 75, 0.06); border-radius: 2px; - display: block; + padding: 1rem; } -.markdown-section output:after, -.markdown-section pre > code { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; +.markdown-section ul.task-list > li { + list-style-type: none; } -.markdown-section code { + +/* ── Flexible alerts (docsify-plugin-flexible-alerts) ── */ +.alert.callout { border-radius: 2px; - color: #f64739; - margin: 0 2px; - padding: 3px 5px; - white-space: pre-wrap; -} -.markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code { - font-size: 0.8rem; -} -.markdown-section pre { - padding: 0 1.4rem; - line-height: 1.5rem; - overflow: auto; - word-wrap: normal; -} -.markdown-section pre > code { - color: #525252; - font-size: 0.8rem; - padding: 2.2em 5px; - line-height: inherit; - margin: 0 2px; - max-width: inherit; - overflow: inherit; - white-space: inherit; -} -.markdown-section pre code { - color: #eee; -} -.markdown-section pre code .token.punctuation { - color: #eee; } .alert.callout.note { border: 1px solid #00bcd4; @@ -837,99 +552,74 @@ body { .alert.callout.attention a { color: #f9483b; } -.markdown-section output { - padding: 1.7rem 1.4rem; - border: 1px dotted #ccc; -} -.markdown-section output > :first-child { - margin-top: 0; -} -.markdown-section output > :last-child { - margin-bottom: 0; -} -.markdown-section code:after, -.markdown-section code:before, -.markdown-section output:after, -.markdown-section output:before { - letter-spacing: 0.05rem; -} -.markdown-section output:after, -.markdown-section pre:after { - color: #ccc; - font-size: 0.6rem; - font-weight: 600; - height: 15px; - line-height: 15px; - padding: 5px 10px 0; - position: absolute; - right: 0; - text-align: right; - top: 0; - content: attr(data-lang); +.alert.callout code { + background-color: transparent; } + +/* ── Prism syntax highlighting ── */ .token.cdata, .token.comment, .token.doctype, .token.prolog { - color: #8e908c; + color: #6a5a4a; } .token.namespace { opacity: 0.7; } .token.boolean, .token.number { - color: #4caf50; + color: #d4a84b; } .token.punctuation { - color: #525252; + color: #6a5a4a; } .token.property { - color: #c08b30; + color: #e8c46a; } .token.tag { - color: #ff5722; + color: #c43931; } .token.string { - color: #4caf50; - color: var(--theme-color, #4caf50); + color: #b8943e; } .token.selector { - color: #6679cc; + color: #7a9aba; } .token.attr-name { - color: #2973b7; + color: #9a8a7a; } .language-css .token.string, .style .token.string, .token.entity, .token.url { - color: #22a2c9; + color: #6a9aba; } .token.attr-value, .token.control, .token.directive, .token.unit { - color: #ff5722; - color: var(--theme-color, #ff5722); + color: #d4a84b; +} +.token.function { + color: #d4a84b; } -.token.function, .token.keyword { - color: #f44336; + color: #c43931; } .token.atrule, .token.regex, .token.statement { - color: #22a2c9; + color: #6a9aba; } .token.placeholder, .token.variable { - color: #3d8fd1; + color: #7a9aba; } .token.deleted { text-decoration: line-through; } .token.inserted { - border-bottom: 1px dotted #202746; + border-bottom: 1px dotted #3a2e24; text-decoration: none; } .token.italic { @@ -940,7 +630,7 @@ body { font-weight: 700; } .token.important { - color: #c94922; + color: #c43931; } .token.entity { cursor: help; @@ -953,23 +643,11 @@ code .token { left: auto; } -/* App name link styles */ -.app-name-link { - display: inline-block; - color: #f4fefe; - font-size: 1.5rem; - font-weight: 700; - text-decoration: none; - padding: 0 20px; - line-height: 1.5; -} - -/* Search styles */ +/* ── Search ── */ .search { - background-color: #101010; - border-bottom-width: 0px !important; + background-color: #0e0a08; + border-bottom: none !important; } - .search .input-wrap { position: relative; display: flex; @@ -978,22 +656,21 @@ code .token { .search .input-wrap input[type="search"] { width: 100%; padding: 8px 40px 8px 12px; - border: 1px solid #444; - border-radius: 4px; + border: 1px solid #3a2e24; + border-radius: 2px; font-size: 14px; outline: none; transition: border-color 0.3s; box-sizing: border-box; - background-color: #1f1f1f; - color: #f4fefe; + background-color: #241c16; + color: #e8ddd0; } .search .input-wrap input[type="search"]::placeholder { - color: #888; + color: #6a5a4a; } .search .input-wrap input[type="search"]:focus { - border-color: #ff5722; - border-color: var(--theme-color, #ff5722); - box-shadow: 0 0 0 3px #ff572212; + border-color: #d4a84b; + box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.15); } .search .input-wrap .clear-button { position: absolute; @@ -1006,25 +683,235 @@ code .token { justify-content: center; opacity: 0.4; transition: opacity 0.3s; - color: #666; + color: #6a5a4a; } .search .input-wrap .clear-button:hover { opacity: 0.7; } .search .results-panel { margin-top: 8px; - border: 1px solid #444; - border-radius: 4px; - background: #2a2a2a; + border: 1px solid #3a2e24; + border-radius: 2px; + background: #241c16; max-height: 300px; overflow-y: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - color: #f4fefe; + color: #e8ddd0; +} + +.app-name-link { + display: inline-block; + color: #d4a84b; + font-size: 1.5rem; + font-weight: 700; + text-decoration: none; + padding: 0 20px; + line-height: 1.5; } .markdown-section iframe { border: none; - border-radius: 16px; + border-radius: 2px; + display: block; + margin: 1em auto; + width: 1px; + min-width: 100%; +} + +/* ── Body close states ── */ +body.close .sidebar { + transform: translateX(-300px); +} +body.close .sidebar-toggle { + width: auto; +} +body.close .content { + left: 0; +} + +/* ── Print ── */ +@media print { + .github-corner, + .sidebar-toggle, + .sidebar, + .app-nav { + display: none; + } +} + +/* ── Mobile ── */ +@media screen and (max-width: 768px) { + .github-corner, + .sidebar-toggle, + .sidebar { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + min-height: 100vh; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 250ms ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 250ms ease; + } + .app-nav, + .github-corner { + transition: transform 250ms ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: rgba(14, 10, 8, 0.9); + transition: 1s background-color; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + animation: none; + } + .github-corner .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } +} +@keyframes octocat-wave { + 0%, + 100% { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +section.cover { + position: relative; + align-items: center; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + min-height: 100vh; + width: 100%; + display: none; +} +section.cover.show { + display: flex; +} +section.cover.has-mask .mask { + background-color: #1a1410; + opacity: 0.85; + position: absolute; + top: 0; + bottom: 0; + width: 100%; +} +section.cover .cover-main { + flex: 1; + margin: 0 16px; + text-align: center; + position: relative; +} +section.cover a { + color: inherit; + text-decoration: none; +} +section.cover a:hover { + text-decoration: none; +} +section.cover p { + line-height: 1.5rem; + margin: 1em 0; + color: #9a8a7a; +} +section.cover h1 { + color: #e8ddd0; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; +} +section.cover h1 a { display: block; +} +section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; + color: #9a8a7a; +} +section.cover blockquote { + font-size: 1.5rem; + text-align: center; + color: #e8ddd0; +} +section.cover ul { + line-height: 1.8; + list-style-type: none; margin: 1em auto; + max-width: 500px; + padding: 0; +} +section.cover .cover-main > p:last-child a { + border-color: #d4a84b; + border-radius: 2px; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + color: #d4a84b; + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; +} +section.cover .cover-main > p:last-child a:last-child { + background-color: #c43931; + border-color: #c43931; + color: #e8ddd0; +} +section.cover .cover-main > p:last-child a:last-child:hover { + opacity: 0.85; +} +section.cover .cover-main > p:last-child a:hover { + background: rgba(212, 168, 75, 0.08); +} +section.cover blockquote > p > a { + border-bottom: 2px solid #d4a84b; + transition: color 0.3s; +} +section.cover blockquote > p > a:hover { + color: #d4a84b; } diff --git a/docs/css/light.css b/docs/css/light.css index fd04754..17aa40a 100644 --- a/docs/css/light.css +++ b/docs/css/light.css @@ -1,9 +1,8 @@ /* - * Based on vue.css - * Original: https://cdn.jsdelivr.net/npm/docsify@4.13.1/lib/themes/vue.css + * Mingling Helpdoc — Light theme (Imperial Edict style) + * Cream parchment / gold & vermilion accents */ -@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600"); * { -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; @@ -15,9 +14,9 @@ body:not(.ready) { overflow: hidden; } +body:not(.ready) [data-cloak], body:not(.ready) .app-nav, -body:not(.ready) > nav, -body:not(.ready) [data-cloak] { +body:not(.ready) > nav { display: none; } div#app { @@ -26,60 +25,57 @@ div#app { margin: 40vh auto; text-align: center; } -div#app:empty:before { +div#app:empty::before { content: "Loading..."; } img.emoji { height: 1.2em; -} -img.emoji, -span.emoji { vertical-align: middle; } span.emoji { font-family: - Apple Color Emoji, - Segoe UI Emoji, - Segoe UI Symbol, - Noto Color Emoji; + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; font-size: 1.2em; + vertical-align: middle; } + +/* ── Progress bar ── */ .progress { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); + background-color: #b8352d; height: 2px; - left: 0; + left: 0px; position: fixed; - right: 0; - top: 0; + right: 0px; + top: 0px; transition: width 0.2s, opacity 0.4s; - width: 0; + width: 0%; z-index: 999999; } -.search .search-keyword, + +/* ── Search ── */ .search a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); + color: #b8943e; } .search .search-keyword { + color: #b8943e; font-style: normal; - font-weight: 700; + font-weight: bold; } -body, -html { + +/* ── Base ── */ +html, +body { height: 100%; } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - color: #34495e; - font-family: - Source Sans Pro, - Helvetica Neue, - Arial, - sans-serif; + background-color: #f5ede0; + color: #3a2a1a; + font-family: "Noto Serif SC", Georgia, "Times New Roman", serif; font-size: 15px; letter-spacing: 0; margin: 0; @@ -93,8 +89,8 @@ a[disabled] { opacity: 0.6; } kbd { - border: 1px solid #ccc; - border-radius: 3px; + border: solid 1px #d4c8b8; + border-radius: 2px; display: inline-block; font-size: 12px !important; line-height: 12px; @@ -106,6 +102,8 @@ li input[type="checkbox"] { margin: 0 0.2em 0.25em 0; vertical-align: middle; } + +/* ── Nav bar ── */ .app-nav { margin: 25px 60px 0 0; position: absolute; @@ -123,26 +121,24 @@ li input[type="checkbox"] { margin: 0 1rem; padding: 5px 0; } -.app-nav li, -.app-nav ul { +.app-nav ul, +.app-nav li { display: inline-block; list-style: none; margin: 0; } .app-nav a { - color: inherit; + color: #6a5a4a; font-size: 16px; text-decoration: none; transition: color 0.3s; } -.app-nav a.active, .app-nav a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); + color: #b8943e; } .app-nav a.active { - border-bottom: 2px solid #ff5722; - border-bottom: 2px solid var(--theme-color, #ff5722); + border-bottom: 2px solid #b8943e; + color: #b8943e; } .app-nav li { display: inline-block; @@ -152,10 +148,9 @@ li input[type="checkbox"] { cursor: pointer; } .app-nav li ul { - background-color: #fff; - border: 1px solid; - border-color: #ddd #ddd #ccc; - border-radius: 4px; + background-color: #f0e8d8; + border: 1px solid #d4c8b8; + border-radius: 2px; box-sizing: border-box; display: none; max-height: calc(100vh - 61px); @@ -186,6 +181,8 @@ li input[type="checkbox"] { .app-nav li:hover ul { display: block; } + +/* ── GitHub corner ── */ .github-corner { border-bottom: 0; position: fixed; @@ -195,15 +192,16 @@ li input[type="checkbox"] { z-index: 1; } .github-corner:hover .octo-arm { - animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 560ms ease-in-out; } .github-corner svg { - color: #fff; - fill: #ff5722; - fill: var(--theme-color, #ff5722); + color: #f5ede0; + fill: #b8943e; height: 80px; width: 80px; } + +/* ── Main ── */ main { display: block; position: relative; @@ -220,20 +218,23 @@ main.hidden { transition: all 0.3s; } .anchor span { - color: #34495e; + color: #3a2a1a; } .anchor:hover { text-decoration: underline; } + +/* ── Sidebar ── */ .sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); + background-color: #ede0d0; + border-right: 1px solid rgba(184, 148, 62, 0.15); overflow-y: auto; padding: 40px 0 0; position: absolute; top: 0; bottom: 0; left: 0; - transition: transform 0.25s ease-out; + transition: transform 250ms ease-out; width: 300px; z-index: 20; } @@ -242,6 +243,7 @@ main.hidden { font-size: 1.5rem; font-weight: 300; text-align: center; + color: #3a2a1a; } .sidebar > h1 a { color: inherit; @@ -265,6 +267,7 @@ main.hidden { .sidebar li > p { font-weight: 700; margin: 0; + color: #3a2a1a; } .sidebar ul, .sidebar ul li { @@ -273,10 +276,31 @@ main.hidden { .sidebar ul li a { border-bottom: none; display: block; + color: #6a5a4a; + font-size: 14px; + font-weight: 400; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + transition: color 0.2s; +} +.sidebar ul li a:hover { + color: #b8943e; } .sidebar ul li ul { padding-left: 20px; } +.sidebar ul li.active > a { + border-right: 2px solid #b8352d; + color: #b8943e; + font-weight: 600; + background: linear-gradient( + to left, + rgba(184, 53, 45, 0.12), + transparent 30% + ); +} .sidebar::-webkit-scrollbar { width: 4px; } @@ -285,14 +309,15 @@ main.hidden { border-radius: 4px; } .sidebar:hover::-webkit-scrollbar-thumb { - background: hsla(0, 0%, 53.3%, 0.4); + background: rgba(184, 148, 62, 0.25); } .sidebar:hover::-webkit-scrollbar-track { - background: hsla(0, 0%, 53.3%, 0.1); + background: rgba(184, 148, 62, 0.1); } + +/* ── Sidebar toggle ── */ .sidebar-toggle { background-color: transparent; - background-color: hsla(0, 0%, 100%, 0.8); border: 0; outline: none; padding: 10px; @@ -309,8 +334,7 @@ main.hidden { opacity: 0.4; } .sidebar-toggle span { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); + background-color: #b8943e; display: block; margin-bottom: 4px; width: 16px; @@ -320,6 +344,8 @@ body.sticky .sidebar, body.sticky .sidebar-toggle { position: fixed; } + +/* ── Content ── */ .content { padding-top: 60px; position: absolute; @@ -327,12 +353,14 @@ body.sticky .sidebar-toggle { right: 0; bottom: 0; left: 300px; - transition: left 0.25s ease; + transition: left 250ms ease; } + +/* ── Markdown ── */ .markdown-section { margin: 0 auto; max-width: 80%; - padding: 30px 45px 40px; + padding: 30px 15px 40px 15px; position: relative; } .markdown-section > * { @@ -344,14 +372,9 @@ body.sticky .sidebar-toggle { } .markdown-section hr { border: none; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #d4c8b8; margin: 2em 0; } -.markdown-section iframe { - border: 1px solid #eee; - width: 1px; - min-width: 100%; -} .markdown-section table { border-collapse: collapse; border-spacing: 0; @@ -361,41 +384,97 @@ body.sticky .sidebar-toggle { width: 100%; } .markdown-section th { - font-weight: 700; + border: 1px solid #d4c8b8; + font-weight: bold; + padding: 6px 13px; + color: #3a2a1a; + background-color: #f0e8d8; } -.markdown-section td, -.markdown-section th { - border: 1px solid #ddd; +.markdown-section td { + border: 1px solid #d4c8b8; padding: 6px 13px; } .markdown-section tr { - border-top: 1px solid #ccc; + border-top: 1px solid #d4c8b8; } -.markdown-section p.tip, .markdown-section tr:nth-child(2n) { - background-color: #f8f8f8; + background-color: #e8ddd0; +} +.markdown-section h1, +.markdown-section h2, +.markdown-section h3, +.markdown-section h4, +.markdown-section strong { + color: #3a2a1a; + font-weight: 600; +} +.markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; +} +.markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; +} +.markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; +} +.markdown-section h4 { + font-size: 1.25rem; + margin: 35px 0 0.5rem; +} +.markdown-section h5 { + font-size: 1rem; +} +.markdown-section h6 { + font-size: 0.9rem; + color: #9a8a7a; +} +.markdown-section a { + color: #b8943e; +} +.markdown-section code { + color: #7a6a2a; + background-color: #f0e8d8; + border-radius: 2px; + padding: 0.15em 0.4em; +} +.markdown-section pre { + background-color: #f0e8d8; + border: 1px solid #d4c8b8; + border-radius: 2px; + padding: 1rem; + overflow-x: auto; +} +.markdown-section pre > code { + background: transparent; + padding: 0; + color: #3a2a1a; +} +.markdown-section blockquote { + border-left: 3px solid #b8352d; + color: #6a5a4a; + margin: 1em 0; + padding: 0.5em 1em; } .markdown-section p.tip { + background-color: #f0e8d8; border-bottom-right-radius: 2px; - border-left: 4px solid #ff4081; + border-left: 4px solid #b8352d; border-top-right-radius: 2px; margin: 2em 0; padding: 12px 24px 12px 30px; position: relative; } .markdown-section p.tip:before { - background-color: #ff4081; + background-color: #b8352d; border-radius: 100%; - color: #fff; + color: #3a2a1a; content: "!"; - font-family: - Dosis, - Source Sans Pro, - Helvetica Neue, - Arial, - sans-serif; + font-family: "Noto Serif SC", Georgia, "Times New Roman", serif; font-size: 14px; - font-weight: 700; + font-weight: bold; left: -12px; line-height: 20px; position: absolute; @@ -405,19 +484,241 @@ body.sticky .sidebar-toggle { top: 14px; } .markdown-section p.tip code { - background-color: #efefef; + background-color: #f5ede0; } .markdown-section p.tip em { - color: #34495e; + color: #b8943e; } .markdown-section p.warn { - background: rgba(66, 185, 131, 0.1); + background: rgba(184, 148, 62, 0.08); border-radius: 2px; padding: 1rem; } .markdown-section ul.task-list > li { list-style-type: none; } + +/* ── Flexible alerts (docsify-plugin-flexible-alerts) ── */ +.alert.callout { + border-radius: 2px; +} +.alert.callout.note { + border: 1px solid #00bcd4; + box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2); +} +.alert.callout.tip { + border: 1px solid #4caf50; + box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2); +} +.alert.callout.important { + border: 1px solid #7c4dff; + box-shadow: 0 2px 8px rgba(124, 77, 255, 0.2); +} +.alert.callout.warning { + border: 1px solid #ffc107; + box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2); +} +.alert.callout.attention { + border: 1px solid #f44336; + box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2); +} +.alert.callout.note code { + color: #00c1d9; +} +.alert.callout.tip code { + color: #51af55; +} +.alert.callout.important code { + color: #8152ff; +} +.alert.callout.warning code { + color: #ffc60c; +} +.alert.callout.attention code { + color: #f9483b; +} +.alert.callout.note a { + color: #00c1d9; +} +.alert.callout.tip a { + color: #51af55; +} +.alert.callout.important a { + color: #8152ff; +} +.alert.callout.warning a { + color: #ffc60c; +} +.alert.callout.attention a { + color: #f9483b; +} +.alert.callout code { + background-color: transparent; +} + +/* ── Prism syntax highlighting ── */ +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: #9a8a7a; +} +.token.namespace { + opacity: 0.7; +} +.token.boolean, +.token.number { + color: #b8943e; +} +.token.punctuation { + color: #9a8a7a; +} +.token.property { + color: #8a7a3a; +} +.token.tag { + color: #b8352d; +} +.token.string { + color: #8a7a3a; +} +.token.selector { + color: #5a7aaa; +} +.token.attr-name { + color: #6a5a4a; +} +.language-css .token.string, +.style .token.string, +.token.entity, +.token.url { + color: #4a8aaa; +} +.token.attr-value, +.token.control, +.token.directive, +.token.unit { + color: #b8943e; +} +.token.function { + color: #b8943e; +} +.token.keyword { + color: #b8352d; +} +.token.atrule, +.token.regex, +.token.statement { + color: #4a8aaa; +} +.token.placeholder, +.token.variable { + color: #5a7aaa; +} +.token.deleted { + text-decoration: line-through; +} +.token.inserted { + border-bottom: 1px dotted #d4c8b8; + text-decoration: none; +} +.token.italic { + font-style: italic; +} +.token.bold, +.token.important { + font-weight: 700; +} +.token.important { + color: #b8352d; +} +.token.entity { + cursor: help; +} +code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; + position: relative; + left: auto; +} + +/* ── Search ── */ +.search { + background-color: #ede0d0; + border-bottom: none !important; +} +.search .input-wrap { + position: relative; + display: flex; + align-items: center; +} +.search .input-wrap input[type="search"] { + width: 100%; + padding: 8px 40px 8px 12px; + border: 1px solid #d4c8b8; + border-radius: 2px; + font-size: 14px; + outline: none; + transition: border-color 0.3s; + box-sizing: border-box; + background-color: #f0e8d8; + color: #3a2a1a; +} +.search .input-wrap input[type="search"]::placeholder { + color: #9a8a7a; +} +.search .input-wrap input[type="search"]:focus { + border-color: #b8943e; + box-shadow: 0 0 0 3px rgba(184, 148, 62, 0.15); +} +.search .input-wrap .clear-button { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.6; + transition: opacity 0.3s; + color: #9a8a7a; +} +.search .input-wrap .clear-button:hover { + opacity: 1; +} +.search .results-panel { + margin-top: 8px; + border: 1px solid #d4c8b8; + border-radius: 2px; + background: #f0e8d8; + max-height: 300px; + overflow-y: auto; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + color: #3a2a1a; +} + +.app-name-link { + display: inline-block; + color: #b8943e; + font-size: 1.5rem; + font-weight: 700; + text-decoration: none; + padding: 0 20px; + line-height: 1.5; +} + +.markdown-section iframe { + border: none; + border-radius: 2px; + display: block; + margin: 1em auto; + width: 1px; + min-width: 100%; +} + +/* ── Body close states ── */ body.close .sidebar { transform: translateX(-300px); } @@ -427,18 +728,22 @@ body.close .sidebar-toggle { body.close .content { left: 0; } + +/* ── Print ── */ @media print { - .app-nav, .github-corner, + .sidebar-toggle, .sidebar, - .sidebar-toggle { + .app-nav { display: none; } } + +/* ── Mobile ── */ @media screen and (max-width: 768px) { .github-corner, - .sidebar, - .sidebar-toggle { + .sidebar-toggle, + .sidebar { position: fixed; } .app-nav { @@ -454,18 +759,18 @@ body.close .content { } .sidebar { left: -300px; - transition: transform 0.25s ease-out; + transition: transform 250ms ease-out; } .content { left: 0; max-width: 100vw; position: static; padding-top: 20px; - transition: transform 0.25s ease; + transition: transform 250ms ease; } .app-nav, .github-corner { - transition: transform 0.25s ease-out; + transition: transform 250ms ease-out; } .sidebar-toggle { background-color: transparent; @@ -476,8 +781,8 @@ body.close .content { transform: translateX(300px); } body.close .sidebar-toggle { - background-color: hsla(0, 0%, 100%, 0.8); - transition: background-color 1s; + background-color: rgba(14, 10, 8, 0.9); + transition: 1s background-color; width: 284px; padding: 10px; } @@ -492,12 +797,12 @@ body.close .content { animation: none; } .github-corner .octo-arm { - animation: octocat-wave 0.56s ease-in-out; + animation: octocat-wave 560ms ease-in-out; } } @keyframes octocat-wave { 0%, - to { + 100% { transform: rotate(0); } 20%, @@ -512,7 +817,7 @@ body.close .content { section.cover { position: relative; align-items: center; - background-position: 50%; + background-position: center center; background-repeat: no-repeat; background-size: cover; min-height: 100vh; @@ -523,8 +828,8 @@ section.cover.show { display: flex; } section.cover.has-mask .mask { - background-color: #fff; - opacity: 0.8; + background-color: #f5ede0; + opacity: 0.85; position: absolute; top: 0; bottom: 0; @@ -538,17 +843,18 @@ section.cover .cover-main { } section.cover a { color: inherit; + text-decoration: none; } -section.cover a, section.cover a:hover { text-decoration: none; } section.cover p { line-height: 1.5rem; margin: 1em 0; + color: #6a5a4a; } section.cover h1 { - color: inherit; + color: #3a2a1a; font-size: 2.5rem; font-weight: 300; margin: 0.625rem 0 2.5rem; @@ -562,10 +868,12 @@ section.cover h1 small { bottom: -0.4375rem; font-size: 1rem; position: absolute; + color: #6a5a4a; } section.cover blockquote { font-size: 1.5rem; text-align: center; + color: #3a2a1a; } section.cover ul { line-height: 1.8; @@ -575,12 +883,12 @@ section.cover ul { padding: 0; } section.cover .cover-main > p:last-child a { - border-radius: 2rem; - border: 1px solid #ff5722; - border-color: var(--theme-color, #ff5722); + border-color: #b8943e; + border-radius: 2px; + border-style: solid; + border-width: 1px; box-sizing: border-box; - color: #ff5722; - color: var(--theme-color, #ff5722); + color: #b8943e; display: inline-block; font-size: 1.05rem; letter-spacing: 0.1rem; @@ -590,370 +898,20 @@ section.cover .cover-main > p:last-child a { transition: all 0.15s ease; } section.cover .cover-main > p:last-child a:last-child { - background-color: #ff5722; - background-color: var(--theme-color, #ff5722); - color: #fff; + background-color: #b8352d; + border-color: #b8352d; + color: #3a2a1a; } section.cover .cover-main > p:last-child a:last-child:hover { - color: inherit; - opacity: 0.8; + opacity: 0.85; } section.cover .cover-main > p:last-child a:hover { - color: inherit; + background: rgba(184, 148, 62, 0.1); } section.cover blockquote > p > a { - border-bottom: 2px solid #ff5722; - border-bottom: 2px solid var(--theme-color, #ff5722); + border-bottom: 2px solid #b8943e; transition: color 0.3s; } section.cover blockquote > p > a:hover { - color: #ff5722; - color: var(--theme-color, #ff5722); -} -.sidebar, -body { - background-color: #fefefe; -} -.sidebar { - color: #364149; -} -.sidebar li { - margin: 6px 0; -} -.sidebar ul li a { - color: #505d6b; - font-size: 14px; - font-weight: 400; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; -} -.sidebar ul li a:hover { - text-decoration: underline; -} -.sidebar ul li ul { - padding: 0; -} -.sidebar ul li.active > a { - border-right: 2px solid; - color: #ff5722; - color: var(--theme-color, #ff5722); - font-weight: 600; - background: linear-gradient(to left, #ff572255, transparent 30%); - text-shadow: 0 0 8px rgba(255, 87, 34, 0.3); -} -.sidebar ul li > a:hover { - background: linear-gradient( - to left, - rgba(255, 87, 34, 0.05), - transparent 50% - ); -} -.app-sub-sidebar li:before { - content: "-"; - padding-right: 4px; - float: left; -} -.markdown-section h1, -.markdown-section h2, -.markdown-section h3, -.markdown-section h4, -.markdown-section strong { - color: #2c3e50; - font-weight: 600; -} -.markdown-section a { - color: #ff5722; - color: var(--theme-color, #ff5722); - font-weight: 600; -} -.markdown-section h1 { - font-size: 2rem; - margin: 0 0 1rem; -} -.markdown-section h2 { - font-size: 1.75rem; - margin: 45px 0 0.8rem; -} -.markdown-section h3 { - font-size: 1.5rem; - margin: 40px 0 0.6rem; -} -.markdown-section h4 { - font-size: 1.25rem; -} -.markdown-section h5 { - font-size: 1rem; -} -.markdown-section h6 { - color: #777; - font-size: 1rem; -} -.markdown-section figure, -.markdown-section p { - margin: 1.2em 0; -} -.markdown-section ol, -.markdown-section p, -.markdown-section ul { - line-height: 1.6rem; - word-spacing: 0.05rem; -} -.markdown-section ol, -.markdown-section ul { - padding-left: 1.5rem; -} -.markdown-section blockquote { - border-left: 4px solid #ff5722; - border-left: 4px solid var(--theme-color, #ff5722); - color: #858585; - margin: 2em 0; - padding-left: 20px; -} -.markdown-section blockquote p { - font-weight: 600; - margin-left: 0; -} -.markdown-section iframe { - margin: 1em 0; -} -.markdown-section em { - color: #7f8c8d; -} -.markdown-section code, -.markdown-section output:after, -.markdown-section pre { - font-family: - Roboto Mono, - Monaco, - courier, - monospace; -} -.markdown-section code, -.markdown-section pre { - background-color: #f2f2f2; -} -.markdown-section output, -.markdown-section pre { - margin: 1.2em 0; - position: relative; - border-radius: 6px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); -} -.markdown-section output, -.markdown-section pre > code { - border-radius: 2px; - display: block; -} -.markdown-section output:after, -.markdown-section pre > code { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; -} -.markdown-section code { - border-radius: 2px; - color: #f44336; - margin: 0 2px; - padding: 3px 5px; - white-space: pre-wrap; -} -.markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code { - font-size: 0.8rem; -} -.markdown-section pre { - padding: 0 1.4rem; - line-height: 1.5rem; - overflow: auto; - word-wrap: normal; -} -.markdown-section pre > code { - color: #525252; - font-size: 0.8rem; - padding: 2.2em 5px; - line-height: inherit; - margin: 0 2px; - max-width: inherit; - overflow: inherit; - white-space: inherit; -} -.markdown-section output { - padding: 1.7rem 1.4rem; - border: 1px dotted #ccc; -} -.markdown-section output > :first-child { - margin-top: 0; -} -.markdown-section output > :last-child { - margin-bottom: 0; -} -.markdown-section code:after, -.markdown-section code:before, -.markdown-section output:after, -.markdown-section output:before { - letter-spacing: 0.05rem; -} -.markdown-section output:after, -.markdown-section pre:after { - color: #ccc; - font-size: 0.6rem; - font-weight: 600; - height: 15px; - line-height: 15px; - padding: 5px 10px 0; - position: absolute; - right: 0; - text-align: right; - top: 0; - content: attr(data-lang); -} -.token.cdata, -.token.comment, -.token.doctype, -.token.prolog { - color: #8e908c; -} -.token.namespace { - opacity: 0.7; -} -.token.boolean, -.token.number { - color: #4caf50; -} -.token.punctuation { - color: #525252; -} -.token.property { - color: #c08b30; -} -.token.tag { - color: #ff5722; -} -.token.string { - color: #4caf50; - color: var(--theme-color, #4caf50); -} -.token.selector { - color: #6679cc; -} -.token.attr-name { - color: #2973b7; -} -.language-css .token.string, -.style .token.string, -.token.entity, -.token.url { - color: #22a2c9; -} -.token.attr-value, -.token.control, -.token.directive, -.token.unit { - color: #ff5722; - color: var(--theme-color, #ff5722); -} -.token.function, -.token.keyword { - color: #f44336; -} -.token.atrule, -.token.regex, -.token.statement { - color: #22a2c9; -} -.token.placeholder, -.token.variable { - color: #3d8fd1; -} -.token.deleted { - text-decoration: line-through; -} -.token.inserted { - border-bottom: 1px dotted #202746; - text-decoration: none; -} -.token.italic { - font-style: italic; -} -.token.bold, -.token.important { - font-weight: 700; -} -.token.important { - color: #c94922; -} -.token.entity { - cursor: help; -} -code .token { - -moz-osx-font-smoothing: initial; - -webkit-font-smoothing: initial; - min-height: 1.5rem; - position: relative; - left: auto; -} - -/* App name link styles */ -.app-name-link { - display: inline-block; - color: #34495e; - font-size: 1.5rem; - font-weight: 700; - text-decoration: none; - padding: 0 20px; - line-height: 1.5; -} - -/* Search styles */ -.search .input-wrap { - position: relative; - display: flex; - align-items: center; -} -.search .input-wrap input[type="search"] { - width: 100%; - padding: 8px 40px 8px 12px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 14px; - outline: none; - transition: border-color 0.3s; - box-sizing: border-box; -} -.search .input-wrap input[type="search"]:focus { - border-color: #ff5722; - border-color: var(--theme-color, #ff5722); - box-shadow: 0 0 0 3px #ff572212; -} -.search .input-wrap .clear-button { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.6; - transition: opacity 0.3s; -} -.search .input-wrap .clear-button:hover { - opacity: 1; -} -.search .results-panel { - margin-top: 8px; - border: 1px solid #e0e0e0; - border-radius: 4px; - background: #fff; - max-height: 300px; - overflow-y: auto; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.markdown-section iframe { - border: none; - border-radius: 16px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); - display: block; - margin: 1em auto; + color: #b8943e; } diff --git a/docs/doc.html b/docs/doc.html index 505f02a..f094e67 100644 --- a/docs/doc.html +++ b/docs/doc.html @@ -7,29 +7,25 @@ content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover" /> - <title>Mingling Documents</title> + <title>Mingling Helpdoc</title> <meta - name="Mingling Documents" + name="Mingling Helpdoc" content="Quick start with Mingling and build your command-line program!" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link - href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Roboto+Mono&family=Dosis:wght@500&display=swap" + href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet" /> + <link rel="stylesheet" href="css/light.css" /> <link id="dark-style" rel="stylesheet" href="css/dark.css" disabled /> </head> <body> <nav> - <a href="https://crates.io/crates/mingling">Crates.io</a> - <a href="https://docs.rs/mingling/latest/mingling/">API Docs</a> - <a href="https://git.catilgrass.cn/catilgrass/mingling.git" - ><b>Source</b></a - > <a href="#" onclick=" @@ -44,7 +40,7 @@ <script> window.$docsify = { - name: "Mingling Document", + name: "Mingling Helpdoc", repo: "true", corner: { url: "https://github.com/catilgrass/mingling", diff --git a/docs/example-pages/examples.json b/docs/example-pages/examples.json new file mode 100644 index 0000000..4db968c --- /dev/null +++ b/docs/example-pages/examples.json @@ -0,0 +1,281 @@ +[ + { + "id": "example-basic", + "name": "Basic", + "icon": "🚀", + "category": "core", + "desc": "Example The Basic Usage of Mingling\n", + "tags": [ + "dispatcher!", + "#[chain]", + "#[renderer]" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-argument-parse", + "name": "Argument Parse", + "icon": "📋", + "category": "parsing", + "desc": "Example Argument Parse\n", + "tags": [ + "pick", + "Pickable" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-async-support", + "name": "Async Support", + "icon": "⚡", + "category": "runtime", + "desc": "Example Async Runtime Support\n", + "tags": [ + "async", + "tokio" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-clap-binding", + "name": "Clap Binding", + "icon": "🔗", + "category": "parsing", + "desc": "Example Clap Binding\n", + "tags": [ + "clap" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-completion", + "name": "Completion", + "icon": "🔄", + "category": "ux", + "desc": "Example Completion\n", + "tags": [ + "comp" + ], + "files": [ + "src/main.rs", + "build.rs", + "Cargo.toml" + ] + }, + { + "id": "example-custom-pickable", + "name": "Custom Pickable", + "icon": "🎯", + "category": "parsing", + "desc": "Example Custom Pickable\n", + "tags": [ + "Pickable", + "custom" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-dispatch-tree", + "name": "Dispatch Tree", + "icon": "🌳", + "category": "dispatch", + "desc": "Example Dispatch Tree\n", + "tags": [ + "dispatch_tree" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-enum-tag", + "name": "Enum Tag", + "icon": "🏷️", + "category": "parsing", + "desc": "Example Enum Tag\n", + "tags": [ + "enum_tag", + "Pickable" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-error-handling", + "name": "Error Handling", + "icon": "⚠️", + "category": "runtime", + "desc": "Example Error Handling\n", + "tags": [ + "Result" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-exitcode", + "name": "Exitcode", + "icon": "🚪", + "category": "runtime", + "desc": "Example Error Handling\n", + "tags": [ + "ExitCode" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-general-renderer", + "name": "General Renderer", + "icon": "📤", + "category": "output", + "desc": "Example General Renderer\n", + "tags": [ + "general_renderer", + "--json", + "--yaml" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-help", + "name": "Help", + "icon": "💡", + "category": "ux", + "desc": "Example Help\n", + "tags": [ + "#[helper]" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-hook", + "name": "Hook", + "icon": "🪝", + "category": "runtime", + "desc": "Example Hook\n", + "tags": [ + "ProgramHook" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-implicit-dispatcher", + "name": "Implicit Dispatcher", + "icon": "🫥", + "category": "dispatch", + "desc": "Example Implicit Dispatcher\n", + "tags": [ + "implicit" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-panic-unwind", + "name": "Panic Unwind", + "icon": "💥", + "category": "runtime", + "desc": "Example Panic Unwind\n", + "tags": [ + "panic_unwind" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-repl-basic", + "name": "REPL Basic", + "icon": "🔁", + "category": "repl", + "desc": "Example REPL Basic\n", + "tags": [ + "repl" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-resources", + "name": "Resources", + "icon": "📦", + "category": "advanced", + "desc": "Example Resource Injection\n", + "tags": [ + "Resources", + "injection" + ], + "files": [ + "Cargo.toml", + "src/main.rs", + "src/lib.rs" + ] + }, + { + "id": "example-setup", + "name": "Setup", + "icon": "🏗️", + "category": "core", + "desc": "Example Setup\n", + "tags": [ + "#[setup]", + "extra_macros" + ], + "files": [ + "src/main.rs", + "Cargo.toml" + ] + }, + { + "id": "example-unit-test", + "name": "Unit Test", + "icon": "🧪", + "category": "testing", + "desc": "Example Unit Test\n", + "tags": [ + "testing", + "extra_macros" + ], + "files": [ + "Cargo.toml", + "src/main.rs" + ] + } +]
\ No newline at end of file diff --git a/docs/example-viewer.html b/docs/example-viewer.html new file mode 100644 index 0000000..98eb978 --- /dev/null +++ b/docs/example-viewer.html @@ -0,0 +1,628 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Example — Mìng Lìng</title> + <link rel="icon" type="image/png" href="res/icon_shadow.png" /> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap" + rel="stylesheet" + /> + <link rel="stylesheet" href="scripts/highlight/github-dark.min.css" /> + <style> + *, + *::before, + *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + html { + scroll-behavior: smooth; + } + body { + font-family: "Noto Serif SC", Georgia, "Times New Roman", serif; + background-color: #1a1410; + color: #e8ddd0; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + } + a { + color: #d4a84b; + text-decoration: none; + transition: color 0.2s; + } + a:hover { + color: #e8c46a; + } + + nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.8rem 2rem; + background: rgba(26, 20, 16, 0.88); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(212, 168, 75, 0.12); + } + nav .logo { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 1.1rem; + color: #e8ddd0; + } + nav .logo img { + width: 28px; + height: 28px; + filter: brightness(0) invert(1); + } + nav .nav-links { + display: flex; + gap: 1.5rem; + align-items: center; + font-size: 0.9rem; + } + nav .nav-links a { + color: #9a8a7a; + transition: color 0.2s; + } + nav .nav-links a:hover { + color: #d4a84b; + } + + .viewer { + margin-top: 4rem; + padding: 1.5rem; + max-width: 960px; + margin-left: auto; + margin-right: auto; + } + + .viewer-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1.5rem; + flex-wrap: wrap; + gap: 0.75rem; + } + .viewer-header h1 { + font-size: 1.6rem; + font-weight: 700; + color: #e8ddd0; + } + .viewer-header h1 span { + color: #c43931; + } + .viewer-header .gh-link { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.4rem 1rem; + border: 1px solid #d4a84b; + color: #d4a84b; + font-size: 0.85rem; + font-weight: 600; + border-radius: 2px; + transition: all 0.2s; + } + .viewer-header .gh-link:hover { + background: rgba(212, 168, 75, 0.1); + } + .viewer-header .back-link { + color: #9a8a7a; + font-size: 0.9rem; + } + .viewer-header .back-link:hover { + color: #d4a84b; + } + + .file-tabs { + display: flex; + gap: 0.25rem; + margin-bottom: 0; + flex-wrap: wrap; + } + .file-tabs button { + background: #241c16; + border: 1px solid #3a2e24; + border-bottom: none; + color: #9a8a7a; + padding: 0.4rem 1rem; + font-size: 0.82rem; + font-family: "Cascadia Code", "Fira Code", monospace; + cursor: pointer; + transition: all 0.2s; + border-radius: 2px 2px 0 0; + } + .file-tabs button:hover { + color: #e8ddd0; + border-color: #d4a84b; + } + .file-tabs button.active { + background: #1a1410; + color: #d4a84b; + border-color: #3a2e24; + border-bottom: 1px solid #1a1410; + margin-bottom: -1px; + } + + .code-frame { + background: #1a1410; + border: 1px solid #3a2e24; + border-radius: 0 2px 2px 2px; + padding: 0; + overflow: hidden; + } + .code-frame pre { + margin: 0; + padding: 1.25rem; + overflow-x: auto; + font-family: "Cascadia Code", "Fira Code", monospace; + font-size: 0.85rem; + line-height: 1.65; + } + .code-frame pre code.hljs { + background: transparent; + padding: 0; + } + + .doc-box { + background: #241c16; + border: 1px solid #3a2e24; + border-top: none; + padding: 1.25rem 1.5rem; + font-size: 0.92rem; + line-height: 1.7; + color: #c0b0a0; + } + .doc-box h3 { + font-size: 1.15rem; + font-weight: 700; + color: #d4a84b; + margin-bottom: 0.5rem; + } + .doc-box h4 { + font-size: 1rem; + font-weight: 600; + color: #e8ddd0; + margin-top: 0.75rem; + margin-bottom: 0.25rem; + } + .doc-box p { + margin-bottom: 0.5rem; + } + .doc-box p:last-child { + margin-bottom: 0; + } + .doc-box code { + background: rgba(212, 168, 75, 0.1); + color: #e8c46a; + padding: 0.12em 0.4em; + border-radius: 2px; + font-size: 0.85em; + font-family: "Cascadia Code", "Fira Code", monospace; + } + .doc-box strong { + color: #e8ddd0; + } + + .loading { + text-align: center; + padding: 4rem 1rem; + color: #6a5a4a; + font-size: 1rem; + } + .error { + text-align: center; + padding: 4rem 1rem; + color: #c43931; + } + + footer { + padding: 2rem 1.5rem; + text-align: center; + color: #6a5a4a; + font-size: 0.85rem; + border-top: 1px solid #2a1e14; + margin-top: 3rem; + } + footer a { + color: #7a6a5a; + } + footer a:hover { + color: #d4a84b; + } + + @media (max-width: 600px) { + .viewer { + padding: 1rem; + } + .viewer-header h1 { + font-size: 1.2rem; + } + } + </style> + </head> + <body> + <nav> + <a href="index.html" class="logo"> + <img + src="res/icon.png" + alt="Mingling icon" + width="28" + height="28" + /> + Mìng Lìng + </a> + <div class="nav-links"> + <a href="doc.html">Docs</a> + <a href="examples.html">Examples</a> + <a href="https://github.com/catilgrass/mingling" target="_blank" + >GitHub</a + > + </div> + </nav> + + <div class="viewer"> + <div class="viewer-header"> + <div> + <a href="examples.html" class="back-link" + >← Back to Examples</a + > + <h1> + <span>✦</span> <span id="exampleName">Loading...</span> + </h1> + </div> + <a id="githubLink" href="#" target="_blank" class="gh-link" + >View on GitHub ↗</a + > + </div> + + <div class="file-tabs" id="fileTabs"></div> + <div class="doc-box" id="docBox" style="display: none"></div> + <div class="code-frame" id="codeFrame"> + <div class="loading" id="loadingMsg"> + Loading source code... + </div> + <pre + style="display: none" + id="codePre" + ><code id="codeContent"></code></pre> + </div> + </div> + + <footer> + <p> + Built With ❤️ by + <a href="https://github.com/Weicao-CatilGrass" target="_blank" + >Weicao-CatilGrass</a + > + · Licensed under + <a href="LICENSE-MIT" target="_blank">MIT</a> / + <a href="LICENSE-APACHE" target="_blank">Apache-2.0</a> + </p> + </footer> + + <script src="scripts/highlight/highlight.min.js"></script> + <script src="scripts/highlight/rust.min.js"></script> + <script src="scripts/highlight/bash.min.js"></script> + <script> + (function () { + var params = new URLSearchParams(window.location.search); + var exampleName = params.get("name") || ""; + if (!exampleName) { + document.getElementById("exampleName").textContent = + "No example specified"; + return; + } + + document.getElementById("exampleName").textContent = + exampleName.replace(/^example-/, ""); + document.getElementById("githubLink").href = + "https://github.com/catilgrass/mingling/tree/main/examples/" + + exampleName; + + // ── Load file list from auto-generated JSON ── + fetch("example-pages/examples.json") + .then(function (r) { + if (!r.ok) throw new Error("HTTP " + r.status); + return r.json(); + }) + .then(function (data) { + var matched = null; + for (var i = 0; i < data.length; i++) { + if (data[i].id === exampleName) { + matched = data[i]; + break; + } + } + var files = matched + ? matched.files + : ["Cargo.toml", "src/main.rs"]; + initViewer(files); + }) + .catch(function () { + // Fallback + initViewer(["Cargo.toml", "src/main.rs"]); + }); + + function renderMarkdown(md) { + var html = ""; + var lines = md.split("\n"); + var i = 0; + + while (i < lines.length) { + var line = lines[i]; + + // Fenced code block + var codeMatch = line.match(/^```(\w*)/); + if (codeMatch) { + var lang = codeMatch[1]; + var codeLines = []; + i++; + while ( + i < lines.length && + !lines[i].startsWith("```") + ) { + codeLines.push(lines[i]); + i++; + } + i++; // skip closing ``` + var codeText = escapeHtml(codeLines.join("\n")); + html += + '<pre style="background:#1a1410;border:1px solid #3a2e24;border-radius:2px;padding:0.75rem;margin:0.5rem 0;overflow-x:auto;font-size:0.8rem;line-height:1.5"><code>' + + codeText + + "</code></pre>"; + continue; + } + + // Headings + var hMatch = line.match(/^(#{1,4})\s+(.+)/); + if (hMatch) { + var level = hMatch[1].length; + var tag = level <= 2 ? "h3" : "h4"; + html += + "<" + + tag + + ">" + + inlineMd(hMatch[2]) + + "</" + + tag + + ">"; + i++; + continue; + } + + // Blockquote + if (line.startsWith("> ")) { + var quoteLines = []; + while ( + i < lines.length && + lines[i].startsWith("> ") + ) { + quoteLines.push(lines[i].slice(2)); + i++; + } + html += + '<blockquote style="border-left:3px solid #c43931;padding:0.25em 1em;margin:0.5em 0;color:#9a8a7a">' + + inlineMd(quoteLines.join("<br>")) + + "</blockquote>"; + continue; + } + + // Unordered list + var ulMatch = line.match(/^[-*]\s+(.+)/); + if (ulMatch) { + var items = []; + while ( + i < lines.length && + lines[i].match(/^[-*]\s+(.+)/) + ) { + items.push( + inlineMd(lines[i].match(/^[-*]\s+(.+)/)[1]), + ); + i++; + } + html += + '<ul style="margin:0.25em 0;padding-left:1.5em">' + + items + .map(function (x) { + return "<li>" + x + "</li>"; + }) + .join("") + + "</ul>"; + continue; + } + + // Empty line + if (line.trim() === "") { + i++; + continue; + } + + // Paragraph + var paraLines = []; + while ( + i < lines.length && + lines[i].trim() !== "" && + !lines[i].match(/^#{1,4}\s/) && + !lines[i].startsWith("> ") && + !lines[i].startsWith("```") && + !lines[i].match(/^[-*]\s/) + ) { + paraLines.push(lines[i]); + i++; + } + if (paraLines.length > 0) { + html += + "<p>" + + inlineMd(paraLines.join("<br>")) + + "</p>"; + } + } + + return html; + + function inlineMd(text) { + return text + .replace(/`([^`]+)`/g, "<code>$1</code>") + .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>") + .replace(/\*(.+?)\*/g, "<em>$1</em>"); + } + + function escapeHtml(t) { + return t + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">"); + } + } + + function initViewer(files) { + var tabsEl = document.getElementById("fileTabs"); + var codePre = document.getElementById("codePre"); + var codeContent = document.getElementById("codeContent"); + var loadingMsg = document.getElementById("loadingMsg"); + + function loadFile(filePath) { + loadingMsg.style.display = "block"; + codePre.style.display = "none"; + + var url = "../examples/" + exampleName + "/" + filePath; + + fetch(url) + .then(function (r) { + if (!r.ok) throw new Error("HTTP " + r.status); + return r.text(); + }) + .then(function (code) { + loadingMsg.style.display = "none"; + + // ── Extract //! doc block from .rs files ── + var docHtml = ""; + var cleanCode = code; + var ext = filePath.split(".").pop(); + + if (ext === "rs") { + var lines = code.split("\n"); + var docLines = []; + var codeStart = 0; + var inDoc = true; + + for (var i = 0; i < lines.length; i++) { + var trimmed = lines[i]; + var docMatch = + trimmed.match( + /^\s*\/\/!( ?(.*))?$/, + ); + + if (inDoc && docMatch) { + docLines.push(docMatch[2] || ""); + codeStart = i + 1; + } else if ( + inDoc && + trimmed.trim() === "" + ) { + docLines.push(""); + codeStart = i + 1; + } else { + inDoc = false; + } + } + + // Render doc lines to HTML + if (docLines.length > 0) { + docHtml = renderMarkdown( + docLines.join("\n"), + ); + } + + // Remove leading //! lines for code display + cleanCode = lines + .slice(codeStart) + .join("\n") + .trimStart(); + } + + // Show/hide doc box + var docBox = document.getElementById("docBox"); + if (docHtml) { + docBox.innerHTML = docHtml; + docBox.style.display = "block"; + } else { + docBox.style.display = "none"; + } + + codePre.style.display = "block"; + codeContent.textContent = cleanCode; + + // Set language class + codeContent.className = ""; + var lang = + { + rs: "language-rust", + toml: "language-toml", + md: "language-markdown", + js: "language-javascript", + sh: "language-bash", + ps1: "language-powershell", + }[ext] || ""; + if (lang) codeContent.className = lang; + + delete codeContent.dataset.highlighted; + hljs.highlightElement(codeContent); + + tabsEl + .querySelectorAll("button") + .forEach(function (b) { + b.classList.toggle( + "active", + b.dataset.file === filePath, + ); + }); + }) + .catch(function (err) { + loadingMsg.style.display = "block"; + loadingMsg.textContent = + "Failed to load: " + + filePath + + " (" + + err.message + + ")"; + loadingMsg.className = "error"; + }); + } + + // Build tabs + files.forEach(function (f, i) { + var btn = document.createElement("button"); + btn.textContent = f; + btn.dataset.file = f; + if (i === 0) btn.className = "active"; + btn.addEventListener("click", function () { + loadFile(f); + }); + tabsEl.appendChild(btn); + }); + + // Load first file + if (files.length > 0) loadFile(files[0]); + } + })(); + </script> + </body> +</html> diff --git a/docs/examples.html b/docs/examples.html index e69de29..47513f2 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -0,0 +1,488 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Examples — Mìng Lìng</title> + <link rel="icon" type="image/png" href="res/icon_shadow.png" /> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap" + rel="stylesheet" + /> + <link rel="stylesheet" href="scripts/highlight/github-dark.min.css" /> + <style> + *, + *::before, + *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html { + scroll-behavior: smooth; + } + + body { + font-family: "Noto Serif SC", Georgia, "Times New Roman", serif; + background-color: #1a1410; + color: #e8ddd0; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + } + + a { + color: #d4a84b; + text-decoration: none; + transition: color 0.2s; + } + a:hover { + color: #e8c46a; + } + + img { + max-width: 100%; + height: auto; + } + + .container { + max-width: 1100px; + margin: 0 auto; + padding: 0 1.5rem; + } + + /* ── Nav ── */ + nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.8rem 2rem; + background: rgba(26, 20, 16, 0.88); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(212, 168, 75, 0.12); + } + + nav .logo { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 1.1rem; + color: #e8ddd0; + } + nav .logo img { + width: 28px; + height: 28px; + filter: brightness(0) invert(1); + } + + nav .nav-links { + display: flex; + gap: 1.5rem; + align-items: center; + font-size: 0.9rem; + } + nav .nav-links a { + color: #9a8a7a; + transition: color 0.2s; + } + nav .nav-links a:hover { + color: #d4a84b; + } + nav .nav-links .active { + color: #d4a84b; + font-weight: 600; + } + nav .nav-links .btn-nav { + display: inline-block; + padding: 0.35rem 1rem; + border: 1px solid #d4a84b; + border-radius: 2px; + color: #d4a84b; + font-weight: 600; + font-size: 0.85rem; + transition: + background 0.2s, + color 0.2s; + } + nav .nav-links .btn-nav:hover { + background: #d4a84b; + color: #1a1410; + } + + /* ── Hero ── */ + .hero { + padding: 8rem 1.5rem 3rem; + text-align: center; + position: relative; + } + .hero h1 { + font-size: 3rem; + font-weight: 800; + letter-spacing: 1px; + color: #e8ddd0; + margin-bottom: 0.75rem; + } + .hero h1 span { + color: #c43931; + } + .hero p { + color: #9a8a7a; + font-size: 1.05rem; + max-width: 600px; + margin: 0 auto; + } + + /* ── Filter bar ── */ + .filter-bar { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 2.5rem; + } + .filter-bar button { + background: transparent; + border: 1px solid #3a2e24; + color: #9a8a7a; + padding: 0.35rem 1rem; + border-radius: 2px; + font-size: 0.85rem; + cursor: pointer; + font-family: inherit; + transition: all 0.2s; + } + .filter-bar button:hover { + border-color: #d4a84b; + color: #d4a84b; + } + .filter-bar button.active { + background: #d4a84b; + color: #1a1410; + border-color: #d4a84b; + font-weight: 600; + } + + /* ── Card grid ── */ + .examples-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + padding-bottom: 4rem; + } + + .example-card { + background: #241c16; + border: 1px solid #3a2e24; + border-radius: 2px; + padding: 1.5rem; + display: flex; + flex-direction: column; + transition: + border-color 0.25s, + transform 0.2s; + cursor: pointer; + } + .example-card:hover { + border-color: #d4a84b; + transform: translateY(-3px); + } + + .example-card .icon { + font-size: 1.6rem; + margin-bottom: 0.6rem; + display: block; + } + .example-card h3 { + font-size: 1.1rem; + font-weight: 700; + color: #e8ddd0; + margin-bottom: 0.4rem; + } + .example-card .desc { + font-size: 0.88rem; + color: #9a8a7a; + line-height: 1.6; + flex: 1; + margin-bottom: 0.75rem; + } + + .example-card .tags { + display: flex; + gap: 0.4rem; + flex-wrap: wrap; + margin-bottom: 1rem; + } + .example-card .tags span { + font-size: 0.72rem; + padding: 0.15rem 0.5rem; + background: rgba(212, 168, 75, 0.1); + color: #d4a84b; + border-radius: 2px; + font-family: "Cascadia Code", "Fira Code", monospace; + } + + .example-card .card-actions { + display: flex; + gap: 0.6rem; + align-items: center; + margin-top: auto; + } + .example-card .card-actions a { + font-size: 0.82rem; + font-weight: 600; + padding: 0.3rem 0.8rem; + border-radius: 2px; + transition: all 0.2s; + } + .example-card .card-actions .view-code { + background: #c43931; + color: #e8ddd0; + border: none; + } + .example-card .card-actions .view-code:hover { + background: #d44a42; + } + .example-card .card-actions .github-link { + background: transparent; + color: #d4a84b; + border: 1px solid #d4a84b; + margin-left: auto; + } + .example-card .card-actions .github-link:hover { + background: rgba(212, 168, 75, 0.1); + } + + /* ── Footer ── */ + footer { + padding: 2rem 1.5rem; + text-align: center; + color: #6a5a4a; + font-size: 0.85rem; + border-top: 1px solid #2a1e14; + } + footer a { + color: #7a6a5a; + } + footer a:hover { + color: #d4a84b; + } + + /* ── Responsive ── */ + @media (max-width: 900px) { + .examples-grid { + grid-template-columns: repeat(2, 1fr); + } + .hero h1 { + font-size: 2.2rem; + } + } + + @media (max-width: 550px) { + .examples-grid { + grid-template-columns: 1fr; + } + nav { + padding: 0.6rem 1rem; + } + nav .nav-links { + gap: 0.8rem; + font-size: 0.8rem; + } + } + </style> + </head> + <body> + <!-- ── Nav ── --> + <nav> + <a href="../index.html" class="logo" aria-label="Home"> + <img + src="res/icon.png" + alt="Mingling icon" + width="28" + height="28" + /> + Mìng Lìng + </a> + <div class="nav-links"> + <a href="doc.html">Docs</a> + <a href="examples.html" class="active">Examples</a> + <a href="https://github.com/catilgrass/mingling" target="_blank" + >GitHub</a + > + <a + href="https://crates.io/crates/mingling" + target="_blank" + class="btn-nav" + >cargo add mingling</a + > + </div> + </nav> + + <!-- ── Hero ── --> + <section class="hero"> + <div class="container"> + <h1><span>✦</span> Examples</h1> + <p> + Real projects built with Mingling — from basic to advanced. + Click any card to explore its source code. + </p> + </div> + </section> + + <!-- ── Grid ── --> + <section class="container"> + <div class="filter-bar" id="filterBar"></div> + <div class="examples-grid" id="examplesGrid"></div> + </section> + + <!-- ── Footer ── --> + <footer> + <p> + Built With ❤️ by + <a href="https://github.com/Weicao-CatilGrass" target="_blank" + >Weicao-CatilGrass</a + > + · Licensed under + <a href="LICENSE-MIT" target="_blank">MIT</a> / + <a href="LICENSE-APACHE" target="_blank">Apache-2.0</a> + </p> + </footer> + + <script> + // ── Load examples from auto-generated JSON ── + var examples = []; + + fetch("example-pages/examples.json") + .then(function (r) { + if (!r.ok) throw new Error("HTTP " + r.status); + return r.json(); + }) + .then(function (data) { + examples = data; + buildFilters(); + renderGrid(""); + }) + .catch(function (err) { + document.getElementById("examplesGrid").innerHTML = + '<p style="text-align:center;color:#c43931;padding:3rem">Failed to load examples: ' + + err.message + + "<br><small>Run <code>cargo run --bin sync-examples</code> in dev_tools to generate.</small></p>"; + }); + + // ═══════════════════════════════════════════════════════════════ + // RENDERING + // ═══════════════════════════════════════════════════════════════ + + function buildFilters() { + var allTags = {}; + examples.forEach(function (ex) { + if (ex.category) allTags[ex.category] = true; + }); + allTags = Object.keys(allTags); + + var filterBar = document.getElementById("filterBar"); + filterBar.innerHTML = ""; + var allBtn = document.createElement("button"); + allBtn.textContent = "All"; + allBtn.className = "active"; + allBtn.dataset.tag = ""; + filterBar.appendChild(allBtn); + + allTags.forEach(function (tag) { + var btn = document.createElement("button"); + btn.textContent = + tag.charAt(0).toUpperCase() + tag.slice(1); + btn.dataset.tag = tag; + filterBar.appendChild(btn); + }); + + filterBar.addEventListener("click", function (e) { + if (e.target.tagName !== "BUTTON") return; + filterBar.querySelectorAll("button").forEach(function (b) { + b.classList.remove("active"); + }); + e.target.classList.add("active"); + renderGrid(e.target.dataset.tag); + }); + } + + function renderGrid(filter) { + var grid = document.getElementById("examplesGrid"); + grid.innerHTML = ""; + var filtered = filter + ? examples.filter(function (ex) { + return ex.category === filter; + }) + : examples; + + filtered.forEach(function (ex) { + var card = document.createElement("div"); + card.className = "example-card"; + + var ghBase = + "https://github.com/catilgrass/mingling/tree/main/examples/" + + ex.id; + var viewUrl = + "example-viewer.html?name=" + encodeURIComponent(ex.id); + + var tagsHtml = ex.tags + .map(function (t) { + return "<span>" + escapeHtml(t) + "</span>"; + }) + .join(""); + + card.innerHTML = + '<span class="icon">' + + ex.icon + + "</span>" + + "<h3>" + + escapeHtml(ex.name) + + "</h3>" + + '<p class="desc">' + + escapeHtml(ex.desc).replace( + /`([^`]+)`/g, + "<code>$1</code>", + ) + + "</p>" + + '<div class="tags">' + + tagsHtml + + "</div>" + + '<div class="card-actions">' + + '<a href="' + + viewUrl + + '" class="view-code">View Code</a>' + + '<a href="' + + ghBase + + '" target="_blank" class="github-link">GitHub ↗</a>' + + "</div>"; + + card.addEventListener("click", function (e) { + if (e.target.tagName === "A") return; + window.location.href = viewUrl; + }); + + grid.appendChild(card); + }); + } + + function escapeHtml(text) { + return text + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, """); + } + </script> + </body> +</html> diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 91e2e95..0000000 --- a/docs/index.html +++ /dev/null @@ -1,116 +0,0 @@ -<!doctype html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Mìng Lìng - Macro magician in your CLI</title> - <style> - body { - margin: 0; - padding: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, #0a0a0a, #1a1a1a, #0a0a0a); - color: #ffffff; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - .container { - text-align: center; - padding: 2rem; - } - h1 { - font-size: 3rem; - margin-bottom: 0.5rem; - text-shadow: 0 0 20px rgba(255, 87, 34, 0.6); - letter-spacing: 2px; - } - .subtitle { - font-size: 1.2rem; - color: #ff7043; - margin-bottom: 2rem; - } - .magic-symbol { - font-size: 4rem; - margin-bottom: 1rem; - animation: - float 3s ease-in-out infinite, - fadeIn 2s ease forwards; - opacity: 0; - } - @keyframes float { - 0% { - transform: translateY(0px); - } - 50% { - transform: translateY(-15px); - } - 100% { - transform: translateY(0px); - } - } - @keyframes fadeIn { - 0% { - opacity: 0; - transform: translateY(20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } - } - .name-line { - font-weight: bold; - font-size: 3rem; - margin-bottom: 0.5rem; - text-shadow: 0 0 20px rgba(255, 87, 34, 0.6); - letter-spacing: 2px; - opacity: 0; - animation: fadeIn 1.5s ease 0s forwards; - } - .slogan-line { - font-size: 2.2rem; - color: #ff7043; - margin-bottom: 2rem; - opacity: 0; - animation: fadeIn 1.5s ease 0.3s forwards; - } - .links { - display: flex; - gap: 1.5rem; - justify-content: center; - flex-wrap: wrap; - opacity: 0; - animation: fadeIn 1.5s ease 0.6s forwards; - } - .links a { - color: #ff7043; - text-decoration: none; - font-size: 1.2rem; - border: 1px solid #ff5722; - padding: 0.6rem 1.5rem; - border-radius: 30px; - transition: all 0.3s ease; - } - .links a:hover { - background: #ff5722; - color: #0a0a0a; - } - </style> - </head> - <body> - <div class="container"> - <div class="name-line">Mìng Lìng</div> - <div class="slogan-line">"Macro magician in your CLI."</div> - <div class="links"> - <a href="https://github.com/catilgrass/mingling" target="_blank" - >GitHub</a - > - <a href="examples.html">Examples</a> - <a href="doc.html">Documentation</a> - </div> - </div> - </body> -</html> diff --git a/docs/play/play.html b/docs/play/play.html index 8620908..7a00142 100644 --- a/docs/play/play.html +++ b/docs/play/play.html @@ -24,7 +24,11 @@ <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link - href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" + href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap" + rel="stylesheet" + /> + <link + href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> diff --git a/docs/play/player.js b/docs/play/player.js index 6e01ce5..691957c 100644 --- a/docs/play/player.js +++ b/docs/play/player.js @@ -111,7 +111,7 @@ function renderSpeech(paragraphs) { .replace(/`([^`]+)`/g, "<code>$1</code>") .replace( /\*\*([^*]+)\*\*/g, - '<strong style="color:#7dcfff">$1</strong>', + '<strong style="color:#d4a84b">$1</strong>', ); return `<p>${html}</p>`; }) @@ -219,6 +219,11 @@ const layoutEl = document.getElementById("layout"); const speechPanel = document.querySelector(".speech-panel"); const codePanel = document.querySelector(".code-panel"); layoutEl.append(speechPanel, codePanel); -layoutEl.classList.add("layout--tb"); +// layoutEl.classList.add("layout--tb"); + +// On narrow screens, switch to vertical +if (window.innerWidth < 800) { + layoutEl.classList.add("layout--tb"); +} loadTutorial(tutorialFile); diff --git a/docs/play/style.css b/docs/play/style.css index 5e51114..70bb7cb 100644 --- a/docs/play/style.css +++ b/docs/play/style.css @@ -7,62 +7,62 @@ } :root { - --bg-primary: #1a1b1c; - --bg-secondary: #1f2021; - --border: #2f3031; - --text-primary: #c0c1c2; - --text-secondary: #7a7b7c; - --text-muted: #565758; - --code-bg: #292a2b; - --code-text: #bbbcbd; - --bubble-bg: #e64a199f; - --bubble-text: #ffccbc; - --line-num: #3b3c3d; - --btn-bg: #2f3031; - --btn-text: #c0c1c2; - --btn-hover: #3b3c3d; - --btn-primary-bg: #7a7b7c; - --btn-primary-text: #1a1b1c; - --btn-primary-hover: #898a8b; - --progress-bg: #2f3031; - --progress-fill: #7a7b7c; - --cmd-bg: #1a1b1c; - --cmd-border: #2f3031; - --cmd-text: #9e9fa0; - --topbar-bg: #1f2021; - --hljs-bg: #1a1b1c; + --bg-primary: #1a1410; + --bg-secondary: #241c16; + --border: #3a2e24; + --text-primary: #e8ddd0; + --text-secondary: #9a8a7a; + --text-muted: #6a5a4a; + --code-bg: #241c16; + --code-text: #e8ddd0; + --bubble-bg: rgba(196, 57, 49, 0.85); + --bubble-text: #e8ddd0; + --line-num: #6a5a4a; + --btn-bg: #3a2e24; + --btn-text: #e8ddd0; + --btn-hover: #4a3e34; + --btn-primary-bg: #c43931; + --btn-primary-text: #e8ddd0; + --btn-primary-hover: #d44a42; + --progress-bg: #3a2e24; + --progress-fill: #d4a84b; + --cmd-bg: #1a1410; + --cmd-border: #3a2e24; + --cmd-text: #9a8a7a; + --topbar-bg: #241c16; + --hljs-bg: #1a1410; } [data-theme="light"] { - --bg-primary: #ffffff; - --bg-secondary: #f5f6f7; - --border: #dcddde; - --text-primary: #2c2d2e; - --text-secondary: #5a5b5c; - --text-muted: #8a8b8c; - --code-bg: #e8e9ea; - --code-text: #2c2d2e; - --bubble-bg: #e64a19cf; - --bubble-text: #ffffff; - --line-num: #b0b1b2; - --btn-bg: #dcddde; - --btn-text: #2c2d2e; - --btn-hover: #c8c9ca; - --btn-primary-bg: #3a7bd5; - --btn-primary-text: #ffffff; - --btn-primary-hover: #2a6bc5; - --progress-bg: #dcddde; - --progress-fill: #3a7bd5; - --cmd-bg: #f5f6f7; - --cmd-border: #dcddde; - --cmd-text: #5a5b5c; - --topbar-bg: #f5f6f7; - --hljs-bg: #f5f6f7; + --bg-primary: #f5ede0; + --bg-secondary: #ede0d0; + --border: #d4c8b8; + --text-primary: #3a2a1a; + --text-secondary: #6a5a4a; + --text-muted: #9a8a7a; + --code-bg: #f0e8d8; + --code-text: #3a2a1a; + --bubble-bg: rgba(184, 53, 45, 0.85); + --bubble-text: #f5ede0; + --line-num: #c0b0a0; + --btn-bg: #d4c8b8; + --btn-text: #3a2a1a; + --btn-hover: #c4b8a8; + --btn-primary-bg: #b8352d; + --btn-primary-text: #f5ede0; + --btn-primary-hover: #c8453d; + --progress-bg: #d4c8b8; + --progress-fill: #b8943e; + --cmd-bg: #f0e8d8; + --cmd-border: #d4c8b8; + --cmd-text: #6a5a4a; + --topbar-bg: #ede0d0; + --hljs-bg: #f0e8d8; } body { font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", + -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Serif SC", Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); @@ -71,7 +71,7 @@ body { flex-direction: column; } -/* Top bar */ +/* ── Top bar ── */ .topbar { padding: 12px 24px; background: var(--topbar-bg); @@ -101,7 +101,7 @@ body { cursor: pointer; font-size: 16px; padding: 4px 10px; - border-radius: 6px; + border-radius: 2px; transition: all 0.15s; font-family: inherit; line-height: 1; @@ -111,14 +111,14 @@ body { background: var(--btn-hover); } -/* Main panel */ +/* ── Main panel ── */ .layout { display: flex; flex: 1; overflow: hidden; } -/* Left: code panel */ +/* ── Left: code panel ── */ .code-panel { flex: 1; background: var(--bg-primary); @@ -159,7 +159,7 @@ body { color: var(--bubble-text); border-radius: 10px; font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", + -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Serif SC", Roboto, sans-serif; font-size: 13px; font-style: normal; @@ -191,9 +191,9 @@ body { user-select: none; } -/* Right: description panel */ +/* ── Right: description panel ── */ .speech-panel { - width: 380px; + flex: 0 0 320px; background: var(--bg-secondary); border-left: 1px solid var(--border); display: flex; @@ -209,8 +209,8 @@ body { width: 100%; border-left: none; border-bottom: 1px solid var(--border); - max-height: none; flex: 0 0 auto; + max-height: 40%; } .layout--tb .code-panel { @@ -218,6 +218,20 @@ body { min-height: 0; } +.layout--tb .speech-content { + padding: 16px 20px; +} + +.layout--tb .speech-content p { + font-size: 14px; + line-height: 1.6; + margin-bottom: 10px; +} + +.layout--tb .code-panel pre { + padding: 16px 20px; +} + .speech-content { flex: 1; padding: 32px 24px; @@ -239,7 +253,7 @@ body { background: var(--code-bg); color: var(--code-text); padding: 2px 6px; - border-radius: 4px; + border-radius: 2px; font-size: 13px; } @@ -247,7 +261,7 @@ body { display: block; background: var(--cmd-bg); border: 1px solid var(--cmd-border); - border-radius: 6px; + border-radius: 2px; padding: 10px 14px; margin: 12px 0; font-family: "JetBrains Mono", monospace; @@ -255,7 +269,7 @@ body { color: var(--cmd-text); } -/* Control panel */ +/* ── Control panel ── */ .controls { padding: 12px 24px; background: var(--bg-secondary); @@ -271,7 +285,7 @@ body { border: none; color: var(--btn-text); padding: 8px 20px; - border-radius: 6px; + border-radius: 2px; font-size: 14px; cursor: pointer; transition: all 0.15s; |