cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
e65d0dcaf36864f0178b3dc0fd70b4c739b3eb1a
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2024-01-10T02:05:26Z
static/styles.css | 658 +++++++++++++++++++++++++------------------------- static/styles.min.css | 2 +- 2 files changed, 332 insertions(+), 328 deletions(-) @@ -8,476 +8,480 @@ * 2. Prevent adjustments of font size after orientation changes in iOS. */ - html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - } - - /* Sections +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections ========================================================================== */ - - /** + +/** * Remove the margin in all browsers. */ - - body { - margin: 0; - } - - /** + +body { + margin: 0; +} + +/** * Render the `main` element consistently in IE. */ - - main { - display: block; - } - - /** + +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; - } - - /* Grouping content + +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 */ - } - - /** + +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 */ - } - - /* Text-level semantics + +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; - } - - /** + +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 */ - } - - /** + +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; - } - - /** + +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 */ - } - - /** + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** * Add the correct font size in all browsers. */ - - small { - font-size: 80%; - } - - /** + +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; - } - - sub { - bottom: -0.25em; - } - - sup { - top: -0.5em; - } - - /* Embedded content + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content ========================================================================== */ - - /** + +/** * Remove the border on images inside links in IE 10. */ - - img { - border-style: none; - } - - /* Forms + +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 */ - } - - /** + +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; - } - - /** + +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; - } - - /** + +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; - } - - /** + +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; - } - - /** + +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; - } - - /** + +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; - } - - /** + +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 */ - } - - /** + +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; - } - - /** + +progress { + vertical-align: baseline; +} + +/** * Remove the default vertical scrollbar in IE 10+. */ - - textarea { - overflow: auto; - } - - /** + +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 */ - } - - /** + +[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; - } - - /** + +[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 */ - } - - /** + +[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; - } - - /** + +[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 */ - } - - /* Interactive + +::-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; - } - - /* + +details { + display: block; +} + +/* * Add the correct display in all browsers. */ - - summary { - display: list-item; - } - - /* Misc + +summary { + display: list-item; +} + +/* Misc ========================================================================== */ - - /** + +/** * Add the correct display in IE 10+. */ - - template { - display: none; - } - - /** + +template { + display: none; +} + +/** * Add the correct display in IE 10. */ - - [hidden] { - display: none; - } - + +[hidden] { + display: none; +} /* CUSTOM CSS */ :root { - --bg: #181a1b; - --bg-bright: #2f3132; - --fg: #c6c6c6; - --fg-bright: #fff; - --fg-dark: #575757; - --blue: #6eb6ff; - --pink: #ff91a5; + --bg: #181a1b; + --bg-bright: #2f3132; + --fg: #c6c6c6; + --fg-bright: #fff; + --fg-dark: #575757; + --blue: #6eb6ff; + --pink: #ff91a5; } @media (prefers-reduced-motion: no-preference) { - :root { - scroll-behavior: smooth; - } + :root { + scroll-behavior: smooth; + } } body { - background-color: var(--bg); - color: var(--fg); - font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; - font-size: 1rem; - line-height: 1.5; - max-width: 45em; - margin: 0 auto; - padding: 0 1rem; + background-color: var(--bg); + color: var(--fg); + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, + helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, + sans-serif; + font-size: 1rem; + line-height: 1.5; + max-width: 45em; + margin: 0 auto; + padding: 0 1rem; } .site-nav, footer { - border-color: var(--fg); + border-color: var(--fg); } footer { - border-top: 1px dotted; - padding-top: 1rem; - margin: 1rem 0; + border-top: 1px dotted; + padding-top: 1rem; + margin: 1rem 0; } footer p { - margin: 0; + margin: 0; } .site-nav { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } .site-nav ul { - list-style-type: none; - display: flex; - align-items: center; - padding: 0; + list-style-type: none; + display: flex; + align-items: center; + padding: 0; } .site-nav ul li { - margin-right: 0.5rem; + margin-right: 0.5rem; } h1, h2, h3, h4 { - color: var(--fg-bright); + color: var(--fg-bright); } a, a:visited { - color: var(--blue); - text-decoration: none; + color: var(--blue); + text-decoration: none; } a:hover { - text-decoration: underline; + text-decoration: underline; } img { - width: 100%; + width: 100%; } table { - border-collapse: collapse; - color: var(--fg); - border-color: var(--fg-dark); + border-collapse: collapse; + color: var(--fg); + border-color: var(--fg-dark); } thead, th, tr, td { - border: 1px solid var(--fg-dark); - padding: 0.25rem; + border: 1px solid var(--fg-dark); + padding: 0.25rem; } pre > code, time, code { - font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; - font-size: 1rem; + font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, + monospace; + font-size: 1rem; } pre { - background-color: var(--bg-bright) !important; - border-radius: 3px; - margin: 0.5rem 0; - padding: 0.5rem; - overflow-x: auto; + background-color: var(--bg-bright) !important; + border-radius: 3px; + margin: 0.5rem 0; + padding: 0.5rem; + overflow-x: auto; } :not(pre) > code { - background-color: var(--bg-bright); - color: var(--pink); - padding: 0.15rem; - border-radius: 3px; + background-color: var(--bg-bright); + color: var(--pink); + padding: 0.15rem; + border-radius: 3px; } aside { - background-color: var(--bg-bright); - padding: 1rem; + background-color: var(--bg-bright); + padding: 1rem; } blockquote { - background-color: var(--bg-bright); - border-left: 10px solid var(--blue); - margin: 1rem 0; - padding: 0.5rem 1rem; + background-color: var(--bg-bright); + border-left: 10px solid var(--blue); + margin: 1rem 0; + padding: 0.5rem 1rem; } blockquote p { - margin: 0; + margin: 0; } .post { @@ -485,8 +489,8 @@ blockquote p { } .post time { - flex-shrink: 0; - margin-right: 0.5rem; + flex-shrink: 0; + margin-right: 0.5rem; } .post-metadata { @@ -500,7 +504,7 @@ blockquote p { } .post-metadata p { - margin: 0; + margin: 0; } details { @@ -512,24 +516,24 @@ summary { } .footnote-definition { - display: flex; - justify-content: flex-start; - align-items: top; - margin: 1rem 0; + display: flex; + justify-content: flex-start; + align-items: top; + margin: 1rem 0; } .footnote-definition sup { - font-size: inherit; - top: 0; - line-height: inherit; - padding-right: 0.5rem; + font-size: inherit; + top: 0; + line-height: inherit; + padding-right: 0.5rem; } .footnote-definition sup::after { - content: "."; + content: "."; } .footnote-definition p { - display: inline-block; - margin: 0; + display: inline-block; + margin: 0; } @@ -1 +1 @@ -/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--bg:#181a1b;--bg-bright:#2f3132;--fg:#c6c6c6;--fg-bright:#fff;--fg-dark:#575757;--blue:#6eb6ff;--pink:#ff91a5}@media(prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{background-color:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;font-size:1rem;line-height:1.5;max-width:45em;margin:0 auto;padding:0 1rem}.site-nav,footer{border-color:var(--fg)}footer{border-top:1px dotted;padding-top:1rem;margin:1rem 0}footer p{margin:0}.site-nav{border-bottom:1px dotted}.site-nav ul{list-style-type:none;display:flex;align-items:center;padding:0}.site-nav ul li{margin-right:.5rem}h1,h2,h3,h4{color:var(--fg-bright)}a,a:visited{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}img{width:100%}table{border-collapse:collapse;color:var(--fg);border-color:var(--fg-dark)}thead,th,tr,td{border:1px solid var(--fg-dark);padding:.25rem}pre>code,time,code{font-family:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;font-size:1rem}pre{background-color:var(--bg-bright)!important;border-radius:3px;margin:.5rem 0;padding:.5rem;overflow-x:auto}:not(pre)>code{background-color:var(--bg-bright);color:var(--pink);padding:.15rem;border-radius:3px}aside{background-color:var(--bg-bright);padding:1rem}blockquote{background-color:var(--bg-bright);border-left:10px solid var(--blue);margin:1rem 0;padding:.5rem 1rem}blockquote p{margin:0}.post{display:flex}.post:first-child{flex:none}.post time{margin-right:.5rem}.post-metadata{border:1px dotted var(--fg);border-top:none;padding:1rem}.post-metadata h1{margin:0}.post-metadata p{margin:0}details{margin-top:1rem}summary{font-weight:700}.footnote-definition{display:flex;justify-content:flex-start;align-items:top;margin:1rem 0}.footnote-definition sup{font-size:inherit;top:0;line-height:inherit;padding-right:.5rem}.footnote-definition sup::after{content:"."}.footnote-definition p{display:inline-block;margin:0} \ No newline at end of file +/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--bg:#181a1b;--bg-bright:#2f3132;--fg:#c6c6c6;--fg-bright:#fff;--fg-dark:#575757;--blue:#6eb6ff;--pink:#ff91a5}@media(prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{background-color:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;font-size:1rem;line-height:1.5;max-width:45em;margin:0 auto;padding:0 1rem}.site-nav,footer{border-color:var(--fg)}footer{border-top:1px dotted;padding-top:1rem;margin:1rem 0}footer p{margin:0}.site-nav{border-bottom:1px dotted}.site-nav ul{list-style-type:none;display:flex;align-items:center;padding:0}.site-nav ul li{margin-right:.5rem}h1,h2,h3,h4{color:var(--fg-bright)}a,a:visited{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}img{width:100%}table{border-collapse:collapse;color:var(--fg);border-color:var(--fg-dark)}thead,th,tr,td{border:1px solid var(--fg-dark);padding:.25rem}pre>code,time,code{font-family:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;font-size:1rem}pre{background-color:var(--bg-bright)!important;border-radius:3px;margin:.5rem 0;padding:.5rem;overflow-x:auto}:not(pre)>code{background-color:var(--bg-bright);color:var(--pink);padding:.15rem;border-radius:3px}aside{background-color:var(--bg-bright);padding:1rem}blockquote{background-color:var(--bg-bright);border-left:10px solid var(--blue);margin:1rem 0;padding:.5rem 1rem}blockquote p{margin:0}.post{display:flex}.post time{flex-shrink:0;margin-right:.5rem}.post-metadata{border:1px dotted var(--fg);border-top:none;padding:1rem}.post-metadata h1{margin:0}.post-metadata p{margin:0}details{margin-top:1rem}summary{font-weight:700}.footnote-definition{display:flex;justify-content:flex-start;align-items:top;margin:1rem 0}.footnote-definition sup{font-size:inherit;top:0;line-height:inherit;padding-right:.5rem}.footnote-definition sup::after{content:"."}.footnote-definition p{display:inline-block;margin:0} \ No newline at end of file