.content { /* text */ p, li {max-inline-size: 80ch;} h1 {font-size: 1.8em} h2 {font-size: 1.6em} h3 {font-size: 1.423em} h4 {font-size: 1.265em} h5 {font-size: 1.125em} h6 {font-size: 1em} h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin-block-start: 2rem; margin-block-end: 1rem; font-weight: 700; } p { line-height: 2; margin-block-end: 1em; } a { word-wrap: break-word; } /* semantics */ em {font-style: italic} strong {font-weight: 700} /* text formatting */ --script-size: 0.65em; sup { position: relative; font-size: var(--script-size); inset-block-start: -1em; } sub { position: relative; font-size: var(--script-size); } @supports #{'selector\(:has(kbd))'} { /* style individual keys only (for the innermost element) */ kbd kbd, kbd:not(:has(kbd)) { font-family: monospace; padding: 0.25em; background: var(--ui-overlay); color: var(--ui-overlay-text); } } @supports not #{'selector\(:has(kbd))'} { /* style the entire key sequence */ kbd { font-family: monospace; padding: 0.25em; background: var(--ui-overlay); color: var(--ui-overlay-text); } /* and prevent double-styling for nested keys */ kbd kbd { background: none; } } mark { background: var(--primary-accent-transparent); color: var(--ui-text); --pad-x-highlight: 0.125em; padding-inline-start: var(--pad-x-highlight); padding-inline-end: var(--pad-x-highlight); } abbr[title]:after { content: '?'; font-size: var(--script-size); color: var(--ui-text-muted); } /* lists */ ul, ol { padding-inline-start: 0; margin-block: 1em; position: relative; } ul {list-style: disc;} ol {list-style: decimal;} li {margin-block-end: 1em; line-height: 1.4; margin-inline-start: 1em;} dl {margin-block: 1em; line-height: 1.4;} dt {font-weight: 700;} dd {margin-inline-start: 1em;} /* block elements */ img { width: 100%; margin-block-end: 1em; } blockquote { font-style: italic; font-size: 1em; margin: 1em 0; border-inline-start: 0.25rem solid var(--ui-text-bold); padding-inline-start: 0.75em; line-height: 1.4; } pre { font-family: monospace; background: var(--ui-overlay); color: var(--ui-overlay-text); padding: 1em; line-height: 1.4; overflow-inline: auto; white-space: pre; display: grid; tab-size: 3; margin-block-end: 1em; } code { font-family: monospace; background: var(--ui-overlay); color: var(--ui-overlay-text); padding: 0.25rem; } :not(.highlight) > pre { line-height: 1.5; background: var(--ui-overlay); padding: 1em; } pre code { background: inherit; padding: 0; } .highlight pre { padding-block: 1em; } /* figures */ figure { margin-block-end: 1em; } figure img { width: 100%; margin-block-end: -0.125em; } figcaption { background: #212121; color: white; font-style: italic; padding: 1em; font-size: 0.8em; line-height: 1.2; } /* tables */ table {text-align: center;} thead { font-weight: 700; background: var(--ui-overlay); color: var(--ui-overlay-text); } th, td { border: 1px solid var(--ui-text); padding: 0.5em; } /* {{}} shortcode */ .hint, .callout { padding: 1em; line-height: 2; &.info, &.tip { background: rgba(142, 226, 142, 0.2); border-inline-start: 4px solid rgb(142, 226, 142); } &.warning { background: rgba(218, 226, 142, 0.2); border-inline-start: 4px solid rgb(218, 226, 142); } &.danger { background: rgba(226, 142, 142, 0.2); border-inline-start: 4px solid rgb(226, 142, 142); } } /* hugo-specific citation footnote */ cite sup { position: inherit; font-size: inherit; a { padding: 0.25em; } &:before { content: ' ['; } &:after { content: ']'; } } /* the actual footnotes section */ .footnotes { hr { display: flex; align-items: center; border: 0; &:before { content: 'Footnotes'; color: var(--ui-text); text-transform: uppercase; font-weight: 900; font-size: 0.8em; } &:after { content: ''; width: 100%; margin-inline-start: 1rem; border-block-end: 1px solid var(--ui-text-muted); } } } }