hugo-theme-readable/static/css/readable.css

256 lines
5.1 KiB
CSS
Raw Normal View History

2023-02-16 13:51:44 -06:00
/* readable.css 1.0.1-beta */
2023-01-30 13:14:33 -06:00
2023-02-16 13:51:44 -06:00
/* 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;
}
2023-01-30 13:14:33 -06:00
2023-02-16 13:51:44 -06:00
/* 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;
2023-01-30 13:14:33 -06:00
}
2023-02-16 13:51:44 -06:00
html[data-theme="dark"] {
--background-color: #222830;
--color: #fff;
}
html[data-theme="dark"][data-high-contrast="on"] {
--background-color: #000;
}
@media (prefers-color-scheme: dark) {
html {
2023-01-30 13:14:33 -06:00
--background-color: #222830;
--color: #fff;
}
2023-02-16 13:51:44 -06:00
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, ul, ol, :is(body, article, main) > :is(img, video):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 */
:is(body, header) > 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;
}
:is(body, header) > nav:first-of-type:not(.exclude) > * {
flex-grow: 1;
margin: 0 var(--half-line);
text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
:is(body, header) > nav:first-of-type:not(.exclude) a {
text-decoration: none;
display: inline-block;
2023-01-30 13:14:33 -06:00
}
2023-02-16 13:51:44 -06:00
:is(body, header) > nav:first-of-type:not(.exclude) a::after {
content: '';
width: 0;
height: var(--line-width);
2023-01-30 13:14:33 -06:00
display: block;
2023-02-16 13:51:44 -06:00
background: var(--color);
transition: 150ms;
2023-01-30 13:14:33 -06:00
}
2023-02-16 13:51:44 -06:00
:is(body, header) > nav:first-of-type:not(.exclude) a:is(:hover, :focus)::after {
2023-01-30 13:14:33 -06:00
width: 100%;
}
2023-02-16 13:51:44 -06:00
}
/* Column */
body {
margin: 0 auto;
width: min(95%, var(--column-width));
}
/* Justification (default off; use data-justify="on" on <html> 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;
}