initial commit

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

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

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

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

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

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

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

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

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

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

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

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

style.css

@@ -0,0 +1,7 @@
+h3 {
+  font-size: var(--font-size-biggish);
+}
+
+h2 {
+  font-size: var(--font-size-big);
+}

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%
+}

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

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