100 lines
1.7 KiB
SCSS
100 lines
1.7 KiB
SCSS
// Grouping content
|
|
|
|
// Block quotes
|
|
//
|
|
// The `<blockquote>` element is for quoting blocks of content from another
|
|
// source within your document. Wrap the `<blockquote>` around any <abbr
|
|
// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
|
|
// quotes, we recommend a `<p>`.
|
|
//
|
|
// Optionally, add a `<footer>` to identify the source of the quote, wrapping
|
|
// the name of the source work in `<cite>`.
|
|
|
|
blockquote {
|
|
// Add vertical rhythm margins.
|
|
@include margin-block(0 1);
|
|
// Also indent the quote on both sides.
|
|
margin-inline: var(--indent-amount);
|
|
}
|
|
|
|
// Lists
|
|
|
|
dl,
|
|
ol,
|
|
ul,
|
|
menu {
|
|
// Add vertical rhythm margins.
|
|
@include margin-block(0 1);
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
margin-inline-start: var(--indent-amount);
|
|
}
|
|
|
|
ol,
|
|
ul,
|
|
menu {
|
|
padding: 0;
|
|
padding-inline-start: var(--indent-amount);
|
|
|
|
// Turn off margins on nested lists.
|
|
ol,
|
|
ul,
|
|
menu {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
li {
|
|
// Set max text line width in main for readability.
|
|
.main & {
|
|
max-width: var(--max-line-width);
|
|
}
|
|
}
|
|
|
|
// Header
|
|
|
|
header {
|
|
// Add vertical rhythm margins.
|
|
@include margin-block(0 .33);
|
|
}
|
|
|
|
// Horizontal rule
|
|
|
|
hr {
|
|
@extend %divider;
|
|
height: 0;
|
|
}
|
|
|
|
// Paragraphs
|
|
|
|
p {
|
|
// Add vertical rhythm margins.
|
|
@include margin-block(0 1);
|
|
// Nicer text wrap, e.g. no lone work on last line.
|
|
text-wrap: pretty;
|
|
|
|
// Set max text line width in main for readability.
|
|
.main & {
|
|
max-width: var(--max-line-width);
|
|
}
|
|
}
|
|
|
|
// Preformatted text
|
|
|
|
pre {
|
|
// Add vertical rhythm margins.
|
|
@include margin-block(0 1);
|
|
font-family: var(--ff-monospace);
|
|
}
|
|
|
|
// Code
|
|
|
|
// Do not set colour for code with syntax highlighting.
|
|
code:not([data-lang]),
|
|
kbd,
|
|
samp {
|
|
color: var(--color-code);
|
|
}
|