Add style components for zebra-tables and responsive-tables.

assets/js/tables.js

@@ -0,0 +1,28 @@
+/**
+ * @file
+ * A JavaScript file for responsive tables.
+ */
+
+(function () {
+
+  'use strict';
+
+  const tables = document.querySelectorAll('.responsive-table');
+
+  tables.forEach(function (table) {
+    const headers = table.querySelectorAll('th');
+    const rows = table.querySelectorAll('tr:has(td)');
+
+    rows.forEach(function (row) {
+      const cells = row.querySelectorAll('td');
+      cells.forEach(function (cell, i) {
+        cell.setAttribute('role','cell');
+        if (headers[i].innerText) {
+          cell.setAttribute('aria-label', headers[i].innerText);
+        }
+      });
+    });
+  });
+
+
+})();

assets/sass/base/tables/_tables.scss

@@ -5,9 +5,8 @@
 table {
   // Add vertical rhythm margins.
   @include margin-block(1);
-  // Remove most spacing between table cells.
+  // Remove default spacing between table cells.
   border-collapse: collapse;
-  border-spacing: 0;
   // Prevent cramped-looking tables
   width: 100%;
 }
@@ -16,4 +15,17 @@ 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;
 }

assets/sass/components/tables/_tables.scss

@@ -0,0 +1,50 @@
+.zebra-table,
+%zebra-table {
+  --padding: .5rem;
+
+  th,
+  td {
+    padding: var(--padding);
+  }
+
+  tr:nth-child(odd) {
+    background-color: var(--color-row-odd);
+  }
+
+  tr:nth-child(even) {
+    background-color: var(--color-row-even);
+  }
+
+  // Add first-of-type to increase specificity.
+  tr:first-of-type:has(th) {
+    background-color: var(--color-row-header);
+  }
+}
+
+.responsive-table,
+%responsive-table {
+  --padding: .5rem;
+
+  @include respond-to-max(s) {
+    th,
+    td {
+      padding: var(--padding);
+    }
+
+    th {
+      display: none;
+    }
+
+    td {
+      display: grid;
+      gap: var(--padding);
+      grid-template-columns: 12ch auto;
+
+      &::before {
+        content: attr(aria-label) ':';
+        font-weight: var(--fw-bold);
+      }
+    }
+  }
+
+}

assets/sass/mixins/breakpoint/_respond-to.scss

@@ -11,3 +11,17 @@
     }
   }
 }
+
+@mixin respond-to-max($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (max-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @media (max-width: $breakpoint) {
+      @content;
+    }
+  }
+}

assets/sass/styles.scss

@@ -55,6 +55,7 @@
 @import 'components/responsive-video/responsive-video';
 @import 'components/spacing/spacing';
 @import 'components/stretch/stretch';
+@import 'components/tables/tables';
 @import 'components/tags/tags';
 @import 'components/visually-hidden/visually-hidden';
 

layouts/partials/scripts.html

@@ -33,6 +33,11 @@
 <script defer src="{{ $listsort.RelPermalink }}"></script>
 {{ end -}}
 
+{{ if $.Param "tables" -}}
+{{ $tables := resources.Get "js/tables.js" | minify | fingerprint -}}
+<script defer src="{{ $tables.RelPermalink }}"></script>
+{{ end -}}
+
 {{ if .HasShortcode "contact" -}}
 {{ $contact := resources.Get "js/contact.js" | minify | fingerprint -}}
 <script defer src="{{ $contact.RelPermalink }}"></script>