From a0367d5a6655bf3078ea870b9c3ee94d4b0b287f Mon Sep 17 00:00:00 2001 From: Sivan Date: Mon, 18 May 2020 00:49:59 +0800 Subject: [PATCH] feat: update darkmode support --- _site/heti.css | 62 +- _site/index.css | 983 ++++++++++++++++++--- _site/index.html | 54 +- _site/scss/components/_grid-container.scss | 45 +- _site/scss/components/_panel-list.scss | 127 +-- _site/scss/heti.scss | 3 + _site/scss/index.scss | 13 +- lib/_base.scss | 6 +- lib/_inline.scss | 6 +- lib/_table.scss | 4 +- lib/_variables.scss | 22 + lib/helpers/_block.scss | 4 +- package-lock.json | 602 ++++++++----- package.json | 29 +- 14 files changed, 1456 insertions(+), 504 deletions(-) create mode 100644 _site/scss/heti.scss diff --git a/_site/heti.css b/_site/heti.css index 3af5581..d92d890 100644 --- a/_site/heti.css +++ b/_site/heti.css @@ -111,8 +111,12 @@ background-color: rgba(0, 0, 0, 0.054); } +[data-darkmode="dark"] .heti blockquote { + background-color: rgba(255, 255, 255, 0.054); +} + @media (prefers-color-scheme: dark) { - .heti blockquote { + [data-darkmode="auto"] .heti blockquote { background-color: rgba(255, 255, 255, 0.054); } } @@ -139,8 +143,12 @@ background-color: #cccccc; } +[data-darkmode="dark"] .heti hr { + background-color: #404040; +} + @media (prefers-color-scheme: dark) { - .heti hr { + [data-darkmode="auto"] .heti hr { background-color: #404040; } } @@ -172,8 +180,12 @@ background-color: rgba(0, 0, 0, 0.054); } +[data-darkmode="dark"] .heti pre { + background-color: rgba(255, 255, 255, 0.054); +} + @media (prefers-color-scheme: dark) { - .heti pre { + [data-darkmode="auto"] .heti pre { background-color: rgba(255, 255, 255, 0.054); } } @@ -311,8 +323,12 @@ word-break: break-word; } +[data-darkmode="dark"] .heti table { + border-color: #404040; +} + @media (prefers-color-scheme: dark) { - .heti table { + [data-darkmode="auto"] .heti table { border-color: #404040; } } @@ -328,8 +344,13 @@ border-color: #cccccc; } +[data-darkmode="dark"] .heti th, [data-darkmode="dark"] +.heti td { + border-color: #404040; +} + @media (prefers-color-scheme: dark) { - .heti th, + [data-darkmode="auto"] .heti th, [data-darkmode="auto"] .heti td { border-color: #404040; } @@ -413,8 +434,12 @@ color: inherit; } +[data-darkmode="dark"] .heti mark { + background-color: rgba(77, 74, 0, 0.88); +} + @media (prefers-color-scheme: dark) { - .heti mark { + [data-darkmode="auto"] .heti mark { background-color: rgba(77, 74, 0, 0.88); } } @@ -466,8 +491,13 @@ background-color: #dbedff; } +[data-darkmode="dark"] .heti sup:target, [data-darkmode="dark"] +.heti sup a:target { + background-color: #3a6188; +} + @media (prefers-color-scheme: dark) { - .heti sup:target, + [data-darkmode="auto"] .heti sup:target, [data-darkmode="auto"] .heti sup a:target { background-color: #3a6188; } @@ -491,8 +521,12 @@ border-block-end-color: rgba(0, 0, 0, 0.54); } +[data-darkmode="dark"] .heti u[title] { + border-block-end-color: rgba(255, 255, 255, 0.54); +} + @media (prefers-color-scheme: dark) { - .heti u[title] { + [data-darkmode="auto"] .heti u[title] { border-block-end-color: rgba(255, 255, 255, 0.54); } } @@ -807,8 +841,12 @@ line-height: 24px; } +[data-darkmode="dark"] .heti .heti-fn { + border-block-start-color: #404040; +} + @media (prefers-color-scheme: dark) { - .heti .heti-fn { + [data-darkmode="auto"] .heti .heti-fn { border-block-start-color: #404040; } } @@ -822,8 +860,12 @@ background-color: #dbedff; } +[data-darkmode="dark"] .heti .heti-fn li:target { + background-color: #3a6188; +} + @media (prefers-color-scheme: dark) { - .heti .heti-fn li:target { + [data-darkmode="auto"] .heti .heti-fn li:target { background-color: #3a6188; } } diff --git a/_site/index.css b/_site/index.css index be964ac..989abca 100644 --- a/_site/index.css +++ b/_site/index.css @@ -1,217 +1,930 @@ @charset "UTF-8"; -/* Project: Heti homepage URL: https://github.com/sivan/heti Author: Sivan [sun.sivan@gmail.com] */ +/* + * Project: Heti homepage + * URL: https://github.com/sivan/heti + * Author: Sivan [sun.sivan@gmail.com] + */ /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -/* Document ========================================================================== */ -/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} -/* Sections ========================================================================== */ -/** Remove the margin in all browsers. */ -body { margin: 0; } +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} -/** Render the `main` element consistently in IE. */ -main { display: block; } +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} -/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */ -h1 { font-size: 2em; margin: 0.67em 0; } +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} -/* Grouping content ========================================================================== */ -/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ -hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} -/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ -pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} -/* Text-level semantics ========================================================================== */ -/** Remove the gray background on active links in IE 10. */ -a { background-color: transparent; } +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} -/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ -abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ +} -/** Add the correct font weight in Chrome, Edge, and Safari. */ -b, strong { font-weight: bolder; } +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} -/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ -code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} -/** Add the correct font size in all browsers. */ -small { font-size: 80%; } +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} -/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ -sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} -sub { bottom: -0.25em; } +sub { + bottom: -0.25em; +} -sup { top: -0.5em; } +sup { + top: -0.5em; +} -/* Embedded content ========================================================================== */ -/** Remove the border on images inside links in IE 10. */ -img { border-style: none; } +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} -/* Forms ========================================================================== */ -/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ -button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ +} -/** Show the overflow in IE. 1. Show the overflow in Edge. */ -button, input { /* 1 */ overflow: visible; } +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; +} -/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */ -button, select { /* 1 */ text-transform: none; } +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; +} -/** Correct the inability to style clickable types in iOS and Safari. */ -button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} -/** Remove the inner border and padding in Firefox. */ -button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} -/** Restore the focus styles unset by the previous rule. */ -button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} -/** Correct the padding in Firefox. */ -fieldset { padding: 0.35em 0.75em 0.625em; } +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} -/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ -legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ +} -/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -progress { vertical-align: baseline; } +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} -/** Remove the default vertical scrollbar in IE 10+. */ -textarea { overflow: auto; } +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} -/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */ -[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} -/** Correct the cursor style of increment and decrement buttons in Chrome. */ -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} -/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ -[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} -/** Remove the inner padding in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} -/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ -::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} -/* Interactive ========================================================================== */ -/* Add the correct display in Edge, IE 10+, and Firefox. */ -details { display: block; } +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} -/* Add the correct display in all browsers. */ -summary { display: list-item; } +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} -/* Misc ========================================================================== */ -/** Add the correct display in IE 10+. */ -template { display: none; } +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} -/** Add the correct display in IE 10. */ -[hidden] { display: none; } +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} /* 简单模拟 css reset */ -* { margin: 0; padding: 0; } +* { + margin: 0; + padding: 0; +} -ul, ol { list-style: none; } +ul, +ol { + list-style: none; +} /* 模拟不知道哪里流传出来的垃圾代码 */ -ul, li { list-style: none; } +ul, +li { + list-style: none; +} -.container[data-bg-grid="grid-12"] { background-size: 100% 12px; background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px); } +.container[data-bg-grid="grid-12"] { + background-size: 100% 12px; + background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px); +} -.container[data-bg-grid="grid-12"] .heti--vertical { outline: 1px solid #ededed; background-size: 12px 100%; background-image: linear-gradient(to left, transparent 11px, #ededed 1px); } +.container[data-bg-grid="grid-12"] .heti--vertical { + outline: 1px solid #ededed; + background-size: 12px 100%; + background-image: linear-gradient(to left, transparent 11px, #ededed 1px); +} -.container[data-bg-grid="grid-24"] { background-size: 100% 24px; background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px); } +.container[data-bg-grid="grid-24"] { + background-size: 100% 24px; + background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px); +} -.container[data-bg-grid="grid-24"] .heti--vertical { outline: 1px solid #ededed; background-size: 24px 100%; background-image: linear-gradient(to left, transparent 23px, #ededed 1px); } +.container[data-bg-grid="grid-24"] .heti--vertical { + outline: 1px solid #ededed; + background-size: 24px 100%; + background-image: linear-gradient(to left, transparent 23px, #ededed 1px); +} -@media (prefers-color-scheme: dark) { .container[data-bg-grid="grid-12"] { background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); } - .container[data-bg-grid="grid-12"] .heti--vertical { background-size: 12px 100%; background-image: linear-gradient(to left, transparent 11px, #333333 1px); } - .container[data-bg-grid="grid-24"] { background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); } - .container[data-bg-grid="grid-24"] .heti--vertical { background-size: 24px 100%; background-image: linear-gradient(to left, transparent 23px, #333333 1px); } } +[data-darkmode="dark"] .container[data-bg-grid="grid-12"] { + background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); +} -@media screen and (min-width: 640px) { .container[data-bg-grid="grid-12"] { background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px); } - .container[data-bg-grid="grid-24"] { background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px); } } +[data-darkmode="dark"] .container[data-bg-grid="grid-12"] .heti--vertical { + background-size: 12px 100%; + background-image: linear-gradient(to left, transparent 11px, #333333 1px); +} -@media screen and (min-width: 640px) and (prefers-color-scheme: dark) { .container[data-bg-grid="grid-12"] { background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); } - .container[data-bg-grid="grid-24"] { background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); } } +[data-darkmode="dark"] .container[data-bg-grid="grid-24"] { + background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); +} -.panel-list { --bg-color: hsl(240, 100%, 100%); --bg-tap-color: hsl(300, 3%, 94%); --border-color: hsla(0, 0%, 76%, 0.88); --border-inline-start-color: hsl(0, 0%, 76%); --border-inline-end-color: hsl(0, 0%, 76%); --border-block-start-color: hsl(0, 0%, 79%); --border-block-end-color: hsl(0, 0%, 65%); --text-color: hsl(60, 1%, 16%); --box-shadow-color: hsla(0, 0%, 86%, 0.54); --bg-highlight-color-start: hsl(216, 87%, 70%); --bg-highlight-color-end: hsl(215, 93%, 52%); --bg-highlight-tap-color-start: hsl(216, 92%, 65%); --bg-highlight-tap-color-end: hsl(215, 95%, 44%); --border-highlight-color: hsla(216, 90%, 57%, 0.88); --border-highlight-tap-color: hsla(216, 85%, 52%, 0.88); --border-inline-start-highlight-color: hsl(216, 90%, 57%); --border-inline-end-highlight-color: hsl(216, 90%, 57%); --border-inline-start-highlight-tap-color: hsl(216, 85%, 52%); --border-inline-end-highlight-tap-color: hsl(216, 85%, 52%); --border-block-start-highlight-color: hsl(216, 87%, 63%); --border-block-end-highlight-color: hsl(215, 99%, 49%); --border-block-start-highlight-tap-color: hsl(216, 93%, 57%); --border-block-end-highlight-tap-color: hsl(216, 100%, 42%); --text-highlight-color: hsl(0, 0%, 100%); display: inline-flex; margin: 0; padding: 0; list-style-type: none; } +[data-darkmode="dark"] .container[data-bg-grid="grid-24"] .heti--vertical { + background-size: 24px 100%; + background-image: linear-gradient(to left, transparent 23px, #333333 1px); +} -.panel-list--gray { --bg-color: hsl(180, 100%, 100%); --bg-tap-color: hsl(0, 0%, 94%); --border-color: hsla(0, 0%, 72%, 0.88); --border-inline-start-color: hsl(0, 0%, 76%); --border-inline-end-color: hsl(0, 0%, 76%); --border-block-start-color: hsl(0, 0%, 79%); --border-block-end-color: hsl(0, 0%, 65%); --text-color: hsl(0, 0%, 16%); --box-shadow-color: hsla(0, 0%, 86%, 0.54); --bg-highlight-color-start: hsl(225, 3%, 70%); --bg-highlight-color-end: hsl(228, 2%, 58%); --bg-highlight-tap-color-start: hsl(228, 2%, 58%); --bg-highlight-tap-color-end: hsl(240, 3%, 35%); --border-highlight-color: hsla(225, 2%, 64%, 0.88); --border-highlight-tap-color: hsla(228, 2%, 47%, 0.88); --border-inline-start-highlight-color: hsl(240, 3%, 59%); --border-inline-end-highlight-color: hsl(228, 2%, 54%); --border-inline-start-highlight-tap-color: hsl(240, 3%, 39%); --border-inline-end-highlight-tap-color: hsl(228, 3%, 39%); --border-block-start-highlight-color: hsl(240, 3%, 66%); --border-block-end-highlight-color: hsl(228, 2%, 50%); --border-block-start-highlight-tap-color: hsl(228, 2%, 51%); --border-block-end-highlight-tap-color: hsl(228, 4%, 26%); --text-highlight-color: hsl(0, 0%, 92%); } +@media (prefers-color-scheme: dark) { + [data-darkmode="auto"] .container[data-bg-grid="grid-12"] { + background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); + } + [data-darkmode="auto"] .container[data-bg-grid="grid-12"] .heti--vertical { + background-size: 12px 100%; + background-image: linear-gradient(to left, transparent 11px, #333333 1px); + } + [data-darkmode="auto"] .container[data-bg-grid="grid-24"] { + background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); + } + [data-darkmode="auto"] .container[data-bg-grid="grid-24"] .heti--vertical { + background-size: 24px 100%; + background-image: linear-gradient(to left, transparent 23px, #333333 1px); + } +} -@media (prefers-color-scheme: dark) { .panel-list { --bg-color: hsl(225, 2%, 40%); --bg-tap-color: hsl(210, 2%, 49%); --border-color: hsla(210, 2%, 33%, 0.88); --border-inline-start-color: hsl(210, 2%, 33%); --border-inline-end-color: hsl(210, 2%, 33%); --border-block-start-color: hsl(225, 2%, 45%); --border-block-end-color: hsl(210, 2%, 40%); --text-color: hsl(0, 0%, 91%); --box-shadow-color: hsla(225, 4%, 21%, 0.54); --bg-highlight-color-start: hsl(216, 77%, 49%); --bg-highlight-color-end: hsl(216, 76%, 45%); --bg-highlight-tap-color-start: hsl(214, 83%, 55%); --bg-highlight-tap-color-end: hsl(215, 74%, 51%); --border-highlight-color: hsla(215, 77%, 47%, 0.88); --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88); --border-inline-start-highlight-color: hsl(215, 77%, 47%); --border-inline-end-highlight-color: hsl(215, 77%, 47%); --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%); --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%); --border-block-start-highlight-color: hsl(216, 76%, 55%); --border-block-end-highlight-color: hsl(216, 76%, 44%); --border-block-start-highlight-tap-color: hsl(215, 84%, 60%); --border-block-end-highlight-tap-color: hsl(215, 74%, 51%); --text-highlight-color: hsl(0, 0%, 100%); } - .panel-list--gray { --bg-color: hsl(0, 0%, 40%); --bg-tap-color: hsl(0, 0%, 49%); --border-color: hsla(120, 1%, 34%, 0.88); --border-inline-start-color: hsl(0, 0%, 40%); --border-inline-end-color: hsl(360, 0%, 40%); --border-block-start-color: hsl(0, 0%, 46%); --border-block-end-color: hsl(120, 0%, 40%); --text-color: hsl(0, 0%, 91%); --box-shadow-color: hsla(0, 0%, 17%, 0.54); --bg-highlight-color-start: hsl(0, 0%, 60%); --bg-highlight-color-end: hsl(0, 0%, 60%); --bg-highlight-tap-color-start: hsl(0, 0%, 69%); --bg-highlight-tap-color-end: hsl(0, 0%, 69%); --border-highlight-color: hsla(0, 0%, 60%, 0.88); --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88); --border-inline-start-highlight-color: hsl(0, 0%, 60%); --border-inline-end-highlight-color: hsl(0, 0%, 60%); --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%); --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%); --border-block-start-highlight-color: hsl(0, 0%, 64%); --border-block-end-highlight-color: hsl(0, 0%, 60%); --border-block-start-highlight-tap-color: hsl(0, 0%, 73%); --border-block-end-highlight-tap-color: hsl(0, 0%, 69%); --text-highlight-color: hsl(0, 0%, 15%); } } +@media screen and (min-width: 640px) { + .container[data-bg-grid="grid-12"] { + background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px); + } + .container[data-bg-grid="grid-24"] { + background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px); + } + [data-darkmode="dark"] .container[data-bg-grid="grid-12"] { + background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); + } + [data-darkmode="dark"] .container[data-bg-grid="grid-24"] { + background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); + } +} -.panel-list + .panel-list { margin-inline-start: 12px; } +@media screen and (min-width: 640px) and (prefers-color-scheme: dark) { + [data-darkmode="auto"] .container[data-bg-grid="grid-12"] { + background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); + } + [data-darkmode="auto"] .container[data-bg-grid="grid-24"] { + background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); + } +} -.panel-list label { position: relative; display: block; box-sizing: border-box; height: 20px; padding: 0; padding-inline-start: 12px; padding-inline-end: 12px; border: 1px solid; font-size: 12px; line-height: 18px; text-align: center; user-select: none; background-color: var(--bg-color); border-color: var(--border-color); border-block-start-color: var(--border-block-start-color); border-block-end-color: var(--border-block-end-color); color: var(--text-color); box-shadow: 0 1px 0 var(--box-shadow-color); } +.panel-list { + display: inline-flex; + margin: 0; + padding: 0; + list-style-type: none; + --bg-color: hsl(240, 100%, 100%); + --bg-tap-color: hsl(300, 3%, 94%); + --border-color: hsla(0, 0%, 76%, 0.88); + --border-inline-start-color: hsl(0, 0%, 76%); + --border-inline-end-color: hsl(0, 0%, 76%); + --border-block-start-color: hsl(0, 0%, 79%); + --border-block-end-color: hsl(0, 0%, 65%); + --text-color: hsl(60, 1%, 16%); + --box-shadow-color: hsla(0, 0%, 86%, 0.54); + --bg-highlight-color-start: hsl(216, 87%, 70%); + --bg-highlight-color-end: hsl(215, 93%, 52%); + --bg-highlight-tap-color-start: hsl(216, 92%, 65%); + --bg-highlight-tap-color-end: hsl(215, 95%, 44%); + --border-highlight-color: hsla(216, 90%, 57%, 0.88); + --border-highlight-tap-color: hsla(216, 85%, 52%, 0.88); + --border-inline-start-highlight-color: hsl(216, 90%, 57%); + --border-inline-end-highlight-color: hsl(216, 90%, 57%); + --border-inline-start-highlight-tap-color: hsl(216, 85%, 52%); + --border-inline-end-highlight-tap-color: hsl(216, 85%, 52%); + --border-block-start-highlight-color: hsl(216, 87%, 63%); + --border-block-end-highlight-color: hsl(215, 99%, 49%); + --border-block-start-highlight-tap-color: hsl(216, 93%, 57%); + --border-block-end-highlight-tap-color: hsl(216, 100%, 42%); + --text-highlight-color: hsl(0, 0%, 100%); +} -.panel-list label:active { background-color: var(--bg-tap-color); } +.panel-list--gray { + --bg-color: hsl(180, 100%, 100%); + --bg-tap-color: hsl(0, 0%, 94%); + --border-color: hsla(0, 0%, 72%, 0.88); + --border-inline-start-color: hsl(0, 0%, 76%); + --border-inline-end-color: hsl(0, 0%, 76%); + --border-block-start-color: hsl(0, 0%, 79%); + --border-block-end-color: hsl(0, 0%, 65%); + --text-color: hsl(0, 0%, 16%); + --box-shadow-color: hsla(0, 0%, 86%, 0.54); + --bg-highlight-color-start: hsl(225, 3%, 70%); + --bg-highlight-color-end: hsl(228, 2%, 58%); + --bg-highlight-tap-color-start: hsl(228, 2%, 58%); + --bg-highlight-tap-color-end: hsl(240, 3%, 35%); + --border-highlight-color: hsla(225, 2%, 64%, 0.88); + --border-highlight-tap-color: hsla(228, 2%, 47%, 0.88); + --border-inline-start-highlight-color: hsl(240, 3%, 59%); + --border-inline-end-highlight-color: hsl(228, 2%, 54%); + --border-inline-start-highlight-tap-color: hsl(240, 3%, 39%); + --border-inline-end-highlight-tap-color: hsl(228, 3%, 39%); + --border-block-start-highlight-color: hsl(240, 3%, 66%); + --border-block-end-highlight-color: hsl(228, 2%, 50%); + --border-block-start-highlight-tap-color: hsl(228, 2%, 51%); + --border-block-end-highlight-tap-color: hsl(228, 4%, 26%); + --text-highlight-color: hsl(0, 0%, 92%); +} -.panel-list li { margin-inline-end: -1px; } +[data-darkmode="dark"] .panel-list { + --bg-color: hsl(225, 2%, 40%); + --bg-tap-color: hsl(210, 2%, 49%); + --border-color: hsla(210, 2%, 33%, 0.88); + --border-inline-start-color: hsl(210, 2%, 33%); + --border-inline-end-color: hsl(210, 2%, 33%); + --border-block-start-color: hsl(225, 2%, 45%); + --border-block-end-color: hsl(210, 2%, 40%); + --text-color: hsl(0, 0%, 91%); + --box-shadow-color: hsla(225, 4%, 21%, 0.54); + --bg-highlight-color-start: hsl(216, 77%, 49%); + --bg-highlight-color-end: hsl(216, 76%, 45%); + --bg-highlight-tap-color-start: hsl(214, 83%, 55%); + --bg-highlight-tap-color-end: hsl(215, 74%, 51%); + --border-highlight-color: hsla(215, 77%, 47%, 0.88); + --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88); + --border-inline-start-highlight-color: hsl(215, 77%, 47%); + --border-inline-end-highlight-color: hsl(215, 77%, 47%); + --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%); + --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%); + --border-block-start-highlight-color: hsl(216, 76%, 55%); + --border-block-end-highlight-color: hsl(216, 76%, 44%); + --border-block-start-highlight-tap-color: hsl(215, 84%, 60%); + --border-block-end-highlight-tap-color: hsl(215, 74%, 51%); + --text-highlight-color: hsl(0, 0%, 100%); +} -.panel-list li:first-child label { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-inline-start-color: var(--border-inline-start-color); } +[data-darkmode="dark"] .panel-list--gray { + --bg-color: hsl(0, 0%, 40%); + --bg-tap-color: hsl(0, 0%, 49%); + --border-color: hsla(120, 1%, 34%, 0.88); + --border-inline-start-color: hsl(0, 0%, 40%); + --border-inline-end-color: hsl(360, 0%, 40%); + --border-block-start-color: hsl(0, 0%, 46%); + --border-block-end-color: hsl(120, 0%, 40%); + --text-color: hsl(0, 0%, 91%); + --box-shadow-color: hsla(0, 0%, 17%, 0.54); + --bg-highlight-color-start: hsl(0, 0%, 60%); + --bg-highlight-color-end: hsl(0, 0%, 60%); + --bg-highlight-tap-color-start: hsl(0, 0%, 69%); + --bg-highlight-tap-color-end: hsl(0, 0%, 69%); + --border-highlight-color: hsla(0, 0%, 60%, 0.88); + --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88); + --border-inline-start-highlight-color: hsl(0, 0%, 60%); + --border-inline-end-highlight-color: hsl(0, 0%, 60%); + --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%); + --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%); + --border-block-start-highlight-color: hsl(0, 0%, 64%); + --border-block-end-highlight-color: hsl(0, 0%, 60%); + --border-block-start-highlight-tap-color: hsl(0, 0%, 73%); + --border-block-end-highlight-tap-color: hsl(0, 0%, 69%); + --text-highlight-color: hsl(0, 0%, 15%); +} -.panel-list li:last-child label { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-inline-end-color: var(--border-inline-end-color); } +@media (prefers-color-scheme: dark) { + [data-darkmode="auto"] .panel-list { + --bg-color: hsl(225, 2%, 40%); + --bg-tap-color: hsl(210, 2%, 49%); + --border-color: hsla(210, 2%, 33%, 0.88); + --border-inline-start-color: hsl(210, 2%, 33%); + --border-inline-end-color: hsl(210, 2%, 33%); + --border-block-start-color: hsl(225, 2%, 45%); + --border-block-end-color: hsl(210, 2%, 40%); + --text-color: hsl(0, 0%, 91%); + --box-shadow-color: hsla(225, 4%, 21%, 0.54); + --bg-highlight-color-start: hsl(216, 77%, 49%); + --bg-highlight-color-end: hsl(216, 76%, 45%); + --bg-highlight-tap-color-start: hsl(214, 83%, 55%); + --bg-highlight-tap-color-end: hsl(215, 74%, 51%); + --border-highlight-color: hsla(215, 77%, 47%, 0.88); + --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88); + --border-inline-start-highlight-color: hsl(215, 77%, 47%); + --border-inline-end-highlight-color: hsl(215, 77%, 47%); + --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%); + --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%); + --border-block-start-highlight-color: hsl(216, 76%, 55%); + --border-block-end-highlight-color: hsl(216, 76%, 44%); + --border-block-start-highlight-tap-color: hsl(215, 84%, 60%); + --border-block-end-highlight-tap-color: hsl(215, 74%, 51%); + --text-highlight-color: hsl(0, 0%, 100%); + } + [data-darkmode="auto"] .panel-list--gray { + --bg-color: hsl(0, 0%, 40%); + --bg-tap-color: hsl(0, 0%, 49%); + --border-color: hsla(120, 1%, 34%, 0.88); + --border-inline-start-color: hsl(0, 0%, 40%); + --border-inline-end-color: hsl(360, 0%, 40%); + --border-block-start-color: hsl(0, 0%, 46%); + --border-block-end-color: hsl(120, 0%, 40%); + --text-color: hsl(0, 0%, 91%); + --box-shadow-color: hsla(0, 0%, 17%, 0.54); + --bg-highlight-color-start: hsl(0, 0%, 60%); + --bg-highlight-color-end: hsl(0, 0%, 60%); + --bg-highlight-tap-color-start: hsl(0, 0%, 69%); + --bg-highlight-tap-color-end: hsl(0, 0%, 69%); + --border-highlight-color: hsla(0, 0%, 60%, 0.88); + --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88); + --border-inline-start-highlight-color: hsl(0, 0%, 60%); + --border-inline-end-highlight-color: hsl(0, 0%, 60%); + --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%); + --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%); + --border-block-start-highlight-color: hsl(0, 0%, 64%); + --border-block-end-highlight-color: hsl(0, 0%, 60%); + --border-block-start-highlight-tap-color: hsl(0, 0%, 73%); + --border-block-end-highlight-tap-color: hsl(0, 0%, 69%); + --text-highlight-color: hsl(0, 0%, 15%); + } +} -.panel-list input { display: none; } +.panel-list + .panel-list { + margin-inline-start: 12px; +} -.panel-list input:checked + label { z-index: 1; background-image: linear-gradient(to bottom, var(--bg-highlight-color-start), var(--bg-highlight-color-end)); border-color: var(--border-highlight-color); border-block-start-color: var(--border-block-start-highlight-color); border-block-end-color: var(--border-block-end-highlight-color); color: var(--text-highlight-color); } +.panel-list label { + position: relative; + display: block; + box-sizing: border-box; + height: 20px; + padding: 0; + padding-inline-start: 12px; + padding-inline-end: 12px; + border: 1px solid; + font-size: 12px; + line-height: 18px; + text-align: center; + user-select: none; + background-color: var(--bg-color); + border-color: var(--border-color); + border-block-start-color: var(--border-block-start-color); + border-block-end-color: var(--border-block-end-color); + color: var(--text-color); + box-shadow: 0 1px 0 var(--box-shadow-color); +} -.panel-list input:checked + label:active { background-image: linear-gradient(to bottom, var(--bg-highlight-tap-color-start), var(--bg-highlight-tap-color-end)); border-color: var(--border-highlight-tap-color); border-block-start-color: var(--border-block-start-highlight-tap-color); border-block-end-color: var(--border-block-end-highlight-tap-color); } +.panel-list label:active { + background-color: var(--bg-tap-color); +} -.anchor { margin-inline-start: 0.25em; } +.panel-list li { + margin-inline-end: -1px; +} -@media screen and (min-width: 640px) { .article .anchor { position: absolute; left: -1em; width: 1em; margin-inline-start: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: inherit; text-align: center; opacity: 0; transition: opacity 0.2s linear; } - .article .anchor:hover { text-decoration: none; border: 0; } - .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 { position: relative; } - .article h1:hover .anchor, .article h2:hover .anchor, .article h3:hover .anchor, .article h4:hover .anchor, .article h5:hover .anchor, .article h6:hover .anchor { opacity: 1; } } +.panel-list li:first-child label { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + border-inline-start-color: var(--border-inline-start-color); +} -.card { position: relative; left: -12px; width: 100%; margin-block-start: 24px; margin-block-end: 48px; padding-block-start: 12px; padding-block-end: 12px; padding-inline-start: 12px; padding-inline-end: 12px; border-radius: 2px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); background-color: white; } +.panel-list li:last-child label { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-inline-end-color: var(--border-inline-end-color); +} -.article .card { text-align: left; } +.panel-list input { + display: none; +} -.card > figcaption { display: inline-block; margin-block-start: 16px; padding-block-start: 4px; padding-block-end: 3px; padding-inline-start: 0; padding-inline-end: 72px; line-height: 24px; border-block-start: 1px solid #ededed; } +.panel-list input:checked + label { + z-index: 1; + background-image: linear-gradient(to bottom, var(--bg-highlight-color-start), var(--bg-highlight-color-end)); + border-color: var(--border-highlight-color); + border-block-start-color: var(--border-block-start-highlight-color); + border-block-end-color: var(--border-block-end-highlight-color); + color: var(--text-highlight-color); +} -.card__vertical-container { box-sizing: border-box; width: 100%; height: 30em; border: 1px solid #ededed; overflow: auto; writing-mode: vertical-rl; } +.panel-list input:checked + label:active { + background-image: linear-gradient(to bottom, var(--bg-highlight-tap-color-start), var(--bg-highlight-tap-color-end)); + border-color: var(--border-highlight-tap-color); + border-block-start-color: var(--border-block-start-highlight-tap-color); + border-block-end-color: var(--border-block-end-highlight-tap-color); +} -@media screen and (min-width: 640px) { .card { box-sizing: border-box; left: -20%; width: 140%; padding-block-start: 24px; padding-block-end: 24px; padding-inline-start: 32px; padding-inline-end: 32px; } } +.panel-list--icon label { + width: 30px; + padding-inline-start: 8px; + padding-inline-end: 8px; +} -@media (prefers-color-scheme: dark) { .card { background-color: #292929; } - .card > figcaption { border-block-start: 1px solid #333333; } - .card__vertical-container { border-color: #333333; } } +.anchor { + margin-inline-start: 0.25em; +} + +@media screen and (min-width: 640px) { + .article .anchor { + position: absolute; + left: -1em; + width: 1em; + margin-inline-start: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 400; + line-height: inherit; + text-align: center; + opacity: 0; + transition: opacity 0.2s linear; + } + .article .anchor:hover { + text-decoration: none; + border: 0; + } + .article h1, + .article h2, + .article h3, + .article h4, + .article h5, + .article h6 { + position: relative; + } + .article h1:hover .anchor, + .article h2:hover .anchor, + .article h3:hover .anchor, + .article h4:hover .anchor, + .article h5:hover .anchor, + .article h6:hover .anchor { + opacity: 1; + } +} + +.card { + position: relative; + left: -12px; + width: 100%; + margin-block-start: 24px; + margin-block-end: 48px; + padding-block-start: 12px; + padding-block-end: 12px; + padding-inline-start: 12px; + padding-inline-end: 12px; + border-radius: 2px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); + background-color: white; +} + +.article .card { + text-align: left; +} + +.card > figcaption { + display: inline-block; + margin-block-start: 16px; + padding-block-start: 4px; + padding-block-end: 3px; + padding-inline-start: 0; + padding-inline-end: 72px; + line-height: 24px; + border-block-start: 1px solid #ededed; +} + +.card__vertical-container { + box-sizing: border-box; + width: 100%; + height: 30em; + border: 1px solid #ededed; + overflow: auto; + writing-mode: vertical-rl; +} + +@media screen and (min-width: 640px) { + .card { + box-sizing: border-box; + left: -20%; + width: 140%; + padding-block-start: 24px; + padding-block-end: 24px; + padding-inline-start: 32px; + padding-inline-end: 32px; + } +} + +@media (prefers-color-scheme: dark) { + .card { + background-color: #292929; + } + .card > figcaption { + border-block-start: 1px solid #333333; + } + .card__vertical-container { + border-color: #333333; + } +} /** 基础样式 **/ -body { font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: white; } +body { + font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background-color: white; +} -a { color: #4387f4; text-decoration: none; } +a { + color: #4387f4; + text-decoration: none; +} -.container { box-sizing: border-box; padding-block-start: 12px; padding-block-end: 72px; padding-inline-start: 12px; padding-inline-end: 12px; } +.container { + box-sizing: border-box; + padding-block-start: 12px; + padding-block-end: 72px; + padding-inline-start: 12px; + padding-inline-end: 12px; +} /** 首页样式 **/ -.article { margin-inline-start: auto; margin-inline-end: auto; } +.article { + margin-inline-start: auto; + margin-inline-end: auto; +} -.article__nav ol { margin-block-start: 24px; margin-block-end: 24px; } +.article__nav ol { + margin-block-start: 24px; + margin-block-end: 24px; +} /** 控制栏样式 **/ -.panel { position: fixed; z-index: 2; right: 14px; top: 14px; display: flex; text-align: right; } +.panel { + position: fixed; + z-index: 2; + right: 14px; + top: 14px; + display: flex; + text-align: right; +} /** 演示区块 **/ -.demo { margin-block-start: 24px; margin-block-end: 24px; } +.demo { + margin-block-start: 24px; + margin-block-end: 24px; +} -.section { width: 100%; max-height: 85vh; margin-block-start: 12px; margin-block-end: 12px; overflow: auto; } +.section { + width: 100%; + max-height: 85vh; + margin-block-start: 12px; + margin-block-end: 12px; + overflow: auto; +} -@media screen and (min-width: 640px) { body { min-width: 640px; background-color: #ededed; } - .container { box-sizing: border-box; width: 80%; min-width: 640px; max-width: 768px; margin-block-start: 48px; margin-block-end: 72px; margin-inline-start: auto; margin-inline-end: auto; padding-block-start: 48px; padding-block-end: 48px; padding-inline-start: 48px; padding-inline-end: 48px; border-radius: 2px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32); background-color: white; } - .section { max-height: none; overflow: visible; } } +@media screen and (min-width: 640px) { + body { + min-width: 640px; + background-color: #ededed; + } + .container { + box-sizing: border-box; + width: 80%; + min-width: 640px; + max-width: 768px; + margin-block-start: 48px; + margin-block-end: 72px; + margin-inline-start: auto; + margin-inline-end: auto; + padding-block-start: 48px; + padding-block-end: 48px; + padding-inline-start: 48px; + padding-inline-end: 48px; + border-radius: 2px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32); + background-color: white; + } + .section { + max-height: none; + overflow: visible; + } +} -@media screen and (min-width: 900px) { .article__nav { position: relative; z-index: 1; float: right; width: 192px; margin-block-start: -1px; margin-block-end: 12px; margin-inline-start: 32px; margin-inline-end: -16px; padding-block-start: 12px; padding-block-end: 12px; padding-inline-start: 8px; padding-inline-end: 8px; border: 1px solid #ededed; border-radius: 2px; } - .article__nav ol { margin-block-start: 12px; margin-block-end: 0; } - .article__nav ol ol { margin-block-start: 0; } } +@media screen and (min-width: 900px) { + .article__nav { + position: relative; + z-index: 1; + float: right; + width: 192px; + margin-block-start: -1px; + margin-block-end: 12px; + margin-inline-start: 32px; + margin-inline-end: -16px; + padding-block-start: 12px; + padding-block-end: 12px; + padding-inline-start: 8px; + padding-inline-end: 8px; + border: 1px solid #ededed; + border-radius: 2px; + } + .article__nav ol { + margin-block-start: 12px; + margin-block-end: 0; + } + .article__nav ol ol { + margin-block-start: 0; + } +} -@media (prefers-color-scheme: dark) { body { background-color: #3d3d3d; } - a { color: #6b90cc; } - a:visited { color: #2f5189; } - .container { background-color: #292929; color: #a3a3a3; } - .article__nav { border-color: #333333; } } +[data-darkmode="dark"] body { + background-color: #3d3d3d; +} + +[data-darkmode="dark"] a { + color: #6b90cc; +} + +[data-darkmode="dark"] a:visited { + color: #2f5189; +} + +[data-darkmode="dark"] .container { + background-color: #292929; + color: #a3a3a3; +} + +[data-darkmode="dark"] .article__nav { + border-color: #333333; +} + +@media (prefers-color-scheme: dark) { + [data-darkmode="auto"] body { + background-color: #3d3d3d; + } + [data-darkmode="auto"] a { + color: #6b90cc; + } + [data-darkmode="auto"] a:visited { + color: #2f5189; + } + [data-darkmode="auto"] .container { + background-color: #292929; + color: #a3a3a3; + } + [data-darkmode="auto"] .article__nav { + border-color: #333333; + } +} diff --git a/_site/index.html b/_site/index.html index 441a2d9..4e65ebf 100644 --- a/_site/index.html +++ b/_site/index.html @@ -1,5 +1,5 @@ - + 赫蹏 - 一个简约又简单的网页中文排版增强 @@ -74,14 +74,15 @@
  • 在要作用的容器元素上增加class="heti"的类名即可： + 
    <article class="entry heti">
   <h1>我的世界观</h1>
   <p>有钱人的生活就是这么朴实无华，且枯燥</p>
   ……
 </article>
    • -
  • 注意：赫蹏是正文区域的样式增强，不是normalize.css或CSS Reset的替代。因此不建议将它作用在根标签（如<body>或<div class="container">）上，除非像本页面一样通篇都是文章的一部分。
    • + 注：赫蹏是正文区域的样式增强，不是normalize.css或CSS Reset的替代。因此不建议将它作用在根标签（如<body>或<div class="container">）上。
    @@ -511,41 +512,6 @@
    古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：「武（籍武 ）发篋中，有裹药二枚，赫蹏书。」颜师古注：「邓展曰：『赫音兄弟鬩墙之鬩。』应劭曰：『赫蹏，薄小纸也。』」宋赵彦卫 《云麓漫钞》卷七：「《赵后传》所谓『赫蹏』者，注云『薄小纸』，然其寔亦縑帛。」
    - @@ -583,11 +549,17 @@
    • +