commit 57ea9a701c8585baa41b85e8f0d974fb321e91a7
Author: Thorn Avery <s@p7.co.nz>
Date:   Mon Mar 29 14:39:22 2021 +1300

    initial commit

diff --git a/box.css b/box.css
new file mode 100644
index 0000000..be26aed
--- /dev/null
+++ b/box.css
@@ -0,0 +1,23 @@
+/*=========*/
+/* The Box */
+/*=========*/
+
+.box {
+  padding: var(--s1);
+  border: var(--border-thin) solid;
+  outline: var(--border-thin) transparent;
+  outline-offset: calc(var(--border-thin) * -1);
+  --colour-light: #fff;
+  --colour-dark: #000;
+  color: var(--color-dark);
+  background-color: var(--color-light);
+}
+
+.box * {
+  color: inherit;
+}
+
+.box.invert {
+  color: var(--color-light);
+  background-color: var(--color-dark);
+}
diff --git a/center.css b/center.css
new file mode 100644
index 0000000..4ac5b2a
--- /dev/null
+++ b/center.css
@@ -0,0 +1,12 @@
+/*============*/
+/* The Center */
+/*============*/
+
+.center {
+  box-sizing: content-box;
+  max-width: var(--measure);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--s1);
+  padding-right: var(--s1);
+}
diff --git a/cluster.css b/cluster.css
new file mode 100644
index 0000000..0424218
--- /dev/null
+++ b/cluster.css
@@ -0,0 +1,19 @@
+/*=============*/
+/* The Cluster */
+/*=============*/
+
+.cluster {
+  --space: var(--s0);
+}
+
+.cluster > * {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin: calc(var(--space) / 2 * -1);
+}
+
+.cluster > * > * {
+  margin: calc(var(--space) / 2);
+}
diff --git a/cover.css b/cover.css
new file mode 100644
index 0000000..2ecae56
--- /dev/null
+++ b/cover.css
@@ -0,0 +1,25 @@
+/*===========*/
+/* The Cover */
+/*===========*/
+
+.cover {
+  --space: var(--s1);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding: var(--space);
+}
+
+.cover > * {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.cover > :first-child:not(h1) {
+  margin-top: 0;
+}
+
+.cover > h1 {
+  margin-top: auto;
+  margin-bottom: auto;
+}
diff --git a/frame.css b/frame.css
new file mode 100644
index 0000000..0c8ee36
--- /dev/null
+++ b/frame.css
@@ -0,0 +1,29 @@
+/*===========*/
+/* The Frame */
+/*===========*/
+
+.frame {
+  --n: 9;
+  --d: 16;
+  padding-bottom: calc(var(--n) / var(--d) * 100%);
+  position: relative;
+}
+
+.frame > * {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.frame > img,
+.frame > video {
+  width: 100%
+  height: 100%
+  object-fit: cover;
+}
diff --git a/global.css b/global.css
new file mode 100644
index 0000000..30f0e21
--- /dev/null
+++ b/global.css
@@ -0,0 +1,23 @@
+/*===================*/
+/* global CSS rules  */
+/*===================*/
+
+* {
+  box-sizing: border-box;
+}
+
+
+* {
+  max-width: var(--measure);
+}
+
+/* exceptions to the above rule */
+html,
+body,
+div,
+header,
+nav,
+main,
+footer {
+  max-width: none;
+}
diff --git a/grid.css b/grid.css
new file mode 100644
index 0000000..11e20de
--- /dev/null
+++ b/grid.css
@@ -0,0 +1,15 @@
+/*==========*/
+/* The Grid */
+/*==========*/
+
+.grid {
+  display: grid;
+  grid-gap: 1rem;
+  --minimum: 20ch;
+}
+
+@supports (width: min(var(--minumum), 100%)) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--minimum), 100%), 1fr));
+  }
+}
diff --git a/icon.css b/icon.css
new file mode 100644
index 0000000..a301cfa
--- /dev/null
+++ b/icon.css
@@ -0,0 +1,20 @@
+/*==========*/
+/* The Icon */
+/*==========*/
+
+.icon {
+  height: 0.75em;
+  height: 1cap;
+  width: 0.75em;
+  width: 1cap;
+}
+
+.with-icon {
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.with-icon .icon {
+  margin-inline-end: var(--space, 0.5em);
+}
+
diff --git a/imposter.css b/imposter.css
new file mode 100644
index 0000000..27a9970
--- /dev/null
+++ b/imposter.css
@@ -0,0 +1,18 @@
+/*==============*/
+/* The Imposter */
+/*==============*/
+
+.imposter {
+  position: var(--positioning, absolute);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.imposter.contain {
+  --margin: 0px;
+  overflow: auto;
+  max-width: calc(100% - (var(--margin) * 2));
+  max-height: calc(100% - (var(--margin) * 2));
+}
+
diff --git a/reel.js b/reel.js
new file mode 100644
index 0000000..245be75
--- /dev/null
+++ b/reel.js
@@ -0,0 +1,24 @@
+/*==========*/
+/* The Reel */
+/*==========*/
+
+(function() {
+  const className = 'reel';
+  const reels = Array.from(document.querySelectorAll(`.${className}`));
+  const toggleOverflowClass = elem => {
+    elem.classList.toggle('overflowing', elem.scrollWidth > elem.clientWidth);
+  };
+  for (let reel of reels) {
+    if ('ResizeObserver' in window) {
+      new ResizeObserver(entries => {
+        toggleOverflowClass(entries[0].target);
+      }).observe(reel);
+    }
+    if ('MutationObserver' in window) {
+      new MutationObserver(entries => {
+        toggleOverflowClass(entries[0].target);
+      }).observe(reel, {childList: true});
+    }
+  }
+})();
+
diff --git a/sidebar.css b/sidebar.css
new file mode 100644
index 0000000..0923b4b
--- /dev/null
+++ b/sidebar.css
@@ -0,0 +1,25 @@
+/*=============*/
+/* The Sidebar */
+/*=============*/
+
+.with-sidebar {
+  overflow: hidden;
+}
+
+.with-sidebar > * {
+  --space: var(--s1);
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(var(--space) / 2 * -1);
+}
+
+.with-sidebar > * > * {
+  margin: calc(var(--space) / 2);
+  flex-grow: 1;
+}
+
+.with-sidebar > * > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-width: calc(50% - var(--space));
+}
diff --git a/stack.css b/stack.css
new file mode 100644
index 0000000..ee08ce7
--- /dev/null
+++ b/stack.css
@@ -0,0 +1,19 @@
+/*===========*/
+/* The Stack */
+/*===========*/
+
+.stack {
+  --space: var(--s1);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.stack > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.stack > * + * {
+  margin-top: var(--space);
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..98413ea
--- /dev/null
+++ b/style.css
@@ -0,0 +1,7 @@
+h3 {
+  font-size: var(--font-size-biggish);
+}
+
+h2 {
+  font-size: var(--font-size-big);
+}
diff --git a/switcher.css b/switcher.css
new file mode 100644
index 0000000..bebef4f
--- /dev/null
+++ b/switcher.css
@@ -0,0 +1,21 @@
+/*==============*/
+/* The Switcher */
+/*==============*/
+
+.switcher > * {
+  --space: var(--s1);
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc((var(--space) / 2) * -1);
+}
+
+.switcher > * > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--measure) - (100% - var(--space))) * 999);
+  margin: calc(var(--space) / 2);
+}
+
+.switcher > * > :nth-last-child(n+5),
+.switcher > * > :nth-last-child(n+5) ~ * {
+  flex-basis: 100%
+}
diff --git a/utility.css b/utility.css
new file mode 100644
index 0000000..eb0e796
--- /dev/null
+++ b/utility.css
@@ -0,0 +1,20 @@
+.font-size\:base {
+  font-size: var(--font-size-base) !important;
+}
+
+.font-size\:biggish {
+  font-size: var(--font-size-biggish) !important;
+}
+
+.font-size\:big {
+  font-size: var(--font-size-big) !important;
+}
+
+.max-width\:measure {
+  max-width: var(--measure);
+}
+
+.max-width\:measure\/2 {
+  max-width: calc(var(--measure) / 2);
+}
+
diff --git a/vars.css b/vars.css
new file mode 100644
index 0000000..bd606f4
--- /dev/null
+++ b/vars.css
@@ -0,0 +1,25 @@
+/*==========*/
+/* The Vars */
+/*==========*/
+
+:root {
+  --space: 0.5em;
+  --positioning: absolute;
+  --border-thin: 0.5ch;
+  --measure: 60ch;
+  --ratio: 1.5;
+  --s-5: calc(var(--s-4) / var(--ratio));
+  --s-4: calc(var(--s-3) / var(--ratio));
+  --s-3: calc(var(--s-2) / var(--ratio));
+  --s-2: calc(var(--s-1) / var(--ratio));
+  --s-1: calc(var(--s0) / var(--ratio));
+  --s0: 1rem;
+  --s1: calc(var(--s0) * var(--ratio));
+  --s2: calc(var(--s1) * var(--ratio));
+  --s3: calc(var(--s2) * var(--ratio));
+  --s4: calc(var(--s3) * var(--ratio));
+  --s5: calc(var(--s4) * var(--ratio));
+  --font-size-base: var(--s0);
+  --font-size-biggish: var(--s1);
+  --font-size-big: var(--s2);
+}