From 57ea9a701c8585baa41b85e8f0d974fb321e91a7 Mon Sep 17 00:00:00 2001
From: Thorn Avery <s@p7.co.nz>
Date: Mon, 29 Mar 2021 14:39:22 +1300
Subject: [PATCH] initial commit

---
 box.css      | 23 +++++++++++++++++++++++
 center.css   | 12 ++++++++++++
 cluster.css  | 19 +++++++++++++++++++
 cover.css    | 25 +++++++++++++++++++++++++
 frame.css    | 29 +++++++++++++++++++++++++++++
 global.css   | 23 +++++++++++++++++++++++
 grid.css     | 15 +++++++++++++++
 icon.css     | 20 ++++++++++++++++++++
 imposter.css | 18 ++++++++++++++++++
 reel.js      | 24 ++++++++++++++++++++++++
 sidebar.css  | 25 +++++++++++++++++++++++++
 stack.css    | 19 +++++++++++++++++++
 style.css    |  7 +++++++
 switcher.css | 21 +++++++++++++++++++++
 utility.css  | 20 ++++++++++++++++++++
 vars.css     | 25 +++++++++++++++++++++++++
 16 files changed, 325 insertions(+)
 create mode 100644 box.css
 create mode 100644 center.css
 create mode 100644 cluster.css
 create mode 100644 cover.css
 create mode 100644 frame.css
 create mode 100644 global.css
 create mode 100644 grid.css
 create mode 100644 icon.css
 create mode 100644 imposter.css
 create mode 100644 reel.js
 create mode 100644 sidebar.css
 create mode 100644 stack.css
 create mode 100644 style.css
 create mode 100644 switcher.css
 create mode 100644 utility.css
 create mode 100644 vars.css

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