@@ -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); | |||||
} |
@@ -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); | |||||
} |
@@ -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); | |||||
} |
@@ -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; | |||||
} |
@@ -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; | |||||
} |
@@ -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; | |||||
} |
@@ -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)); | |||||
} | |||||
} |
@@ -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); | |||||
} | |||||
@@ -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)); | |||||
} | |||||
@@ -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}); | |||||
} | |||||
} | |||||
})(); | |||||
@@ -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)); | |||||
} |
@@ -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); | |||||
} |
@@ -0,0 +1,7 @@ | |||||
h3 { | |||||
font-size: var(--font-size-biggish); | |||||
} | |||||
h2 { | |||||
font-size: var(--font-size-big); | |||||
} |
@@ -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% | |||||
} |
@@ -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); | |||||
} | |||||
@@ -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); | |||||
} |