Rewrite site with 11ty

src/css/Components/_base.scss

@@ -0,0 +1,71 @@
+@use '_variables';
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+html {
+	scroll-behavior: smooth;
+
+	@media (prefers-reduced-motion: reduce) {
+		scroll-behavior: auto;
+	}
+}
+
+body {
+	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
+		"Helvetica Neue", sans-serif;
+	line-height: 1.5;
+	color: var(--text-color);
+	background-color: var(--background-color);
+	accent-color: var(--primary-color);
+
+	@media (min-width: #{variables.$sidebar-breakpoint}) {
+		display: flex;
+		gap: 2rem;
+	}
+}
+
+header {
+	height: 100dvh;
+	flex: 0 0 var(--sidebar-width);
+}
+
+main {
+	width: 100%;
+	max-width: 70em;
+	padding: 2rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+a {
+	color: var(--primary-color);
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+	text-underline-offset: 0.25em;
+	text-decoration-color: transparent;
+	transition: text-decoration-color 200ms ease;
+
+	&:hover,
+	&:active {
+		text-decoration-color: var(--primary-color);
+	}
+
+	@media (prefers-contrast: more) {
+		color: var(--primary-color-dark);
+		text-decoration-color: var(--primary-color);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		text-decoration-color: var(--primary-color);
+	}
+}
+
+hr {
+	border: none;
+	height: 1px;
+	background-color: var(--primary-border-color);
+}

src/css/Components/_bootstrap-icons.scss

@@ -0,0 +1,5 @@
+// this allows changing the size using font-size
+.bi {
+	width: 1em;
+	height: 1em;
+}

src/css/Components/_card.scss

@@ -0,0 +1,46 @@
+@use '_variables';
+
+.card {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	border: solid 1px var(--primary-border-color);
+	border-radius: var(--main-border-radius);
+
+	h1, h2, h3, h4, h5, h6 {
+		margin-bottom: 0;
+	}
+
+	.card-links {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		margin: auto -1rem -1rem -1rem;
+		padding: 0.5rem;
+		border-top: solid 1px var(--primary-border-color);
+		list-style: none;
+
+		li a {
+			display: inline-block;
+			padding: 0.5em 1em;
+			text-decoration: none;
+			border-radius: var(--main-border-radius);
+			transition: background-color 200ms ease;
+
+			&:hover, &:focus {
+				background-color: var(--nav-hover-background);
+
+				@media (prefers-reduced-motion: reduce) {
+					background-color: transparent;
+				}
+			}
+
+			@media (prefers-contrast: more),
+				(prefers-reduced-motion: reduce) {
+				text-decoration: underline;
+			}
+		}
+	}
+}

src/css/Components/_code.scss

@@ -0,0 +1,19 @@
+@use 'variables';
+
+$code-background-color: darken(variables.$background-color, 5%);
+$code-background-color-dark: lighten(variables.$background-color-dark, 5%);
+
+:root {
+	--code-background: #{$code-background-color};
+
+	@media (prefers-color-scheme: dark) {
+		--code-background: #{$code-background-color-dark};
+	}
+}
+
+code {
+	background: var(--code-background);
+	padding: 0.125em 0.25em;
+	border: solid 1px var(--primary-border-color);
+	border-radius: calc(var(--main-border-radius) / 2);
+}

src/css/Components/_color-block.scss

@@ -0,0 +1,22 @@
+@use '_variables';
+
+.color-blocks {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 1rem;
+	margin-bottom: 1rem;
+}
+
+.color-block {
+	flex: 1 1 0;
+	height: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	border: solid 1px var(--primary-border-color);
+	border-radius: var(--main-border-radius);
+	padding: 0.5em;
+}

src/css/Components/_columns.scss

@@ -0,0 +1,61 @@
+@use '_variables';
+
+:root {
+	--column-spacing: 1.5em;
+}
+
+.row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--column-spacing);
+
+	.col {
+		flex: 0 0 100%;
+
+		// Default to md
+		@media (min-width: #{variables.$size-md}) {
+			flex: 1;
+		}
+	}
+}
+
+@mixin row($name, $breakpoint) {
+	.row-#{$name} {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: var(--column-spacing);
+
+		.col {
+			flex: 0 0 100%;
+
+			@media (min-width: #{$breakpoint}) {
+				flex: 1;
+			}
+		}
+	}
+
+	@for $i from 1 through 12 {
+		.row-#{$name}-#{$i} {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--column-spacing);
+
+			.col {
+				flex: 0 0 100%;
+
+				@media (min-width: #{$breakpoint}) {
+					// Even width filling the whole row accounting for gap
+					flex: 0 0 calc((100% / #{$i}) - (var(--column-spacing) / #{$i} * (#{$i} - 1)));
+				}
+			}
+		}
+	}
+}
+
+@include row("xs", #{variables.$size-xs});
+@include row("sm", #{variables.$size-sm});
+@include row("md", #{variables.$size-md});
+@include row("lg", #{variables.$size-lg});
+@include row("xl", #{variables.$size-xl});
+@include row("2x", #{variables.$size-2x});

src/css/Components/_headings.scss

@@ -0,0 +1,8 @@
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 500;
+	margin-top: 0;
+}
+
+h1 {
+	font-size: 3em;
+}

src/css/Components/_lists.scss

@@ -0,0 +1,18 @@
+ul {
+	padding-inline-start: 1.5rem;
+}
+
+li {
+	margin: 0.25em 0;
+}
+
+dl {
+	dt {
+		font-weight: bold;
+	}
+
+	dd {
+		padding: 0.25em 0;
+		margin-inline-start: 1em;
+	}
+}

src/css/Components/_mobile-header.scss

@@ -0,0 +1,43 @@
+@use 'variables';
+
+h1 {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+
+	font-size: 2rem;
+}
+
+.sidebar-toggle {
+	font-size: 2rem;
+
+	appearance: none;
+	cursor: pointer;
+	color: inherit;
+	background-color: var(--background-color);
+	border: solid 1px var(--primary-border-color);
+	border-radius: var(--main-border-radius);
+
+	display: flex;
+	align-items: center;
+	padding: 0.25em;
+	margin: 0.25em;
+
+	transition: background-color 200ms ease, color 200ms ease;
+
+	&:hover, &focus {
+		color: var(--primary-color);
+		background-color: var(--nav-hover-background);
+	}
+
+	&:active {
+		background-color: var(--primary-light-color);
+	}
+
+	@media (min-width: #{variables.$sidebar-breakpoint}) {
+		display: none;
+	}
+}
+
+

src/css/Components/_navbar.scss

@@ -0,0 +1,117 @@
+@use 'sass:color';
+@use '_variables';
+
+header {
+	position: fixed;
+	top: 0;
+	left: calc((var(--sidebar-width) + 2rem) * -1);
+	height: calc(100dvh - 2rem); // Account for margin
+	margin: 1rem;
+
+	border: solid 1px var(--primary-border-color);
+	border-radius: var(--main-border-radius);
+	background-color: rgba(var(--background-color-components), 0.5);
+	backdrop-filter: blur(10px);
+
+	// Goes slightly past the end, then bounces back to the final position
+	transition: left 250ms cubic-bezier(.44,1.36,.74,.97);
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
+	@media (prefers-contrast: more) {
+		backdrop-filter: none;
+		background-color: var(--background-color);
+	}
+
+	&[aria-hidden="false"] {
+		left: 0;
+	}
+
+	@media (min-width: #{variables.$sidebar-breakpoint}) {
+		// Always show the sidebar on larger screens
+		position: sticky;
+		left: unset;
+		height: 100dvh;
+		margin: 0;
+
+		border: none;
+		background-color: unset;
+		backdrop-filter: none;
+	}
+}
+
+nav.navbar {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	width: var(--sidebar-width);
+	height: 100%;
+	padding: 1rem;
+	overflow: scroll;
+
+	ul {
+		display: flex;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			margin-bottom: 0;
+		}
+
+		a {
+			text-decoration: none;
+		}
+	}
+
+	ul.siteNav {
+		flex-direction: column;
+		justify-items: flex-start;
+		gap: 0.5em;
+
+		li {
+			a {
+				// Use flex to correct icon alignment
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				column-gap: 0.5em;
+				width: 100%;
+				padding: 0.75em;
+				color: var(--nav-link-color);
+				border-radius: var(--main-border-radius);
+
+				transition: background-color 200ms ease;
+			}
+
+			&.active a {
+				background-color: var(--nav-active-background);
+			}
+
+			&:not(.active) a:hover, &:not(.active) a:focus {
+				background-color: var(--nav-hover-background);
+
+				@media (prefers-reduced-motion: reduce) {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	ul.externalNav {
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 0.5em;
+
+		li {
+			a {
+				display: inline-block;
+				padding: 0 0.75em;
+				color: var(--nav-link-color);
+			}
+		}
+	}
+}

src/css/Components/_variables.scss

@@ -0,0 +1,95 @@
+@use 'sass:color';
+
+@function select-foreground($backgroundColor, $lightColor: white, $darkColor: black) {
+	@if (lightness($backgroundColor) > 60) {
+		@return $darkColor;
+	} @else {
+		@return $lightColor;
+	}
+}
+
+$primary-r: 77;
+$primary-g: 94;
+$primary-b: 193;
+$primary-color: rgb($primary-r, $primary-g, $primary-b);
+$primary-light-color: lighten($primary-color, 35%);
+$primary-dark-color: darken($primary-color, 10%);
+$complementary-color: color.complement($primary-color);
+
+$text-color: #3b4351;
+$text-color-dark: white;
+$background-color-components: 255, 255, 255;
+$background-color: white;
+$background-color-dark-components: 33, 33, 36;
+$background-color-dark: rgb(33, 33, 36);
+
+$main-border-radius: 8px;
+
+$nav-active-background: rgba($primary-color, 0.15);
+$nav-active-background-dark: rgba($primary-color, 0.35);
+$nav-background-hover-color: rgba($primary-light-color, 0.2);
+$nav-background-hover-color-dark: rgba($primary-color, 0.2);
+$nav-link-color: $text-color;
+$nav-link-color-dark: $text-color-dark;
+
+$primary-border-color: darken($background-color, 15%);
+$primary-border-color-dark: lighten($background-color-dark, 15%);
+$primary-border-color-contrast: darken($background-color, 50%);
+$primary-border-color-dark-contrast: lighten($background-color-dark, 50%);
+
+$size-xs: 480px;
+$size-sm: 600px;
+$size-md: 840px;
+$size-lg: 960px;
+$size-xl: 1280px;
+$size-2x: 1440px;
+
+$sidebar-width: 15rem;
+$sidebar-breakpoint: $size-md;
+
+:root {
+	--size-xs: 480px;
+	--size-sm: 600px;
+	--size-md: 840px;
+	--size-lg: 960px;
+	--size-xl: 1280px;
+	--size-2x: 1440px;
+
+	--sidebar-width: #{$sidebar-width};
+	--sidebar-breakpoint: #{$sidebar-breakpoint};
+	--main-border-radius: #{$main-border-radius};
+
+	--primary-color: #{$primary-color};
+	--primary-light-color: #{$primary-light-color};
+	--primary-dark-color: #{$primary-dark-color};
+	--complementary-color: #{$complementary-color};
+
+	--primary-border-color: #{$primary-border-color};
+
+	--text-color: #{$text-color};
+	--background-color: #{$background-color};
+	--background-color-components: #{$background-color-components};
+
+	--nav-link-color: #{$nav-link-color};
+	--nav-active-background: #{$nav-active-background};
+	--nav-hover-background: #{$nav-background-hover-color};
+
+	@media (prefers-color-scheme: dark) {
+		--text-color: #{$text-color-dark};
+		--background-color: #{$background-color-dark};
+		--background-color-components: #{$background-color-dark-components};
+		--primary-border-color: #{$primary-border-color-dark};
+
+		--nav-link-color: #{$nav-link-color-dark};
+		--nav-active-background: #{$nav-active-background-dark};
+		--nav-hover-background: #{$nav-background-hover-color-dark};
+
+		@media (prefers-contrast: more) {
+			--primary-border-color: #{$primary-border-color-dark-contrast};
+		}
+	}
+
+	@media (prefers-contrast: more) {
+		--primary-border-color: #{$primary-border-color-contrast};
+	}
+}

src/css/site.scss

@@ -0,0 +1,13 @@
+@use 'normalize.css/normalize';
+
+@use 'Components/_variables';
+@use 'Components/_base';
+@use 'Components/_bootstrap-icons';
+@use 'Components/_columns';
+@use 'Components/_navbar';
+@use 'Components/_headings';
+@use 'Components/_card';
+@use 'Components/_color-block';
+@use 'Components/_mobile-header';
+@use 'Components/_lists';
+@use 'Components/_code';