/*** The new CSS reset - version 1.11 (last updated 20.9.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ /**, *::before, *::after { box-sizing: border-box; }*/ /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* Prevent image stretching. Display images at native width by default */ img, video { height: auto; width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /*****************************************************/ /* COLOR SCHEME */ /*****************************************************/ :root { --border-color: #cbc2be; --zebra-stripe: #fdf6e6; --zebra-background: #fdf6e6; --link-color: #a00; --highlight-color: #FBE5B7; --outline-color: #ff8080; --button-bg-color: #a00; --button-text-color: #fff; } body { background-color: #fef9ee; color: #111; } a { color: var(--link-color); } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --border-color: #444; --zebra-stripe: #fdf6e6; --zebra-background: #1c1c1c; --link-color: #f77; --outline-color: #c33; --button-bg-color: #070; --button-text-color: #fff; --highlight-color: inherit; } body { background-color: #121212; color: #ddd; } img { filter: brightness(.85) contrast(1.05); } figure.invert-on-dark img { filter: invert(100%); } mark { color: #6e6; } } /*****************************************************/ /* FONTS */ /*****************************************************/ @font-face { font-family: 'Pensum Pro'; src: url('/assets/fonts/pensumpro-regular-webfont-subset.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: fallback; unicode-range: U+20, U+21, U+24-26, U+28-3B, U+3D-3F, U+41-5B, U+5D, U+61-7B, U+7D, U+A9, U+AE, U+C7, U+E0-E2, U+E4, U+E7-EF, U+F2-F4, U+F6, U+F9-FC, U+FF, U+2013, U+2018, U+2019, U+201C, U+201D, U+2022, U+20AC, U+2122, U+2190; } @font-face { font-family: 'Pensum Pro'; src: url('/assets/fonts/pensumpro-regularitalic-webfont-subset.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: fallback; unicode-range: U+20, U+21, U+24-26, U+28-3B, U+3D-3F, U+41-5B, U+5D, U+61-7B, U+7D, U+A9, U+AE, U+C7, U+E0-E2, U+E4, U+E7-EF, U+F2-F4, U+F6, U+F9-FC, U+FF, U+2013, U+2018, U+2019, U+201C, U+201D, U+2022, U+20AC, U+2122, U+2190; } @font-face { font-family: 'Pensum Pro'; src: url('/assets/fonts/pensumpro-bold-webfont-subset.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: fallback; unicode-range: U+20, U+21, U+24-26, U+28-3B, U+3D-3F, U+41-5B, U+5D, U+61-7B, U+7D, U+A9, U+AE, U+C7, U+E0-E2, U+E4, U+E7-EF, U+F2-F4, U+F6, U+F9-FC, U+FF, U+2013, U+2018, U+2019, U+201C, U+201D, U+2022, U+20AC, U+2122, U+2190; } @font-face { font-family: 'Pensum Pro'; src: url('/assets/fonts/pensumpro-bolditalic-webfont-subset.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: fallback; unicode-range: U+20, U+21, U+24-26, U+28-3B, U+3D-3F, U+41-5B, U+5D, U+61-7B, U+7D, U+A9, U+AE, U+C7, U+E0-E2, U+E4, U+E7-EF, U+F2-F4, U+F6, U+F9-FC, U+FF, U+2013, U+2018, U+2019, U+201C, U+201D, U+2022, U+20AC, U+2122, U+2190; } /*****************************************************/ /* GENERAL TYPOGRAPHY */ /*****************************************************/ :root { --serif: 'Pensum Pro', Georgia, serif; --sans-serif: 'Gill Sans', 'Gill Sans MT', Roboto, sans-serif; font: 20px var(--serif); font-feature-settings: "kern", "dlig", "frac"; } body { --xxx-large: 2rem; --xx-large: 1.682rem; --x-large: 1.414rem; --large: 1.189rem; --medium: 1rem; --small: 0.841rem; --x-small: 0.707rem; } body * { /* Slightly decrease relative line-height with font-size */ line-height: calc(2.65ex + 4.5px); } p, blockquote, li, dd, td, figcaption, legend, label { hyphens: auto; hyphenate-limit-chars: 8 3 3; /* Surprisingly, all iOS browsers rely on these settings */ -webkit-hyphens: auto; -webkit-hyphenate-limit-before: 3; /* For Safari */ -webkit-hyphenate-limit-after: 3; /* For Safari */ } /*****************************************************/ /* LAYOUT */ /*****************************************************/ body { --side-margin: 28px; --max-body-width: 720px; margin: 0 auto; min-width: calc(320px - 2 * var(--side-margin)); max-width: var(--max-body-width); padding: .75rem var(--side-margin); } /* A 'wide' div breaks out of the body to cover the entire viewport */ .wide { margin-left: calc(50% - 50vw + var(--side-margin)); margin-right: calc(50% - 50vw + var(--side-margin)); } .wide>.container { margin-left: auto; margin-right: auto; } /*****************************************************/ /* HOME PAGE */ /*****************************************************/ nav.home { font-weight: bold; text-align: center; } /*****************************************************/ /* BLOCK ELEMENTS */ /*****************************************************/ aside { border-left: 1px solid var(--border-color); display: block; font-size: var(--small); padding-left: 1.5em; } h1 { font-size: var(--xxx-large); margin-bottom: 1em; margin-top: 1em; } h2, h3 { margin-top: 2em; margin-bottom: 1em; } h2 { font-size: var(--large); font-weight: bold; } h2.line-on-sides { margin-bottom: 2em; margin-top: 3em; overflow: hidden; text-align: center; } h2.line-on-sides:before, h2.line-on-sides:after { background-color: var(--border-color); content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h2.line-on-sides:before { right: 0.5em; margin-left: -50%; } h2.line-on-sides:after { left: 0.5em; margin-right: -50%; } h3 { font-weight: bold; text-transform: uppercase; } dt { font-weight: bold; margin-top: 1em; } p, ul, li { margin-bottom: 2.5ex; } ul { list-style: disc; margin-left: 2em; margin-top: 1em; } ul ul { list-style: circle; } ol { list-style: decimal; margin-left: 2em; margin-bottom: 1em; } ol ol { list-style: lower-alpha; } .lead { font-size: var(--large); font-style: italic; margin: 2rem 0; } h1, .lead { text-wrap: pretty; } blockquote { font-style: italic; margin-left: 1.5em; margin-bottom: 1.5rem; margin-top: 1.5rem; } blockquote+.source { font-size: var(--small); text-align: right; margin-left: 1.5em; margin-top: -.75rem; } :is(.post, .video) article { margin-bottom: 4rem; } :is(.post, .video) article footer { margin: 2em 0; opacity: .8; text-align: center; } .post article~section { margin-bottom: 4rem; margin-top: 4rem; } body>footer { border-top: 1px solid var(--border-color); font: var(--small) var(--sans-serif); margin: 4rem auto; padding-top: 1.5rem; text-align: center; } /*****************************************************/ /* INLINE STYLES */ /*****************************************************/ strong, b { font-weight: bold; } em, i { font-style: italic; } a { text-decoration: underline; text-underline-offset: .25ex; } a:focus { text-decoration: none; } address { display: inline; } code { font-family: monospace; } mark { background-color: var(--highlight-color); border-radius: .25em; padding: .1em .33em; } @media (prefers-color-scheme: dark) { mark { border-radius: 0; padding: 0; } } .pillar::after { content: '★'; } /*****************************************************/ /* IMAGES */ /*****************************************************/ figure { margin: 1.5rem 0; } figure.feature { margin: 2rem 0; } figure.native-w { height: auto; margin: 1.5rem auto; width: auto; } figure.native-w img { width: auto; } figure.small { width: calc(var(--max-body-width) / 4); } figure.full-w {} figure.centered { height: auto; margin: 1.5rem auto; } figure.float-left { float: left; margin-right: 1rem; margin-top: 6px; margin-bottom: 11px; } figcaption { font-size: var(--small); font-style: italic; margin-top: .5rem; } figure pre { white-space: pre-wrap; } figure code { font-size: var(--x-small); } /*****************************************************/ /* FORMS */ /*****************************************************/ form .field { margin-bottom: 1em; margin-right: 1em; } input[type="text"], input[type="email"] { border: 1px solid var(--border-color); margin: .25em 0; padding: .25em .75em; width: 17em; } button { background-color: var(--button-bg-color); border-radius: .25em; color: var(--button-text-color); padding: .25em .75em; } button:hover { cursor: pointer; } /*****************************************************/ /* TABLES */ /*****************************************************/ .table-container { margin-top: 2rem; margin-bottom: 2rem; overflow: auto; } .table-container.wide { margin-left: calc(50% - 50vw + var(--side-margin)); margin-right: calc(50% - 50vw + var(--side-margin)); } .table-container.wide table { width: auto; } table { border-collapse: collapse; display: block; font-family: monospace; font-size: var(--x-small); margin-bottom: 1.5rem; margin: 0 auto; max-width: 72em; width: 100%; } tr:nth-child(odd) td { background-color: var(--zebra-background); } @media (prefers-color-scheme: dark) { tr:nth-child(odd) td { background-color: var(--zebra-background); } } th { font-weight: bold; } th, td { border-bottom: 1px solid var(--border-color); padding: .33em .67em; white-space: nowrap; } .table-container.wrap :is(th, td) { white-space: normal; } /*****************************************************/ /* HOME */ /*****************************************************/ .home header>* { text-align: center; } /*****************************************************/ /* COMPONENTS */ /*****************************************************/ /* ARTICLE PREVIEWS */ .article-previews { --article-width: 264px; --flex-gap: 1.5em; } .article-previews .container { max-width: calc(100vw - (2 * var(--side-margin))); /* FIXME: does this actually work when the viewport is narrow? */ width: calc(3 * var(--article-width) + 2 * var(--flex-gap)); } .article-previews .articles { display: flex; flex-wrap: wrap; gap: var(--flex-gap); justify-content: center; } .article-previews article { width: var(--article-width); } .article-previews img { display: block; } .article-previews figure { aspect-ratio: 1.78 / 1; margin-bottom: 2.15ex; } .article-previews header { font-weight: bold; margin: .67em 0; } .article-previews p { font-size: var(--small); } /*****************************************************/ /* ARTICLE INDEX */ /*****************************************************/ .article-index { --column-width: 13em; --column-gap: 2em; } .article-index .container { max-width: calc(100vw - (2 * var(--side-margin))); width: calc((4 * var(--column-width)) + (3 * (var(--column-gap) + 1px))); } .article-list { column-count: 4; column-gap: var(--column-gap); column-rule: 1px solid var(--border-color); column-width: var(--column-width); } .article-list .topic { break-inside: avoid-column; display: inline-block; } .article-list dt, .article-list dd { margin-bottom: 1.67em; } .article-list dt { margin-top: 0; } .article-list dd { font-size: var(--small); text-wrap: balance; } .article-list dd:last-child { margin-bottom: 4em; } .article-list a { text-decoration: none; } .article-list a:hover { text-decoration: underline; } /*****************************************************/ /* SUBSCRIPTION-FORM */ /*****************************************************/ .subscription-form { border-left: .125em solid var(--button-bg-color); font: var(--small) var(--sans-serif); margin: 4em 0; padding-left: 1em; } .subscription-form h2 { color: var(--button-bg-color); /* Gill Sans is too thick at weight 700 */ font-weight: 600; } .js-cm-form .inputs { display: flex; flex-wrap: wrap; } .js-cm-form label { display: block; }