trwnh.com/hugo/assets/styles/common/content.scss
2024-01-16 07:29:54 -06:00

187 lines
3.5 KiB
SCSS

.e-content {
/* text */
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-bottom: 1rem;
margin-top: 2rem;
font-weight: 700;
}
p {
line-height: 1.6;
margin-bottom: 1em;
max-width: 80ch;
}
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);
top: -1em;
}
sub {
position: relative;
font-size: var(--script-size);
}
@supports #{'selector\(:has(kbd))'} {
/* style individual keys only (for the innermost <kbd> 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-left: var(--pad-x-highlight);
padding-right: var(--pad-x-highlight);
}
abbr[title]:after {
content: '?';
font-size: var(--script-size);
color: var(--ui-text-muted);
}
/* lists */
ul {list-style: disc; margin: 1em 0;}
li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;}
ol {list-style: decimal; margin: 1em 0;}
dl {margin: 1em 0; line-height: 1.4;}
dt {font-weight: 700;}
dd {margin-left: 1em;}
/* block elements */
img {
width: 100%;
margin-bottom: 1em;
}
blockquote {
font-style: italic;
font-size: 1em;
margin: 1em 0;
border-left: 0.25rem solid var(--ui-text-bold);
padding-left: 0.75em;
line-height: 1.4;
}
pre {
font-family: monospace;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
padding: 1em;
line-height: 2;
overflow-x: auto;
white-space: pre;
display: grid;
tab-size: 3;
margin-bottom: 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;
}
pre code > span {
padding: 0 1em;
}
.highlight pre {
padding: 1em 0;
}
/* figures */
figure {
margin-bottom: 1em;
}
figure img {
width: 100%;
margin-bottom: -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;
}
/* 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-left: 1rem;
border-bottom: 1px solid var(--ui-text-muted);
}
}
}
}