diff options
Diffstat (limited to 'docs/css/dark.css')
| -rw-r--r-- | docs/css/dark.css | 923 |
1 files changed, 405 insertions, 518 deletions
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; } |
