hackertours-theme/assets/sass/base/grouping/_grouping.scss
2023-03-15 15:06:45 +01:00

95 lines
1.6 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(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(1);
// Set max text line width in main for readability.
.main & {
max-width: var(--max-line-width);
}
}
dd {
margin: 0 0 0 var(--indent-amount);
@include rtl {
margin: 0 var(--indent-amount) 0 0;
}
}
ol,
ul,
menu {
padding: 0 0 0 var(--indent-amount);
@include rtl {
padding: 0 var(--indent-amount) 0 0;
}
// Turn off margins on nested lists.
ol,
ul,
menu {
margin: 0;
}
}
// Figures
figure {
// Add vertical rhythm margins.
@include margin-block(1);
// Remove defult inline margins.
@include margin-inline(0);
}
// Horizontal rule
hr {
@extend %divider;
height: 0;
}
// Paragraphs
p {
// Add vertical rhythm margins.
@include margin-block(.75);
// 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(.75);
font-family: var(--ff-monospace);
}