142 lines
2.8 KiB
SCSS
142 lines
2.8 KiB
SCSS
|
// Dependencies.
|
||
|
|
@import 'components/divider/divider';
|
||
|
|
|
||
|
|
// 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 {
|
||
|
|
// Set 1 unit of vertical rhythm on the top and bottom margin.
|
||
|
|
// Also indent the quote on both sides.
|
||
|
|
@include margin(1 $indent-amount);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Lists
|
||
|
|
//
|
||
|
|
// Style guide: base.grouping.lists
|
||
|
|
|
||
|
|
// Unordered list
|
||
|
|
//
|
||
|
|
// The `<ul>` element is a list of items in which the order does <em>not</em>
|
||
|
|
// explicitly matter.
|
||
|
|
|
||
|
|
// Ordered list
|
||
|
|
//
|
||
|
|
// The `<ol>` element is a list of items in which the order <em>does</em>
|
||
|
|
// explicitly matter.
|
||
|
|
|
||
|
|
// Description list
|
||
|
|
//
|
||
|
|
// The `<dl>` element is a list of terms with their associated descriptions.
|
||
|
|
|
||
|
|
dl,
|
||
|
|
ol,
|
||
|
|
ul {
|
||
|
|
// Add vertical rhythm margins.
|
||
|
|
@include margin(1 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
dt {
|
||
|
|
// Add your styles.
|
||
|
|
}
|
||
|
|
|
||
|
|
dd {
|
||
|
|
margin: 0 0 0 $indent-amount;
|
||
|
|
|
||
|
|
@include rtl {
|
||
|
|
margin: 0 $indent-amount 0 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ol,
|
||
|
|
ul {
|
||
|
|
padding: 0 0 0 $indent-amount;
|
||
|
|
|
||
|
|
@include rtl {
|
||
|
|
padding: 0 $indent-amount 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Turn off margins on nested lists.
|
||
|
|
ol,
|
||
|
|
ul {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Figures
|
||
|
|
//
|
||
|
|
// The `<figure>` element can be used to annotate illustrations, diagrams,
|
||
|
|
// photos, code listings, etc.
|
||
|
|
//
|
||
|
|
// Optionally, a `<figcaption>` element inside the `<figure>` represents the
|
||
|
|
// caption of the figure.
|
||
|
|
|
||
|
|
figure {
|
||
|
|
// Add vertical rhythm margins.
|
||
|
|
@include margin(1 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
figcaption {
|
||
|
|
// Add your styles.
|
||
|
|
}
|
||
|
|
|
||
|
|
// Horizontal rule
|
||
|
|
//
|
||
|
|
// The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
|
||
|
|
// change in a story, or a transition to another topic within a section of a
|
||
|
|
// reference book.
|
||
|
|
|
||
|
|
hr {
|
||
|
|
@extend %divider;
|
||
|
|
// Add the correct box sizing in Firefox.
|
||
|
|
box-sizing: content-box;
|
||
|
|
height: 0;
|
||
|
|
// Show the overflow in Edge and IE.
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Main
|
||
|
|
//
|
||
|
|
// The `<main>` element represents the main content of the page.
|
||
|
|
|
||
|
|
main {
|
||
|
|
// Add your styles.
|
||
|
|
}
|
||
|
|
|
||
|
|
// Body copy
|
||
|
|
//
|
||
|
|
// The default `font-size` and `line-height` properties are applied to the
|
||
|
|
// `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
|
||
|
|
// a top and bottom margin.
|
||
|
|
|
||
|
|
p,
|
||
|
|
pre {
|
||
|
|
@include margin(.75 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Preformatted text
|
||
|
|
//
|
||
|
|
// The `<pre>` element represents a block of preformatted text, such as
|
||
|
|
// fragments of computer code, ASCII art, etc.
|
||
|
|
|
||
|
|
%monospace {
|
||
|
|
// Correct the inheritance and scaling of font size in all browsers.
|
||
|
|
// The font-family value ends with ", serif".
|
||
|
|
@include typeface(monospace);
|
||
|
|
// Correct the odd `em` font sizing in all browsers.
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
@extend %monospace;
|
||
|
|
}
|