diff --git a/themes/typing/source/css/typing.css b/themes/typing/source/css/typing.css index 4461193..87d4999 100644 --- a/themes/typing/source/css/typing.css +++ b/themes/typing/source/css/typing.css @@ -1,12 +1,515 @@ @charset "utf-8"; - -html { - -webkit-text-size-adjust: 100%; +/* 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); +} +/** + * Use a comfortable measure in all browsers (opinionated). + */ +html { + padding: 1em; +} +@media (min-width: 34em) { + html { + padding: 1em calc(50% - 16em); + } +} +/** + * Restrict sizing to the page width in all browsers (opinionated). + */ +iframe, +img, +input, +select, +textarea { + height: auto; + max-width: 100%; +} +/** + * Use the default user interface font in all browsers (opinionated). + */ +html { + font-family: + system-ui, + /* macOS 10.11-10.12 */ -apple-system, + /* Windows 6+ */ "Segoe UI", + /* Android 4+ */ "Roboto", + /* Ubuntu 10.10+ */ "Ubuntu", + /* Gnome 3+ */ "Cantarell", + /* KDE Plasma 5+ */ "Noto Sans", + /* fallback */ sans-serif, + /* macOS emoji */ "Apple Color Emoji", + /* Windows emoji */ "Segoe UI Emoji", + /* Windows emoji */ "Segoe UI Symbol", + /* Linux emoji */ "Noto Color Emoji"; +} +/** + * Use the default monospace user interface font in all browsers (opinionated). + */ +code, +kbd, +samp, +pre { + font-family: + /* macOS 10.10+ */ "Menlo", + /* Windows 6+ */ "Consolas", + /* Android 4+ */ "Roboto Mono", + /* Ubuntu 10.10+ */ "Ubuntu Monospace", + /* KDE Plasma 5+ */ "Noto Mono", + /* KDE Plasma 4+ */ "Oxygen Mono", + /* Linux/OpenOffice fallback */ "Liberation Mono", + /* fallback */ monospace, + /* macOS emoji */ "Apple Color Emoji", + /* Windows emoji */ "Segoe UI Emoji", + /* Windows emoji */ "Segoe UI Symbol", + /* Linux emoji */ "Noto Color Emoji"; +} /**/ button, input, -optgroup, select, textarea { font-family: inherit; @@ -14,63 +517,6 @@ textarea { line-height: 1.15; } -[type="button"], -[type="reset"], -[type="submit"], -button { - -webkit-appearance: button; -} - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -html.borderbox *, -html.borderbox :after, -html.borderbox :before { - box-sizing: border-box; -} - -article, -aside, -blockquote, -body, -button, -code, -dd, -details, -dl, -dt, -fieldset, -figcaption, -figure, -footer, -form, -h1, -h2, -h3, -h4, -h5, -h6, -header, -hr, -input, -legend, -li, -menu, -nav, -ol, -p, -pre, -section, -td, -textarea, -th, -ul { - margin: 0; - padding: 0; -} - body, button, input, @@ -79,105 +525,10 @@ textarea { font: normal 1em/1.8 sans-serif; } -button::-moz-focus-inner, -input::-moz-focus-inner { - padding: 0; - border: 0; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -fieldset, -img { - border: 0; -} - -blockquote { - position: relative; - font-weight: 400; -} - -abbr, -acronym { - border-bottom: 1px dotted; - -webkit-font-feature-settings: normal; - font-feature-settings: normal; - font-variant: normal; -} - -abbr { - cursor: help; -} - -del { - text-decoration: line-through; -} - -address, -caption, -cite, -code, -dfn, -em, -th, -var { - font-style: normal; - font-weight: 400; -} - -ol, -ul { - list-style: none; -} - -caption, -th { - text-align: left; -} - -q:after, -q:before { - content: ""; -} - -:root sub, -:root sup { - vertical-align: baseline; -} - -.typo a:hover, -a, -ins { - text-decoration: none; -} - -.typo-u, -u { - text-decoration: underline; -} - -mark { - background: #fffdd1; - border-bottom: 1px solid #ffedce; - padding: 2px; - margin: 0 5px; -} - -code, -pre, -pre tt { - font-family: monospace, monospace; -} - pre { background: #f8f8f8; border: 1px solid #ddd; padding: 1em 1.5em; - display: block; - -webkit-overflow-scrolling: touch; } hr { @@ -191,191 +542,80 @@ hr { margin-left: 25%; } -.typo-small, figcaption, small { font-size: 0.9em; color: #888; } -[draggable] { - cursor: move; -} - -.clearfix:after, -.clearfix:before { - content: ""; - display: table; -} - -.clearfix:after { - clear: both; -} - -.clearfix { - zoom: 1; -} - -.textwrap, -.textwrap td, -.textwrap th { - word-wrap: break-word; - word-break: break-all; -} - -.textwrap-table { - table-layout: fixed; -} - -.typo dl, -.typo form, -.typo hr, -.typo ol, -.typo p, -.typo pre, -.typo table, -.typo ul, -.typo-dl, -.typo-form, -.typo-hr, -.typo-ol, -.typo-p, -.typo-pre, -.typo-table, -.typo-ul, +dl, +form, +hr, +ol, +p, +pre, +table, +ul, blockquote { margin-bottom: 1em; } -.typo ul, -.typo-ul { +ul { margin-left: 1.3em; list-style: disc; } -.typo ol, -.typo-ol { +ol { list-style: decimal; margin-left: 1.9em; } -.typo li ol, -.typo li ul, -.typo-ol ol, -.typo-ol ul, -.typo-ul ol, -.typo-ul ul { +li ol, +li ul, +ol, +ul { margin-bottom: 0.8em; margin-left: 2em; } -.typo li ul, -.typo-ol ul, -.typo-ul ul { +li ul, +ul { list-style: circle; } -.typo table caption, -.typo table td, -.typo table th, -.typo-table td, -.typo-table th { +table caption, +table td, +table th, +td, +th { border: 1px solid #ddd; padding: 0.5em 1em; color: #666; } -.typo table th, -.typo-table th { +table th, +th { background: #fbfbfb; } -.typo table thead th, -.typo-table thead th { +table thead th, +thead th { background: #f1f1f1; } -.typo table caption { - border-bottom: none; -} - -.typo-input, -.typo-textarea { - -webkit-appearance: none; - border-radius: 0; -} - -.typo em, -.typo-em, +em, caption, legend { color: #000; font-weight: inherit; } -.typo-em { - position: relative; -} - -.typo-em:after { - position: absolute; - top: 0.65em; - left: 0; - width: 100%; - overflow: hidden; - white-space: nowrap; - content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; -} - html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-rendering: optimizelegibility; font-family: sans-serif; line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} - -audio, -canvas, -progress, -video { - display: inline-block; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -progress { - vertical-align: baseline; -} - -[hidden], -template { - display: none; } a { - background-color: transparent; - -webkit-text-decoration-skip: objects; color: #222; transition: color 0.25s linear; cursor: pointer; @@ -386,17 +626,6 @@ a:hover { outline-width: 0; } -abbr[title] { - border-bottom: none; - text-decoration: underline; - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -dfn { - font-style: italic; -} - h1 { font-family: serif; font-size: 1.5em; @@ -412,44 +641,10 @@ h3 { font-size: 1.1em; } -mark { - background-color: #ff0; - color: #000; -} - -small { - font-size: 80%; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -img { - border-style: none; -} - -svg:not(:root) { - overflow: hidden; -} - code, kbd, pre, samp { - font-family: monospace, monospace; font-size: 0.9em; background-color: #f3f5f6; } @@ -458,94 +653,6 @@ figure { margin: 1em 40px; } -button, -input, -optgroup, -select, -textarea { - font: inherit; - margin: 0; -} - -optgroup { - font-weight: 700; -} - -button, -input { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -[type="reset"], -[type="submit"], -button, -html [type="button"] { - -webkit-appearance: button; -} - -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner { - border-style: none; - padding: 0; -} - -fieldset { - border: 1px solid silver; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} - -textarea { - overflow: auto; -} - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - padding: 0; -} - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - .article .article-entry blockquote footer cite a:hover, .article .article-nav-link-wrap:hover { color: #22c5e5; @@ -601,12 +708,10 @@ h5, h6 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -moz-font-feature-settings: "liga" on; transition: 0.25s; } body { - margin: 0; font-family: sans-serif; font-size: 1.2em; } @@ -1161,16 +1266,15 @@ samp { color: #e6e6e6; } -.dark .typo em, -.dark .typo-em, +.dark em, .dark caption, .dark legend { color: #e6e6e6; } -.dark .typo table caption, -.dark .typo table td, -.dark .typo-table td { +.dark table caption, +.dark table td, +.dark td { border: 1px solid #ddd; color: #e6e6e6; } @@ -1365,8 +1469,6 @@ pre .keyword { width: 85%; padding-left: 0.2em; box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; } /* highlight the text box when focused */ @@ -1427,7 +1529,6 @@ svg#link { /* use grid to display each link in new line */ #mobile-menu-toggle:checked + .mobile-nav-link { display: grid; - display: -ms-grid; } } @@ -1484,10 +1585,10 @@ svg#link { font-size: 0.8em; line-height: 1em; padding: 5px; - user-select: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .copy-button:hover {