/* readable.css 1.0.0 */ /* 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-theme="dark"] { --background-color: #222830; --color: #fff; } @media (prefers-color-scheme: dark) { html { --background-color: #222830; --color: #fff; } } /* 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) > img: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, ul, ol, :is(body, article, main) > img:not(.exclude), table, article > aside, article > aside { margin: var(--one-line) 0; } /* div.ghost { width:100%; display: flex; justify-content: center; } */ /* 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 */ body > nav:first-of-type:not(.exclude) { /* 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); padding: calc((var(--line-height) * 0.5rem) - var(--line-width)); /* Put half a line's height on both top and bottom, then remove the width of the border */ display: flex; flex-flow: row wrap; } body > nav:first-of-type:not(.exclude) > * { flex-grow: 1; margin: 0 var(--half-line); text-transform: uppercase; } @media (prefers-reduced-motion: no-preference) { body > nav:first-of-type:not(.exclude) a { text-decoration: none; display: inline-block; } body > nav:first-of-type:not(.exclude) a::after { content: ''; width: 0; height: var(--line-width); display: block; background: var(--color); transition: 150ms; } body > nav:first-of-type:not(.exclude) 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) { box-sizing: border-box; padding: var(--half-line); background: transparent; border: var(--line-width) solid; color: inherit; font: inherit; width: 100%; } form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) ~ label) { font-weight: bold; }