Initial version

themes/zen/assets/sass/base/grouping/_grouping.scss

@@ -0,0 +1,99 @@
+// 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);
+}