hacker.tours-website/themes/zen/assets/sass/base/grouping/_grouping.scss
2024-06-13 22:14:05 +02:00

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);
}