- Hello world -
-This is my blog. I plan to talk about stuff where stuff is cool google
- - - diff --git a/readable.css b/readable.css deleted file mode 100644 index e1fbee1..0000000 --- a/readable.css +++ /dev/null @@ -1,286 +0,0 @@ -/* readable.css 1.1.0, licensed 0BSD */ - -/* Font family support */ -html, html[data-font-family="serif"] { - --font-family: serif; -} -html[data-font-family="sans-serif"] { - --font-family: sans-serif; -} -html[data-font-family="monospace"] { - --font-family: monospace; -} - -/* Color scheme support */ -html, html[data-theme="light"] { - --background-color: snow; - --color: #000; -} -html[data-high-contrast="on"], html[data-theme="light"][data-high-contrast="on"] { - --background-color: #fff; -} - -html[data-theme="dark"] { - --background-color: #1f272d; - --color: #fff; -} -html[data-theme="dark"][data-high-contrast="on"] { - --background-color: #000; -} - -@media (prefers-color-scheme: dark) { - html { - --background-color: #222830; - --color: #fff; - } - html[data-high-contrast="on"] { - --background-color: #000; - } -} - -@media (prefers-contrast: more) { - :is(html, html[data-theme="light"]):not([data-high-contrast="off"]) { - --background-color: #fff; - } - - html[data-theme="dark"]:not([data-high-contrast="off"]) { - --background-color: #000; - } -} - -/* Generic styles */ -:root { - --column-width: 67ch; - --form-width: 50ch; - --line-width: 0.125rem; - --line-height: 1.5; - - --one-line: calc(var(--line-height) * 1rem); - --half-line: calc(var(--one-line) * 0.5); - - font-family: var(--font-family); - - background-color: var(--background-color); - color: var(--color); -} - -a { - color: inherit; -} - -a:active { - color: red; -} - -header, footer, h1, h2 { - text-align: center; -} - -footer:not(.exclude) { - border-top: var(--line-width) solid; -} - -summary { - cursor: pointer; -} - -blockquote:not(.exclude) { - padding-left: var(--one-line); - border-left: var(--line-width) solid; -} - -ul, ol { - padding-left: calc(var(--line-height) * 2rem); -} - -:is(body, article, main, figure) > :is(img, video):not(.exclude) { - max-width: 100%; -} - -figure:not(.exclude) { - text-align: center; -} - -figure:not(.exclude) > * + figcaption { - margin-top: 0; - font-style: italic; -} - -article aside:not(.exclude) { - border: var(--line-width) solid; - padding: 0 var(--one-line); - border-radius: var(--half-line); -} - -pre { - max-width: 100%; - overflow: auto; -} - -hr { - color: inherit; - border: 0; - border-top: var(--line-width) solid; -} - -/* Vertical Rhythm */ -p, ul, ol, figcaption, nav, td, th, label { - line-height: var(--line-height); -} - -h1, h2, h3, h4, h5, h6, p, blockquote, hr, footer, header, nav, figure, figcaption, :is(ul, ol):not(li > *), :is(body, article, main) > :is(img, video, details):not(.exclude), table, article > aside, article > aside { - margin: var(--one-line) 0; -} - -/* Headings */ - -header h1 { - font-weight: normal; -} - -h1, h2 { - line-height: calc(var(--line-height) * 2rem); -} - -h1 { - font-size: 2.5rem; -} - -h2 { - font-size: 1.75rem; -} - -h3, h4, h5, h6 { - line-height: var(--one-line); - padding-top: calc(var(--line-height) * 0.75rem); - margin-bottom: calc(var(--line-height) * 0.25rem); -} - -:is(h3, h4, h5, h6) + * { - margin-top: 0; -} - -/* Navbar */ -nav:not(.exclude:not([data-style]), [data-style="none"]) { /* This styling only affects the first nav element that is the direct child of the body */ - text-align: center; - border-width: var(--line-width) 0; - border-style: solid; - line-height: var(--line-height); - display: flex; - flex-flow: row wrap; -} - -nav:not(.exclude:not([data-style]), [data-style="none"]) > * { - flex-grow: 1; - margin: calc((var(--line-height) * 0.5rem) - var(--line-width)) var(--half-line); /* Put half a line's height on both top and bottom, then remove the width of the border */ - text-transform: uppercase; -} - -nav[data-style="blockout"], -nav:is([data-style="boxes"], [data-style="roundesque"]) a:is(:hover, :focus) { - background-color: var(--color); - color: var(--background-color); -} - -nav[data-style="blockout"] a { - text-decoration: none; -} - -nav[data-style="blockout"] a:is(:hover, :focus) { - background-color: var(--background-color); - color: var(--color); -} - -nav[data-style]:is([data-style="boxes"], [data-style="roundesque"]) { - border: 0; -} - -nav:is([data-style="boxes"], [data-style="roundesque"]) a { - text-decoration: none; - border: var(--line-width) solid; -} - -nav[data-style="roundesque"] a { - border-radius: calc(0.25 * var(--one-line)); -} - -@media (prefers-reduced-motion: no-preference) { - nav[data-style="classy"] span > a { - text-decoration: none; - display: inline-block; - } - - nav[data-style="classy"] span > a::after { - content: ''; - width: 0; - height: var(--line-width); - display: block; - background: var(--color); - transition: 150ms; - } - - nav[data-style="classy"] span > a:is(:hover, :focus)::after { - width: 100%; - } -} - -/* Column */ -body { - margin: 0 auto; - width: min(95%, var(--column-width)); -} - -/* Justification (default off; use data-justify="on" on to enable) */ -/* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */ -@media (min-width: 70.5ch) { - [data-justify="on"] body { - text-align: justify; - text-justify: inter-character; - } -} - -/* Tables */ -table:not(.exclude) { - display: block; - width: 100%; - overflow: auto; - border-collapse: collapse; -} - -table:not(.exclude) :is(td, th) { - padding: calc(var(--line-height) * 0.25rem); - border: var(--line-width) solid; -} - -table:not(.exclude) td { - word-wrap: break-word; -} - -/* Forms */ -form { - max-width: var(--form-width) -} - -form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"]) + label), input:not([type="checkbox"], [type="radio"]), textarea, select) { - display: block; - margin: var(--half-line) 0; -} - -form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select), button { - box-sizing: border-box; - padding: var(--half-line); - background: transparent; - border: var(--line-width) solid; - color: inherit; - font: inherit; - width: 100%; -} - -button { - width: initial; -} - -form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) + label) { - font-weight: bold; -} -