Initial version

themes/zen/assets/sass/base/_base.scss

@@ -0,0 +1,10 @@
+// Base styles.
+
+// Broken into modular pieces to make it easier to edit.
+@import 'document/document';
+@import 'forms/forms';
+@import 'grouping/grouping';
+@import 'headings/headings';
+@import 'images/images';
+@import 'links/links';
+@import 'tables/tables';

themes/zen/assets/sass/base/document/_document.scss

@@ -0,0 +1,18 @@
+// Document
+
+html {
+  // Change the default font family in all browsers.
+  font-family: var(--ff-body);
+  // Set base font size in percent.
+  font-size: calc(#{$base-font-size} / 16 * 100%);
+  // Correct the line height in all browsers.
+  line-height: $base-line-height;
+  // Set text colour.
+  color: var(--color-text);
+}
+
+body {
+  // Output a horizontal grid to help with debugging typography. The
+  // $debug variable will toggle its output.
+  @include debug-grid();
+}

themes/zen/assets/sass/base/forms/_forms.scss

@@ -0,0 +1,66 @@
+// stylelint-disable property-no-vendor-prefix
+
+// Form defaults.
+
+form {
+  // Add vertical rhythm margins.
+  @include margin-block(0 1);
+}
+
+input,
+textarea,
+select {
+  @include margin-block(0 1);
+}
+
+// Mark field as required if needed.
+label {
+  &:has(+ :required) {
+    &::after {
+      content: '*';
+      color: var(--color-mark-highlight);
+    }
+  }
+}
+
+// Set max text line width in main for readability.
+input,
+label,
+textarea,
+select {
+  max-width: var(--max-line-width);
+}
+
+fieldset {
+  border: 1px solid var(--color-border);
+}
+
+input {
+  // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+  // stylelint-disable-next-line function-name-case
+  width: Min(20em, 100%);
+}
+
+[type='text'],
+textarea {
+  // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+  // stylelint-disable-next-line function-name-case
+  width: Min(30em, 100%);
+}
+
+// For forms with multibple fields show submit button below the form.
+input:not(:only-of-type),
+textarea {
+  & + [type='submit'] {
+    display: block;
+  }
+}
+
+// For forms none mobile with single field add space between it and the submit button.
+@include respond-to(s) {
+  input:only-of-type {
+    &:has(+ [type='submit']) {
+      margin-right: .5rem;
+    }
+  }
+}

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

themes/zen/assets/sass/base/headings/_headings.scss

@@ -0,0 +1,69 @@
+// Headings
+//
+// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
+// classes are also available, for when you want to match the font styling of a
+// heading but not be a heading.
+h1,
+%h1,
+h2,
+%h2,
+h3,
+%h3,
+h4,
+%h4,
+h5,
+%h5,
+h6,
+%h6 {
+  @include margin-block(1 .33, 'em');
+  color: var(--color-headings);
+  font-family: var(--ff-headings);
+  font-weight: var(--fw-headings);
+  line-height: var(--heading-line-height);
+  text-wrap: balance;
+
+  // Smaller margin when a headeing is right after another heading.
+  & + & {
+    @include margin-block-start(.5, 'em');
+  }
+
+  // Set max text line width in main for readability.
+  .main & {
+    max-width: var(--max-line-width);
+  }
+}
+
+h1,
+%h1 {
+  // h1 only on top of page so different margins.
+  @include margin-block(1 .5, 'rem');
+  font-size: var(--fs-xxl);
+  letter-spacing: -.01em;
+}
+
+h2,
+%h2 {
+  font-size: var(--fs-xl);
+  letter-spacing: -.01em;
+}
+
+h3,
+%h3 {
+  font-size: var(--fs-l);
+  letter-spacing: -.01em;
+}
+
+h4,
+%h4 {
+  font-size: var(--fs-m);
+}
+
+h5,
+%h5 {
+  font-size: var(--fs-s);
+}
+
+h6,
+%h6 {
+  font-size: var(--fs-xs);
+}

themes/zen/assets/sass/base/images/_images.scss

@@ -0,0 +1,82 @@
+// Figure and image.
+
+figure,
+img {
+  &.image {
+    --image-padding: .75rem;
+
+    @include respond-to(s) {
+      &.center {
+        margin-inline: auto;
+      }
+
+      &.left {
+        padding-inline-end: var(--image-padding);
+        padding-block-end: var(--image-padding);
+        margin: 0;
+        float: left;
+        clear: both;
+      }
+
+      &.right {
+        padding-inline-start: var(--image-padding);
+        padding-block-end: var(--image-padding);
+        margin: 0;
+        float: right;
+        clear: both;
+      }
+    }
+  }
+}
+
+figure {
+  // Add vertical rhythm margins.
+  @include margin-block(0 1);
+
+  &.image {
+    figcaption {
+      padding-block-start: var(--image-padding);
+
+      @include respond-to(s) {
+        display: table-caption;
+        caption-side: bottom;
+        padding-block-start: 0;
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+
+    @include respond-to(s) {
+      display: table;
+
+      &.left {
+        figcaption {
+          padding-inline-end: var(--image-padding);
+          padding-block-end: var(--image-padding);
+        }
+      }
+
+      &.right {
+        figcaption {
+          padding-inline-start: var(--image-padding);
+          padding-block-end: var(--image-padding);
+        }
+      }
+    }
+  }
+
+  &.podcast {
+    audio {
+      width: 95%;
+    }
+  }
+}
+
+img {
+  &.image {
+    // Add vertical rhythm margins.
+    @include margin-block(0 1);
+  }
+}

themes/zen/assets/sass/base/links/_links.scss

@@ -0,0 +1,72 @@
+// Links
+//
+// Hyperlinks are used to allow the user to navigate to other resources or to
+// download a resource.
+//
+// The order of link states are based on Eric Meyer's article:
+// http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
+//
+// :visited - A link that has already been visited.
+// :hover   - A link that is being hovered over.
+// :focus   - A link that has been given keyboard focus.
+// :active  - A link that is being actively clicked.
+
+a,
+%link {
+  color: var(--color-link);
+}
+
+// Any element can receive focus, but only links can be visited, so we can
+// safely lower this selector's specificity. This also ensures visited links
+// with additional styles won't have their styles overridden.
+:visited {
+  color: var(--color-link-visited);
+}
+
+a:hover,
+a:focus {
+  color: var(--color-link-hover);
+}
+
+a:active {
+  color: var(--color-link-active);
+}
+
+// Remove underline from links to current page to
+// indicate that there is no need to click on it.
+[aria-current] {
+  text-decoration: none;
+}
+
+.link-nav,
+%link-nav {
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}
+
+// Inverted links, for dark backgrounds.
+.link-inverted,
+%link-inverted {
+  a {
+    color: var(--color-link-inverted);
+
+    &:visited {
+      color: var(--color-link-visited-inverted);
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--color-link-hover-inverted);
+    }
+
+    &:active {
+      color: var(--color-link-active-inverted);
+    }
+  }
+}

themes/zen/assets/sass/base/tables/_tables.scss

@@ -0,0 +1,31 @@
+// Tables
+//
+// The `<table>` element displays tabular data in rows, columns, and cells.
+
+table {
+  // Add vertical rhythm margins.
+  @include margin-block(0 1);
+  // Remove default spacing between table cells.
+  border-collapse: collapse;
+  // Prevent cramped-looking tables
+  width: 100%;
+}
+
+td,
+th {
+  // Remove most spacing between table cells.
+  padding: 0;
+  // Align content to top of cells.
+  vertical-align: text-top;
+}
+
+th {
+  // Align content to bottom of headers.
+  vertical-align: bottom;
+}
+
+caption,
+th {
+  // Align all text the same.
+  text-align: start;
+}