diff options
Diffstat (limited to 'links/main.css')
| -rw-r--r-- | links/main.css | 527 |
1 files changed, 0 insertions, 527 deletions
diff --git a/links/main.css b/links/main.css deleted file mode 100644 index 7467bf2..0000000 --- a/links/main.css +++ /dev/null @@ -1,527 +0,0 @@ -:root { - --black: #0f0f0f; - --white: WhiteSmoke; - --ac: MediumPurple; - - --fg: var(--black); - --bg: var(--white); - - --body-spacing: 45px; - --body-line-height: 1.3; - --body-inline-padding: 15px; - - --dashed: 1px dashed color-mix(in srgb, var(--bg) 80%, var(--fg)); -} - -::selection { - background: var(--ac); - opacity: 1.0; - color: var(--black); - padding: 10px; -} - -a { - color: var(--fg); - -} - -a:hover { - background: color-mix(in srgb, var(--ac) 40%, transparent); -} - -body { - background: var(--bg); - color: var(--fg); - overflow-x: hidden; - font-family: var(--ff, sans-serif); - padding: var(--body-spacing); - margin: 0; -} - -body>*+* { - margin-top: var(--body-spacing); -} - -header { - display: flex; - gap: var(--body-spacing); - align-items: center; -} - -header>* { - display: inline-block; -} - -header a { - text-decoration: none; -} - -header a img { - max-height: 55px; - vertical-align: bottom; -} - -nav section { - display: inline-block; - line-height: var(--body-line-height); - vertical-align: top; -} - -nav section+* { - margin-left: 1rem; -} - -nav ul { - margin: 0; - padding: 0; -} - -main { - clear: both; - max-width: 700px; - margin: 0 auto; -} - -main>* { - margin-bottom: 30px -} - -main blockquote { - margin-left: 0; - border-left: 1px dashed var(--fg); - padding-left: var(--body-inline-padding); -} - -main>h1 { - font-size: 1.5rem; -} - -main>h2 { - font-size: 1.3rem; -} - -main>h3 { - font-size: 1.2rem; -} - -main>h4 { - font-size: 1.1rem; -} - -main p { - line-height: var(--body-line-height); - margin-top: 0; -} - -figure { - margin: 0; - padding-bottom: var(--body-inline-padding); -} - -figure > img { - max-height: 30vh; -} - -figcaption { - text-align: end; - font-size: smaller; - padding: 2px -} - -main hr { - border-color: color-mix(in srgb, var(--fg) 20%, var(--bg)); - clear: both; -} - -main img { - max-width: 100%; - object-fit: contain; -} - -main>q { - max-width: 500px; - display: block; - margin-left: 30px; -} - -main pre { - background: color-mix(in srgb, var(--bg) 95%, var(--fg)); - border: var(--dashed); - padding: var(--body-inline-padding); - margin-bottom: 30px; - overflow-x: scroll; -} - -main code { - font-family: monospace; -} - -main p>code { - border: var(--dashed); - padding: 1px 4px; -} - -main code comment { - color: #777 -} - -main ol, -main ul { - margin-top: 0; - margin-bottom: 30px; - line-height: var(--body-line-height); -} - -/*main ol li+*,*/ -/*main ul li+* {*/ -/* margin-top: 1ex;*/ -/*}*/ - -main ol li>p, -main ul li>p { - margin: 0; -} - -main ol { - list-style-type: decimal-leading-zero; -} - -main ul { - list-style-type: square; -} - -/* task list */ - -main ul.task-list li { - list-style-type: none; - padding: 5px; -} - -main ul.task-list li+* { - margin-top: 1ex; -} - -main ul.task-list li:has(label:hover) { - padding: 4px; - background: color-mix(in srgb, var(--fg) 5%, transparent); - border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); -} - -main ul.task-list li:has(input:checked) { - padding: 4px; - background: color-mix(in srgb, var(--ac) 10%, transparent); - border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent); -} - -main ul.task-list input { - margin: 0 1em 0 -2em; -} - -/* table */ - -main table img { - max-width: 100%; - display: block; - margin: 20px 0; -} - -main table tr th { - text-align: start; - font-weight: bold -} - -main table tr>* { - padding: 5px var(--body-inline-padding); - vertical-align: top; -} - -/* date */ - -main span.date { - font-family: monospace; - display: inline-block; - width: 100%; - text-align: end; -} - -/* toc */ - -main nav.table-of-contents { - /*max-width: 30ch;*/ - - position: sticky; - top: 1rem; - - float: right; - margin-right: -22ch; -} - -main nav.table-of-contents>ol { - list-style: inside disclosure-closed; -} - -main nav.table-of-contents>ol>:first-child { - text-transform: none; - line-height: 2.0; -} - -/* footnotes */ - -main section#footnotes { - margin-bottom: 0; - font-size: smaller; -} - -main section#footnotes hr { - display: none; -} - -main .footnote-back { - margin-left: 1ch; -} - -/* footer */ - -footer { - font-size: 0.9rem; - border-top: 1px solid color-mix(in srgb, var(--fg) 20%, var(--bg)); - padding-top: var(--body-spacing); - line-height: var(--body-line-height); - clear: both; -} - -body>a[href="#top"]:last-child { - float: right; - margin-top: -2rem; -} - -details[open]>*:not(summary) { - margin: 1ex 0 0 0; -} - -/* modular */ - -.col2 { - columns: 2 -} - -.capital { - text-transform: capitalize -} - -.nocapital { - text-transform: unset !important; -} - -.notice { - padding: var(--body-inline-padding); - border: 1px solid var(--ac); - background-color: color-mix(in srgb, var(--ac) 10%, var(--bg)); - color: color-mix(in srgb, var(--fg) 90%, var(--bg)); -} - -.notice, -.notice>* { - font-size: 0.8rem; -} - -.notice h1 { - text-align: end; - font-size: 0.9rem; - text-transform: capitalize; -} - -ul.nobull li { - list-style-type: none -} - -.hidden { - display: none -} - -.fullpage { - /* - * NOTE: 7rem = the height of header + footer, then the spacing between - * header and content and footer and line and content - */ - --header-and-footer-max-height: calc(7rem + (var(--body-spacing) * 3)); - - width: calc(100vw - (var(--body-spacing) * 2)); - height: calc(100vh - (var(--body-spacing) * 2) - var(--header-and-footer-max-height)); -} - -/* puts child item into center */ -.centering { - display: grid; - place-items: center; -} - -/* positions self in center */ -.center { - display: block; - margin: 0 auto; -} - -.squish { - display: flex; - flex-flow: row wrap; -} - -@media (max-width: 768px) { - .squish { - width: 100%; - padding: 0; - } -} - -.squish>* { - max-width: 100%; - max-height: 100%; -} - -.size-s { - max-height: 150px; -} - -.size-m { - max-height: 220px; -} - -.size-l { - max-height: 400px; -} - -.float-l { - float: left; - padding-right: var(--body-inline-padding); -} - -.float-r { - float: right; - padding-left: var(--body-inline-padding); -} - -.cutout { - width: 100%; - max-height: 9rem; - object-fit: cover; - object-position: 0 50%; -} - -:is(div, p):has(>.i) { - display: flex; - flex-flow: row wrap; - grid-gap: var(--body-inline-padding); -} - -:is(div, p)>.i { - max-width: 100%; -} - -/* theme */ - -@media (prefers-color-scheme: dark) { - :root { - --fg: var(--white); - --bg: var(--black); - } - - .mono { - filter: invert(1) - } -} - -/* mobile */ - -@media (max-width: 768px) { - :root { - --body-spacing: 25px; - } - - main ul, - main ol { - padding: 0 var(--body-inline-padding); - } - - main ul a, - main ol a { - line-height: 1.8; - } - - main img { - max-width: 100%; - } - - main nav.table-of-contents { - float: unset; - margin-right: unset; - position: unset; - } - - main nav.table-of-contents>ol { - columns: 2; - list-style: outside disclosure-closed; - } - - main nav.table-of-contents>ol>:first-child { - display: none; - } -} - -@media (max-width: 320px) {} - -/* typography */ - -:root { - --vf-grad: 0; -} - -@media (prefers-color-scheme: dark) { - :root { - --vf-grad: -50; - } -} - -html { - font-variation-settings: "GRAD" var(--vf-grad, 0); -} - -main p { - text-decoration-skip-ink: auto; -} - -main { - margin-block-start: var(--body-spacing); -} - -main pre, -main code, -main var, -main samp, -main kbd, -main h1, -main h2, -main h3, -main h4, -main h5, -main h6 { - -webkit-hyphens: manual; - hyphens: manual; -} - -h1 { - font-variant-numeric: lining-nums; - font-variant-ligatures: discretionary-ligatures; -} - -td, -math, -time[datetime*=":"] { - font-variant-numeric: tabular-nums lining-nums slashed-zero; -} - -iframe { - border: 0; - margin: 0; - padding: 0; -} |