/* variables */ /* stylelint-disable */ /* TODO: Make sure this is up to date */ :root { --system-sans: system-ui, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, /* mac, ios */ 'segoe ui', /* windows */ roboto, noto, 'droid sans', /* android */ 'liberation sans', /* linux */ 'lucida grande', 'helvetica neue', helvetica, /* old mac */ 'franklin gothic medium', 'century gothic', /* old windows */ cantarell, oxygen, ubuntu, /* old linux */ sans-serif; /* fallback */ --system-mono: system-ui-monospaced, menlo, /* mac */ inconsolata, consolas, /* windows */ 'noto mono', 'droid sans mono', /* android */ 'liberation mono', 'dejavu sans mono', 'ubuntu mono', /* linux */ monaco, 'courier new', /* older systems */ monospace; /* fallback */ --system-serif: charter, constantia, /* mac */ 'lucida bright', lucidabright, 'lucida serif', lucida, /* windows */ 'dejavu serif', 'bitstream vera serif', 'liberation serif', /* linux */ georgia, /* old systems */ serif; /* fallback */ } /* stylelint-enable */ /* variable settings */ :root { /* font family */ --font-body: var(--system-sans); --font-code: var(--system-mono); /* font size and spacing */ --font-size-body: 14px; --font-size-scale: 0.25vw; /* note: use unitless line heights https://css-tricks.com/almanac/properties/l/line-height/#article-header-id-0 */ --line-height-body: 1.75; --line-height-pre: 1.45; /* light colors */ --light-text: hsla(0, 0%, 7%, 1); /* #111 */ --light-background: white; --light-layer-background: hsla(0, 0%, 100%, 0); /* #fff */ --light-accent-background: hsla(0, 0%, 95%, 1); /* #f2f2f2 */ --light-accent-midground: hsla(0, 0%, 84%, 1); /* #d6d6d6 */ --light-accent-foreground: hsla(0, 0%, 49%, 1); /* #7d7d7d */ --light-link-text: hsla(208, 100%, 50%, 1); /* #08f */ --light-mark-background: hsla(60, 100%, 50%, 1); /* #ff0 */ --light-code-text: var(--light-text); --light-code-background: var(--light-accent-background); --light-code-border: var(--light-accent-midground); /* dark colors */ --dark-text: white; --dark-background: hsla(0, 0%, 12%, 1); /* #1f1f1f from safari */ --dark-layer-background: var(--transparent); --dark-accent-background: hsla(0, 0%, 20%, 1); /* #333 */ --dark-accent-midground: hsla(0, 0%, 30%, 1); /* #4d4d4d */ --dark-accent-foreground: hsla(0, 0%, 60%, 1); /* #999 */ --dark-link-text: hsl(206, 100%, 70%); /* #66bdff */ --dark-mark-background: hsla(58, 66%, 30%, 1); /* #7f7c1a */ --dark-code-text: var(--dark-text); --dark-code-background: var(--dark-accent-background); --dark-code-border: var(--dark-accent-midground); } :root, .light-mode { /* main colors */ --text: var(--light-text); --background: var(--light-background); --layer-background: var(--light-layer-background); --accent-background: var(--light-accent-background); --accent-midground: var(--light-accent-midground); --accent-foreground: var(--light-accent-foreground); /* misc colors */ --link-text: var(--light-link-text); --mark-background: var(--light-mark-background); --code-text: var(--light-code-text); --code-background: var(--light-code-background); --code-border: var(--light-code-border); color-scheme: light; supported-color-schemes: light; } .dark-mode { /* main colors */ --text: var(--dark-text); --background: var(--dark-background); --layer-background: var(--dark-layer-background); --accent-background: var(--dark-accent-background); --accent-midground: var(--dark-accent-midground); --accent-foreground: var(--dark-accent-foreground); /* misc colors */ --link-text: var(--dark-link-text); --mark-background: var(--dark-mark-background); --code-text: var(--dark-code-text); --code-background: var(--dark-code-background); --code-border: var(--dark-code-border); color-scheme: dark; supported-color-schemes: dark } .dark-mode input[type=search]::-webkit-search-cancel-button { -webkit-filter: invert(100%); } @media (prefers-color-scheme: dark) { :root { /* stylelint-disable-line at-rule-no-unknown */ --text: var(--dark-text); --background: var(--dark-background); --layer-background: var(--dark-layer-background); --accent-background: var(--dark-accent-background); --accent-midground: var(--dark-accent-midground); --accent-foreground: var(--dark-accent-foreground); --link-text: var(--dark-link-text); --mark-background: var(--dark-mark-background); --code-text: var(--dark-code-text); --code-background: var(--dark-code-background); --code-border: var(--dark-code-border); color-scheme: dark; supported-color-schemes: dark; } :root input[type=search]::-webkit-search-cancel-button { -webkit-filter: invert(100%); } .light-mode input[type=search]::-webkit-search-cancel-button { -webkit-filter: initial; } } /* html should be at the top */ html { box-sizing: border-box; font-family: var(--font-body); font-size: calc(var(--font-size-body) + var(--font-size-scale)); line-height: var(--line-height-body); -webkit-font-kerning: normal; font-kerning: normal; text-rendering: optimizeLegibility; font-feature-settings: normal; } /* Remove the margin in all browsers. */ body { margin: 0; background-color: var(--background); color: var(--text); } /* apply a natural box layout model to all elements, but allowing components to change https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ *, *::before, *::after { box-sizing: inherit; } h1, h2, h3, h4, h5, h6 { /* TODO: Needed? */ font-weight: 500; line-height: 1.25em; margin-bottom: 1.25rem; margin-top: 2rem; position: relative /* rep the smallies */ } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: var(--accent-foreground); font-size: 0.7em; font-weight: 400; } h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { font-size: 0.9em; } h1 { font-size: 2.75em; } h2 { font-size: 2.25em; } h3 { font-size: 1.75em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1em; color: var(--accent-foreground); letter-spacing: 00.025em; } /* tighten up body copy just a smidge */ p { letter-spacing: -0.01em; } /* 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: auto; text-decoration-skip: auto; /* 2 */ color: var(--link-text); text-decoration: none /* Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */ } a:active, a:hover { outline: 0; outline-width: 0; } a:active, a:focus, a:hover { text-decoration: underline; } ul, ol { padding: 0; padding-left: 2em } ul ol, ol ol { list-style-type: lower-roman; } ul ul, ul ol, ol ul, ol ol { margin-top: 0; margin-bottom: 0 } ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha; } li > p { margin-top: 1em; } blockquote { margin: 0 0 1rem; padding: 0 1rem; color: var(--accent-foreground); border-left: 4px solid var(--accent-midground) } blockquote > :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } /* 1. Prevent the duplicate application of `bolder` by the next rule in Safari 6. 2. Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: inherit; /* 1 */ font-weight: 600; /* 2 */ } /* Add the correct background and color in IE 9-. */ mark { background-color: var(--mark-background); color: var(--text); } /* 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; } /* 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ code, pre, kbd, samp { font-family: var(--font-code); /* 1 */ font-size: 90%; /* 2 */ color: var(--code-text); } code { padding: 0.2em 0.4em; margin: 0; } pre, code { background-color: var(--code-background); border-radius: 5px; } a code, pre, kbd, samp { color: var(--link-text); } pre { overflow: auto; word-wrap: normal; line-height: var(--line-height-pre); border: 1px solid var(--code-border) } pre code { background: transparent; display: block; padding: 0.5em; line-height: inherit; word-wrap: normal; border-radius: unset } pre code::before, pre code::after { content: normal; } pre > code { border: 0; font-size: 1em; white-space: pre; word-break: normal; } /* Keyboard kbd shortcut key style */ kbd { background-color: var(--layer-background); background-image: linear-gradient(var(--layer-background), var(--accent-background) 75%); background-repeat: repeat-x; border: 1px solid var(--accent-midground); border-radius: 2px; box-shadow: 0 1px 0 var(--accent-midground); /* depth */ color: var(--text); display: inline-block; line-height: 0.95em; margin: 0 1px; padding: 5px 5px 1px; } td, th { padding: 0; } table { border-collapse: collapse; border-spacing: 0; display: block; width: 100%; overflow: auto; word-break: normal; word-break: keep-all } table th, table td { padding: 6px 13px; border: 1px solid var(--accent-midground); } table th { font-weight: bold; } table tr { background-color: var(--layer-background); border-top: 1px solid var(--accent-midground) } table tr:nth-child(2n) { background-color: var(--accent-background); } /* 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ overflow: visible; /* 2 */ background: transparent; height: 4px; padding: 0; margin: 1em 0; background-color: var(--accent-midground); border: 0 none } hr::before { display: table; content: ''; } hr::after { display: table; clear: both; content: ''; } /* Remove the border on images inside links in IE 10-. */ img { border-style: none; border: 0; max-width: 100%; } /* Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } figure { margin: 1em 0 } figure img, figure video { background: var(--layer-background); border: 1px solid var(--accent-midground); border-radius: 5px; padding: 0.25em; } figure.borderless img, figure.borderless video { border: none; padding: 0; } figcaption { font-style: italic; font-size: 0.75em; margin: 0; color: var(--accent-foreground); } /* 1. Remove the bottom border in Firefox 39- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /* Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } dd { margin-left: 0; } dl { padding: 0 } dl dt { padding: 0; margin-top: 1em; font-size: 1em; font-style: italic; font-weight: 600; } dl dd { padding: 0 1em; margin-bottom: 1.25em; } /* same margins for all typographic block elements */ p, blockquote, ul, ol, dl, table, pre { margin-top: 0; margin-bottom: 1.25em; } /* Add the correct font size in all browsers. */ small { font-size: 80%; } input[type=reset], input[type=submit], input[type=button], button { /* Button */ } input[type=checkbox] { /* fix iOS Safari clipping */ transform: translate(0); } input[type=radio] { /* fix iOS Safari clipping */ transform: translate(0); } input[type=search] { /* Fix search box appearance safari */ -webkit-appearance: textfield; } input[type=date], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] { border-color: var(--accent-midground); border-radius: 5px; border-width: 2px; border-style: solid; font-size: 1.2em; padding: 0.4em; color: var(--text); background-color: var(--background); width: 15.5em } input[type=date]:focus, input[type=datetime-local]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus { /* Form focused */ border-color: var(--accent-foreground); } input[type=date]:disabled, input[type=datetime-local]:disabled, input[type=email]:disabled, input[type=month]:disabled, input[type=number]:disabled, input[type=password]:disabled, input[type=search]:disabled, input[type=tel]:disabled, input[type=text]:disabled, input[type=time]:disabled, input[type=url]:disabled, input[type=week]:disabled { /* Form disabled */ background-color: var(--accent-background); } input[type=date]:hover:not([disabled]), input[type=datetime-local]:hover:not([disabled]), input[type=email]:hover:not([disabled]), input[type=month]:hover:not([disabled]), input[type=number]:hover:not([disabled]), input[type=password]:hover:not([disabled]), input[type=search]:hover:not([disabled]), input[type=tel]:hover:not([disabled]), input[type=text]:hover:not([disabled]), input[type=time]:hover:not([disabled]), input[type=url]:hover:not([disabled]), input[type=week]:hover:not([disabled]) { border-color: var(--accent-foreground); } label { /* Input labels */ font-weight: 600 } label.block { display: block; } label.inline-block { display: inline-block; } label.inline-flex { display: inline-flex; } label.inline-grid { display: inline-grid; } fieldset { border-radius: 5px; border-style: solid; border-width: 2px; border-color: var(--accent-midground); } input.block { display: block; } input.inline-block { display: inline-block; } input.inline-flex { display: inline-flex; } input.inline-grid { display: inline-grid; } /*# sourceMappingURL=mine.css.map */