From 1e590c15afedc7a92e569489266a6f0f0584f550 Mon Sep 17 00:00:00 2001 From: MDLeom <2809763-curben@users.noreply.gitlab.com> Date: Sat, 15 Aug 2020 13:26:27 +0000 Subject: [PATCH] chore: make css build to be optional --- package.json | 5 +- themes/chameleon/.npmrc | 2 + themes/chameleon/README.md | 9 + themes/chameleon/build/script.js | 33 + themes/chameleon/package.json | 16 + themes/chameleon/scripts/cssFilter.js | 32 - themes/chameleon/source/css/_source.css | 939 ++++++++++++++++++++++ themes/chameleon/source/css/chameleon.css | 459 ++++++++++- 8 files changed, 1455 insertions(+), 40 deletions(-) create mode 100644 themes/chameleon/.npmrc create mode 100644 themes/chameleon/build/script.js create mode 100644 themes/chameleon/package.json delete mode 100644 themes/chameleon/scripts/cssFilter.js create mode 100644 themes/chameleon/source/css/_source.css diff --git a/package.json b/package.json index 6c8c695..4aababc 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "renovate": "renovate --token $BOT_TOKEN --platform 'gitlab' --onboarding false --update-lock-files false --labels 'renovate' --recreate-closed true --require-config false curben/blog" }, "dependencies": { - "autoprefixer": "^9.6.1", "hexo": "hexojs/hexo", "hexo-filter-nofollow": "hexojs/hexo-filter-nofollow", "hexo-generator-archive": "hexojs/hexo-generator-archive", @@ -19,9 +18,7 @@ "hexo-generator-tag": "hexojs/hexo-generator-tag", "hexo-renderer-ejs": "hexojs/hexo-renderer-ejs", "hexo-renderer-marked": "hexojs/hexo-renderer-marked", - "hexo-yam": "curbengh/hexo-yam", - "postcss-normalize": "^9.0.0", - "sanitize.css": "^11.0.0" + "hexo-yam": "curbengh/hexo-yam" }, "devDependencies": { "hexo-server": "hexojs/hexo-server" diff --git a/themes/chameleon/.npmrc b/themes/chameleon/.npmrc new file mode 100644 index 0000000..77171bd --- /dev/null +++ b/themes/chameleon/.npmrc @@ -0,0 +1,2 @@ +package-lock=false +optional=false diff --git a/themes/chameleon/README.md b/themes/chameleon/README.md index c40383b..0aed967 100644 --- a/themes/chameleon/README.md +++ b/themes/chameleon/README.md @@ -29,3 +29,12 @@ theme_config: # Load forkawesome icons? icons: false ``` + +## Build + +Build "source/css/_source.css" into "source/css/chameleon.css" + +``` +$ npm install +$ npm run build +``` diff --git a/themes/chameleon/build/script.js b/themes/chameleon/build/script.js new file mode 100644 index 0000000..92108fd --- /dev/null +++ b/themes/chameleon/build/script.js @@ -0,0 +1,33 @@ +'use strict' + +/* +* Normalize chameleon.css using sanitize.css +* Add browser prefixes using autoprefixer +*/ + +const { readFile, writeFile } = require('fs').promises +const { join, resolve } = require('path') + +const deps = ['autoprefixer', 'postcss', 'postcss-normalize'] +deps.forEach((dep) => { + try { + require.resolve(dep) + } catch (err) { + console.error(`Missing "${dep}" dependency. Please install it by running "npm install ${dep}".`) + } +}) + +const autoprefixer = require('autoprefixer') +const normalize = require('postcss-normalize') +const postcss = require('postcss') + +const build = async () => { + const cssPath = resolve(__dirname, '../source/css/') + const cssSource = join(cssPath, '_source.css') + const cssSave = join(cssPath, 'chameleon.css') + const inCss = await readFile(cssSource) + const { css: outCss } = await postcss([normalize, autoprefixer]).process(inCss, { from: cssSource }) + await writeFile(cssSave, outCss) +} + +build() diff --git a/themes/chameleon/package.json b/themes/chameleon/package.json new file mode 100644 index 0000000..5b542b8 --- /dev/null +++ b/themes/chameleon/package.json @@ -0,0 +1,16 @@ +{ + "name": "hexo-theme-chameleon", + "version": "0.0.1", + "private": true, + "scripts": { + "build": "node build/script.js" + }, + "devDependencies": { + "autoprefixer": "^9.6.1", + "postcss-normalize": "^9.0.0", + "sanitize.css": "^11.0.0" + }, + "engines": { + "node": ">= 10.17.0" + } +} diff --git a/themes/chameleon/scripts/cssFilter.js b/themes/chameleon/scripts/cssFilter.js deleted file mode 100644 index de0dab5..0000000 --- a/themes/chameleon/scripts/cssFilter.js +++ /dev/null @@ -1,32 +0,0 @@ -'use strict' -/* global hexo */ - -/* -* Normalize typing.css using sanitize.css -* Add browser prefixes using autoprefixer -* -* renderer is used (instead of filter) due to -* incompatible with hexo-yam -*/ - -const deps = ['autoprefixer', 'postcss', 'postcss-normalize'] -deps.forEach(dep => { - try { - require.resolve(dep) - } catch (err) { - throw new Error(`Missing "${dep}" dependency. Please install it by running "npm install ${dep}".`) - } -}) - -const autoprefixer = require('autoprefixer') -const normalize = require('postcss-normalize') -const postcss = require('postcss') - -hexo.extend.renderer.register('css', 'css', async (data) => { - if (data.path) { - if (data.path.endsWith('.min.css')) return data.text - } - - const result = await postcss([normalize, autoprefixer]).process(data.text, { from: data.path }) - return result.css -}) diff --git a/themes/chameleon/source/css/_source.css b/themes/chameleon/source/css/_source.css new file mode 100644 index 0000000..f1dfaf8 --- /dev/null +++ b/themes/chameleon/source/css/_source.css @@ -0,0 +1,939 @@ +@charset "utf-8"; +@import "sanitize"; +@import "sanitize/forms"; + +:root { + --main-bg-color: black; + --main-font-color: #e6e6e6; + --link-hover: white; + --alt-bg-color: #333; + --font-size: 1.2em; + --link-underline: #3d73b0; +} + +html { + cursor: unset; + height: 100%; + line-height: 1.15; +} + +body { + color: var(--main-font-color); + background: var(--main-bg-color); + font-family: sans-serif; + font-size: var(--font-size); + /* https://stackoverflow.com/a/6654996 */ + min-height: 100%; + line-height: 1.5; +} + +/* + * Restrict sizing to the page width in all browsers (opinionated). + * sanitize/page + */ +iframe, +img, +input, +select, +textarea { + height: auto; + max-width: 100%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: serif; + font-weight: bold; + line-height: 1.35; + margin-top: 1em; + margin-bottom: 0.5em; +} + +h1 { + font-size: 1.5em; + margin: 0.5em 0; +} + +/* Disable line break for site title */ +h1.site-title { + white-space: nowrap; +} + +h2 { + font-size: 1.3em; +} + +h3 { + font-size: 1.2em; +} + +h4 { + font-size: 1.1em; +} + +a { + color: inherit; + cursor: pointer; +} + +a:active, +a:hover { + outline-width: 0; + color: var(--link-hover); +} + +a, +a:hover { + text-decoration: none; +} + +button, +input, +select, +textarea { + font-size: 100%; + line-height: 1.15; +} + +hr { + background-image: -webkit-linear-gradient(0deg,transparent,var(--main-font-color),transparent); + border: none; + box-sizing: content-box; + height: 1px; + margin-bottom: 1em; + margin-left: 25%; + overflow: visible; + width: 50%; +} + +.archive-container hr, +.article hr { + width: 100%; + margin-left: 0; +} + +.article .article-footer, +.article .article-footer hr { + margin-top: 1em; +} + +.header-hr { + background-image: -webkit-linear-gradient(90deg,var(--main-font-color),var(--main-font-color),transparent); +} + +figcaption, +small { + font-size: 0.9em; + color: #888; +} + +figcaption { + margin-bottom: 0.5em; +} + +pre figcaption a { + float: right; +} + +dl, +form, +hr, +ol, +p, +pre, +table, +ul, +blockquote { + margin-bottom: 1em; +} + +ul { + margin-left: 1.3em; + list-style: disc; +} + +ul.index-list { + margin-left: unset; + list-style: disc; +} + +ol { + list-style: decimal; + margin-left: 1.9em; +} + +ol.toc, +ol.toc-child { + list-style: disc; + margin-left: unset; +} + +li ol, +li ul, +ol, +ul { + margin-bottom: 0.8em; + margin-left: 2em; +} + +li ul, +ul { + list-style: disc; +} + +table caption, +table td, +table th, +td, +th { + border: 1px solid #ddd; + padding: 0.5em 1em; +} + +table th, +th, +table tr:nth-child(even), +tr:nth-child(even) { + background: var(--alt-bg-color); +} + +em, +caption, +legend { + font-weight: inherit; +} + +code, +kbd, +pre, +samp { + font-size: 0.9em; +} + +/* set codeblock width to minimum */ +pre { + border-left: 0.1em solid var(--link-underline); + padding-left: 1em; + max-width: max-content; +} + +mark { + background: var(--alt-bg-color); +} + +/* Hide post's excerpt in article */ +.p-summary { + display: none; +} + +.main-nav-link { + margin-right: 0.5em; + padding-bottom: 0.5em; + display: inline-block; + border: 0; +} + +b, +strong { + font-weight: 700; +} + +blockquote { + background: var(--alt-bg-color); + border-left: 0.1em solid #666; + padding-left: 1em; + margin: 1em 3em 1em 0em; + max-width: max-content; +} + +.page-nav { + margin-top: 2em; + text-align: center; +} + +.footer { + box-sizing: border-box; +} + +.container { + width: 100%; +} + +.copyright, +.footer-content, +.footer-links { + text-align: center; + font-size: 0.95em; + max-width: 80ch; + padding: 0 2ch; + margin: auto; +} + +.copyright li, +.footer-content li, +.footer-links li { + display: inline-block; +} + +.footer-content { + margin: 0 auto; + text-align: left; +} + +.footer-links { + font-size: 0.9em; + padding: 0; +} + +.footer-links a { + text-decoration: none; +} + +.footer-links li { + margin-right: 1em; +} + +/* Wrap count in brackets */ +span.index-list-count:before { + content: ' ('; +} + +span.index-list-count:after { + content: ')'; +} + +/* align badge in /about/ */ +.about-body .article .article-entry img.svg { + /* display same line */ + display: inline; + /* align to the left */ + margin: auto 0 .5em; +} + +/* https://jrl.ninja/etc/1/ */ +.archive-container { + position: relative; + font-size: 1em; + max-width: 80ch; + padding: 2ch; + margin: auto; +} + +.archive-container article { + margin-bottom: 1em; + line-height: 1em; +} + +.archive-container a, +.archive-container a:hover { + border: 0; +} + +.archive-container .header, +.article .header { + font-size: 1.1em; +} + +.archive-container .archive-article-header > a, +.archive-container .archive-article-header > h1 { + vertical-align: middle; +} + +.archive-container .archive-article-header h1 { + font-size: 1.2em; + margin: 0; +} + +.archive-container .archive-article-date { + font-size: 0.8em; +} + +.archive-container .extend, +.archive-container .page-number { + margin-right: 1em; +} + +.article { + max-width: 80ch; + padding: 2ch; + margin: auto; + position: relative; +} + +.article .main-nav-link:hover { + border: 0; +} + +.article .caption { + display: block; + text-align: center; +} + +.article .article-entry { + word-break: break-word; +} + +.article .article-entry a { + border-bottom: 1px solid var(--link-underline); +} + +.article .article-entry a:hover { + border-bottom: none; +} + +.article .article-entry img { + display: block; + margin: auto; + margin-bottom: 0.5em; + max-height: 30em; +} + +.article .article-entry blockquote footer { + text-align: center; + font-size: 80%; +} + +.article .article-entry blockquote footer cite { + font-style: italic; +} + +.article .article-entry blockquote footer cite a { + border-bottom: 1px solid #eee; +} + +.article .article-entry blockquote footer cite:before { + content: "—"; + padding: 0 0.5em; +} + +.article .article-entry blockquote footer strong { + font-weight: 400; +} + +.article .article-entry table caption, +.article .article-entry table td, +.article .article-entry table th, +.article .article-entry td, +.article .article-entry th { + word-break: normal; +} + +.article .article-entry .pullquote { + width: 45%; + border: 0; +} + +.article .article-entry .pullquote.left { + float: left; + text-align: left; +} + +.article .article-entry .pullquote.right { + float: right; + text-align: right; +} + +.article .article-entry .video-container { + position: relative; + padding-top: 56.25%; + margin-bottom: 1em; + height: 0; + overflow: hidden; +} + +.article .article-entry .video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin-top: 0; +} + +.article .article-nav { + max-width: 100%; +} + +.article .article-nav-link-wrap { + display: inline-block; + padding: 0 1em; + width: 49%; + box-sizing: border-box; + vertical-align: top; + border: 0; +} + +.article .article-nav-link-wrap:hover { + border-bottom: 0; +} + +.article .article-nav-link-wrap.newer { + text-align: right; +} + +.article .article-nav-link-wrap.older { + text-align: left; +} + +.article .article-meta { + font-size: 0.9em; + list-style: none; + margin: 0; + padding: 0; +} + +.article .article-meta .label { + margin-right: 0.5em; +} + +.article .article-meta .article-category, +.article .article-meta .article-tag-list { + display: inline-block; + margin: 0; + padding: 0; +} + +.article .article-meta .article-tag-list-item { + display: inline-block; + margin-right: 1em; +} + +.article .article-meta .article-tag-list-item:before { + content: "#"; +} + +.article .article-gallery img { + width: 100%; +} + +.article-type-page .article-footer { + display: none; +} + +table caption, +table td, +td { + border: 1px solid #ddd; +} + +/* + * Visual Studio 2015 dark style + * Author: Nicolas LLOBERA + * https://github.com/highlightjs/highlight.js/blob/master/src/styles/vs2015.css + */ + + .hljs { + display: block; + overflow-x: auto; + /* padding: 0.5em; + background: #1E1E1E; + color: #DCDCDC; */ +} + +.hljs-keyword, +.hljs-literal, +.hljs-symbol, +.hljs-name { + color: #569CD6; +} +.hljs-link { + color: #569CD6; + text-decoration: underline; +} + +.hljs-built_in, +.hljs-type { + color: #4EC9B0; +} + +.hljs-number, +.hljs-class { + color: #B8D7A3; +} + +.hljs-string, +.hljs-meta-string { + color: #D69D85; +} + +.hljs-regexp, +.hljs-template-tag { + color: #9A5334; +} + +.hljs-subst, +.hljs-function, +.hljs-title, +.hljs-params, +.hljs-formula { + color: #DCDCDC; +} + +.hljs-comment, +.hljs-quote { + color: #57A64A; + font-style: italic; +} + +.hljs-doctag { + color: #608B4E; +} + +.hljs-meta, +.hljs-meta-keyword, +.hljs-tag { + color: #9B9B9B; +} + +.hljs-variable, +.hljs-template-variable { + color: #BD63C5; +} + +.hljs-attr, +.hljs-attribute, +.hljs-builtin-name { + color: #9CDCFE; +} + +.hljs-section { + color: gold; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +/*.hljs-code { + font-family:'Monospace'; +}*/ + +.hljs-bullet, +.hljs-selector-tag, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #D7BA7D; +} + +.hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; +} + +/* hide mobile nav menu and its checkbox */ +/* when it's not mobile */ +.mobile-nav, +#mobile-menu-toggle, +#mobile-nav-link { + display: none; +} + +/* set line-height in /archives page */ +.mobile-nav-menu { + line-height: 1.8; +} + +/* overlap other elements */ +#mobile-nav-link { + background: var(--main-bg-color); + color: var(--main-font-color); + border: 2px solid #999; + border-radius: 5px; + right: 0; + margin-left: 5px; + padding: 0.5em; + position: absolute; +} + +.mobile-nav-link-a { + text-align: center; +} + +#menu-button { + font-size: 2em; +} + +/* search bar */ +.search-container { + border-radius: 5px; + width: 10em; + background: var(--alt-bg-color); + outline: 0; + float: right; + height: 1.8em; + position: relative; + margin: auto; +} + +/* inline-block to position them in same line */ +.search-box, +.search-button{ + display:inline-block; +} + +/* hide the border and fill the height to parent's */ +.search-box { + border: 0; + border-radius: 5px; + height:1.8em; + width: 85%; + padding-left: 0.2em; + box-sizing: border-box; +} + +/* + * Override sanitize/forms + * to prevent conflict with + * .search-box padding-left + */ +input { + padding: 0; +} + +/* highlight the text box when focused */ +.search-box:focus { + border: 1px solid var(--link-underline); +} + +/* align the button to center */ +.search-button { + width: 10%; + position: absolute; + top: 45%; + transform: translate(30%, -50%); +} + +/* fill the svg with parent's font color */ +svg { + fill: currentColor; +} + +/* don't underline specific tag */ +.no-underline { + border-bottom: none; +} + +/* fill the search, permalink and share icons with link's color */ +svg#search, +svg#link, +svg#share { + fill: var(--link-underline); +} + +/* use font color when hover */ +svg#search:hover, +svg#link:hover, +svg#share:hover { + fill: currentColor; +} + +/* hide share button by default +unhide (via JS) if Web Share API is supported */ +.article-title a#share-button { + display: none; +} + +.article .article-entry a.headerlink svg, +.article-title a#share-button svg { + height: 0.75em; +} + +/* don't underline permalink and share icons */ +.article .article-entry a.headerlink, +.article-title a#share-button { + border-bottom: none; + margin-left: 0.5em; +} + +/* underline permalink and share icons when hover */ +.article .article-entry a.headerlink:hover, +.article-title a#share-button:hover { + border-bottom: 1px solid var(--link-underline); +} + +@media (max-width: 768px) { + body { + font-size: 1.2em; + } + + .article-title { + font-size: 1.8rem; + } + + /* hide desktop nav */ + .main-nav { + display: none; + } + + /* display mobile nav */ + .mobile-nav { + display: flex; + align-items: center; + justify-content: space-between; + /* reduce height of mobile header */ + height: 1.5em; + } + + /* display links when menu button is clicked */ + /* use grid to display each link in new line */ + #mobile-menu-toggle:checked + #mobile-nav-link { + display: grid; + } +} + +@media (max-width: 468px) { + :root { + --font-size: 1em; + } + + .archive-container .archive-footer, + .archive-container .post-footer { + padding: 1em; + } + + .archive-container .archive-article-header > a, + .archive-container .archive-article-header > h1 { + width: 100%; + } +} + +@media (max-width: 320px) { + :root { + --font-size: 0.9em; + } + + .article { + font-size: 1em; + } + + .archive-container .archive-footer, + .archive-container .post-footer { + padding: 1em; + } + + .footer, + .footer-content { + font-size: 0.9em; + } +} + +.copy-button { + border: 1px solid #999; + border-radius: 5px; + cursor: pointer; + font-size: 0.8em; + line-height: 1em; + margin-top: 1em; + padding: 5px; + user-select: none; +} + +.copy-button:hover { + background: var(--main-font-color); + color: var(--main-bg-color); +} + +@media (prefers-color-scheme: dark) { + :root { + --main-bg-color: black; + --main-font-color: #e6e6e6; + --link-hover: white; + --alt-bg-color: #333; + } +} + +@media (prefers-color-scheme: light) { + :root { + --main-bg-color: #f1f1f1; + --main-font-color: #333; + --link-hover: black; + --alt-bg-color: #d8d8d8; + } + + /* + * Visual Studio-like style based on original C# coloring + * Author: Jason Diamond + * https://github.com/highlightjs/highlight.js/blob/master/src/styles/vs.css + */ + + .hljs { + display: block; + overflow-x: auto; + /* padding: 0.5em; + background: white; + color: black; */ + } + + .hljs-comment, + .hljs-quote, + .hljs-variable { + color: #008000; + } + + .hljs-keyword, + .hljs-selector-tag, + .hljs-built_in, + .hljs-name, + .hljs-tag { + color: #00f; + } + + .hljs-string, + .hljs-title, + .hljs-section, + .hljs-attribute, + .hljs-literal, + .hljs-template-tag, + .hljs-template-variable, + .hljs-type, + .hljs-addition { + color: #a31515; + } + + .hljs-deletion, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-meta { + color: #2b91af; + } + + .hljs-doctag { + color: #808080; + } + + .hljs-attr { + color: #f00; + } + + .hljs-symbol, + .hljs-bullet, + .hljs-link { + color: #00b0e8; + } + + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } +} diff --git a/themes/chameleon/source/css/chameleon.css b/themes/chameleon/source/css/chameleon.css index 0146d3c..a60fbb0 100644 --- a/themes/chameleon/source/css/chameleon.css +++ b/themes/chameleon/source/css/chameleon.css @@ -1,7 +1,451 @@ @charset "utf-8"; -/* Require postcss-normalize */ -@import "sanitize"; -@import "sanitize/forms"; +/* Document + * ========================================================================== */ +/** + * Add border box sizing in all browsers (opinionated). + */ +*, +::before, +::after { + box-sizing: border-box; +} +/** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ +::before, +::after { + text-decoration: inherit; /* 1 */ + vertical-align: inherit; /* 2 */ +} +/** + * 1. Use the default cursor in all browsers (opinionated). + * 2. Change the line height in all browsers (opinionated). + * 3. Use a 4-space tab width in all browsers (opinionated). + * 4. Remove the grey highlight on links in iOS (opinionated). + * 5. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + * 6. Breaks words to prevent overflow in all browsers (opinionated). + */ +html { + cursor: default; /* 1 */ + line-height: 1.5; /* 2 */ + -moz-tab-size: 4; /* 3 */ + -o-tab-size: 4; + tab-size: 4; /* 3 */ + -webkit-tap-highlight-color: transparent /* 4 */; + -ms-text-size-adjust: 100%; /* 5 */ + -webkit-text-size-adjust: 100%; /* 5 */ + word-break: break-word; /* 6 */ +} +/* Sections + * ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; +} +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Edge, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} +/* Grouping content + * ========================================================================== */ +/** + * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + */ +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; +} +/** + * Remove the margin on nested lists in Edge 18- and IE. + */ +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; +} +/** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge 18- and IE. + */ +hr { + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} +/** + * Add the correct display in IE. + */ +main { + display: block; +} +/** + * Remove the list style on navigation lists in all browsers (opinionated). + */ +nav ol, +nav ul { + list-style: none; + padding: 0; +} +/** + * 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 + * ========================================================================== */ +/** + * Add the correct text decoration in Edge 18-, IE, and Safari. + */ +abbr[title] { + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +/** + * 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 */ +} +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} +/* Embedded content + * ========================================================================== */ +/* + * Change the alignment on media elements in all browsers (opinionated). + */ +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} +/** + * Remove the border on iframes in all browsers (opinionated). + */ +iframe { + border-style: none; +} +/** + * Change the fill color to match the text color in all browsers (opinionated). + */ +svg:not([fill]) { + fill: currentColor; +} +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; +} +/* Tabular data + * ========================================================================== */ +/** + * Collapse border spacing in all browsers (opinionated). + */ +table { + border-collapse: collapse; +} +/* Forms + * ========================================================================== */ +/** + * Remove the margin on controls in Safari. + */ +button, +input, +select { + margin: 0; +} +/** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + */ +button { + overflow: visible; /* 1 */ + text-transform: none; /* 2 */ +} +/** + * Correct the inability to style buttons in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +/** + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Correct the padding in Firefox. + */ +fieldset { + border: 1px solid #a0a0a0; /* 1 */ + padding: 0.35em 0.75em 0.625em; /* 2 */ +} +/** + * Show the overflow in Edge 18- and IE. + */ +input { + overflow: visible; +} +/** + * 1. Correct the text wrapping in Edge 18- and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + */ +legend { + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + white-space: normal; /* 1 */ +} +/** + * 1. Add the correct display in Edge 18- and IE. + * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + */ +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} +/** + * Remove the inheritance of text transform in Firefox. + */ +select { + text-transform: none; +} +/** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction in all browsers (opinionated). + */ +textarea { + margin: 0; /* 1 */ + overflow: auto; /* 2 */ + resize: vertical; /* 3 */ +} +/** + * 1. Correct the odd appearance in Chrome, Edge, and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} +/** + * Correct the cursor style of increment and decrement buttons in Safari. + */ +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} +/** + * Remove the inner padding in Chrome, Edge, and Safari on macOS. + */ +::-webkit-search-decoration { + -webkit-appearance: none; +} +/** + * 1. Correct the inability to style upload buttons in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} +/** + * Remove the inner border and padding of focus outlines in Firefox. + */ +::-moz-focus-inner { + border-style: none; + padding: 0; +} +/** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ +:-moz-focusring { + outline: 1px dotted ButtonText; +} +/** + * Remove the additional :invalid styles in Firefox. + */ +:-moz-ui-invalid { + box-shadow: none; +} +/* Interactive + * ========================================================================== */ +/* + * Add the correct display in Edge 18- and IE. + */ +details { + display: block; +} +/* + * Add the correct styles in Edge 18-, IE, and Safari. + */ +dialog { + background-color: white; + border: solid; + color: black; + display: block; + height: -moz-fit-content; + height: -webkit-fit-content; + height: fit-content; + left: 0; + margin: auto; + padding: 1em; + position: absolute; + right: 0; + width: -moz-fit-content; + width: -webkit-fit-content; + width: fit-content; +} +dialog:not([open]) { + display: none; +} +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} +/* Scripting + * ========================================================================== */ +/** + * Add the correct display in IE. + */ +template { + display: none; +} +/* User interaction + * ========================================================================== */ +/* + * 1. Remove the tapping delay in IE 10. + * 2. Remove the tapping delay on clickable elements + in all browsers (opinionated). + */ +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { /* 1 */ + touch-action: manipulation; /* 2 */ +} +/* Accessibility + * ========================================================================== */ +/** + * Change the cursor on busy elements in all browsers (opinionated). + */ +[aria-busy="true"] { + cursor: progress; +} +/* + * Change the cursor on control elements in all browsers (opinionated). + */ +[aria-controls] { + cursor: pointer; +} +/* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ +[aria-disabled="true"], +[disabled] { + cursor: not-allowed; +} +/* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ +[aria-hidden="false"][hidden] { + display: initial; +} +[aria-hidden="false"][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + position: absolute; +} +/** + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Add typography inheritance in all browsers (opinionated). + */ +button, +input, +select, +textarea { + background-color: transparent; /* 1 */ + border: 1px solid WindowFrame; /* 1 */ + color: inherit; /* 1 */ + font: inherit; /* 2 */ + letter-spacing: inherit; /* 2 */ + padding: 0.25em 0.375em; /* 1 */ +} +/** + * Change the inconsistent appearance in all browsers (opinionated). + */ +select { + -moz-appearance: none; + -webkit-appearance: none; + background: no-repeat right center / 1em; + border-radius: 0; + padding-right: 1em; +} +/** + * Change the inconsistent appearance in all browsers (opinionated). + */ +select:not([multiple]):not([size]) { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E"); +} +/** + * Change the inconsistent appearance in IE (opinionated). + */ +::-ms-expand { + display: none; +} +/** + * Correct the inconsistent appearance in IE (opinionated). + */ +:-ms-input-placeholder { + color: rgba(0, 0, 0, 0.54); +} :root { --main-bg-color: black; @@ -219,6 +663,8 @@ samp { pre { border-left: 0.1em solid var(--link-underline); padding-left: 1em; + max-width: -webkit-max-content; + max-width: -moz-max-content; max-width: max-content; } @@ -248,6 +694,8 @@ blockquote { border-left: 0.1em solid #666; padding-left: 1em; margin: 1em 3em 1em 0em; + max-width: -webkit-max-content; + max-width: -moz-max-content; max-width: max-content; } @@ -843,7 +1291,10 @@ unhide (via JS) if Web Share API is supported */ line-height: 1em; margin-top: 1em; padding: 5px; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .copy-button:hover {