From d3b4027f5926569cb9371b2ea62b6be9387ea650 Mon Sep 17 00:00:00 2001 From: 魏曹先生 <1992414357@qq.com> Date: Fri, 5 Jun 2026 21:08:07 +0800 Subject: Add example pages and sync-examples tool for docs --- docs/README.md | 7 +- docs/_zh_CN/README.md | 5 - docs/_zh_CN/index.html | 8 +- docs/_zh_CN/pages/1-intro.md | 16 - docs/css/dark.css | 1015 +++++++++++++++++--------------------- docs/css/light.css | 884 ++++++++++++++++----------------- docs/doc.html | 14 +- docs/example-pages/examples.json | 281 +++++++++++ docs/example-viewer.html | 628 +++++++++++++++++++++++ docs/examples.html | 488 ++++++++++++++++++ docs/index.html | 116 ----- docs/play/play.html | 6 +- docs/play/player.js | 9 +- docs/play/style.css | 136 ++--- 14 files changed, 2364 insertions(+), 1249 deletions(-) create mode 100644 docs/example-pages/examples.json create mode 100644 docs/example-viewer.html delete mode 100644 docs/index.html (limited to 'docs') 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 @@ -

- - - -

Mingling Documentation

Mingling Helpdoc

This is documentation for the Mingling command-line framework, maintained by Weicao-CatilGrass 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 @@ -

- - - -

Mingling 中文文档 🇨🇳

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 @@ +

- 发布页 - API文档 - 源代码 -

- -

- Mingling - Github -

- A Rust CLI framework for many subcmds & complex workflows, reduces boilerplate via proc macros, focus on biz logic -

- - ## 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,13 +309,14 @@ 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; @@ -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,41 +384,97 @@ 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; + background-color: #1e1612; +} +.markdown-section h1, +.markdown-section h2, +.markdown-section h3, +.markdown-section h4, +.markdown-section strong { + color: #e8ddd0; + 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: #d4a84b; +} +.markdown-section code { + color: #e8c46a; + background-color: #241c16; + border-radius: 2px; + padding: 0.15em 0.4em; +} +.markdown-section pre { + background-color: #241c16; + border: 1px solid #3a2e24; + border-radius: 2px; + padding: 1rem; + overflow-x: auto; +} +.markdown-section pre > code { + background: transparent; + padding: 0; + color: #e8ddd0; +} +.markdown-section blockquote { + border-left: 3px solid #c43931; + color: #9a8a7a; + margin: 1em 0; + padding: 0.5em 1em; } .markdown-section p.tip { + background-color: #241c16; border-bottom-right-radius: 2px; - border-left: 4px solid #ff4081; + border-left: 4px solid #c43931; 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: #c43931; border-radius: 100%; - color: #fff; + color: #e8ddd0; 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; @@ -409,527 +484,142 @@ body.sticky .sidebar-toggle { top: 14px; } .markdown-section p.tip code { - background-color: #efefef; + background-color: #1a1410; } .markdown-section p.tip em { - color: #f4fefe; + color: #d4a84b; } .markdown-section p.warn { - background: rgba(66, 185, 131, 0.1); + background: rgba(212, 168, 75, 0.06); border-radius: 2px; padding: 1rem; } .markdown-section ul.task-list > li { list-style-type: none; } -body.close .sidebar { - transform: translateX(-300px); + +/* ── Flexible alerts (docsify-plugin-flexible-alerts) ── */ +.alert.callout { + border-radius: 2px; } -body.close .sidebar-toggle { - width: auto; +.alert.callout.note { + border: 1px solid #00bcd4; + box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2); } -body.close .content { - left: 0; +.alert.callout.tip { + border: 1px solid #4caf50; + box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2); } -@media print { - .app-nav, - .github-corner, - .sidebar, - .sidebar-toggle { - display: none; - } +.alert.callout.important { + border: 1px solid #7c4dff; + box-shadow: 0 2px 8px rgba(124, 77, 255, 0.2); } -@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; - } +.alert.callout.warning { + border: 1px solid #ffc107; + box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2); } -@keyframes octocat-wave { - 0%, - to { - transform: rotate(0); - } - 20%, - 60% { - transform: rotate(-25deg); - } - 40%, - 80% { - transform: rotate(10deg); - } +.alert.callout.attention { + border: 1px solid #f44336; + box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2); } -section.cover { - position: relative; - align-items: center; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - min-height: 100vh; - width: 100%; - display: none; +.alert.callout.note code { + color: #00c1d9; } -section.cover.show { - display: flex; +.alert.callout.tip code { + color: #51af55; } -section.cover.has-mask .mask { - background-color: #fff; - opacity: 0.8; - position: absolute; - top: 0; - bottom: 0; - width: 100%; +.alert.callout.important code { + color: #8152ff; } -section.cover .cover-main { - flex: 1; - margin: 0 16px; - text-align: center; - position: relative; +.alert.callout.warning code { + color: #ffc60c; } -section.cover a { - color: inherit; +.alert.callout.attention code { + color: #f9483b; } -section.cover a, -section.cover a:hover { - text-decoration: none; +.alert.callout.note a { + color: #00c1d9; } -section.cover p { - line-height: 1.5rem; - margin: 1em 0; +.alert.callout.tip a { + color: #51af55; } -section.cover h1 { - color: inherit; - font-size: 2.5rem; - font-weight: 300; - margin: 0.625rem 0 2.5rem; - position: relative; - text-align: center; +.alert.callout.important a { + color: #8152ff; } -section.cover h1 a { - display: block; +.alert.callout.warning a { + color: #ffc60c; } -section.cover h1 small { - bottom: -0.4375rem; - font-size: 1rem; - position: absolute; +.alert.callout.attention a { + color: #f9483b; } -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; -} -.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); - 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: #212121; -} -.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: #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; - 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; -} -.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" /> - Mingling Documents + Mingling Helpdoc +

- Crates.io - API Docs - Source + + + + + Example — Mìng Lìng + + + + + + + + + + +

+ ← Back to Examples +

+ ✦ Loading... +

+ View on GitHub ↗ +

+ +

+ Loading source code... +

+ + + + + + + + + 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 @@ + + + + + + Examples — Mìng Lìng + + + + + + + + + + + + +

✦ Examples

+ Real projects built with Mingling — from basic to advanced. + Click any card to explore its source code. +

+ + +

+ + + + + + + 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 @@ - - - - - - Mìng Lìng - Macro magician in your CLI - - - -

Mìng Lìng

"Macro magician in your CLI."

- GitHub - Examples - Documentation -

- - 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 @@ + 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, "$1") .replace( /\*\*([^*]+)\*\*/g, - '$1', + '$1', ); return `

${html}

`; }) @@ -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; -- cgit