Add construction banner to the old base

There is simply no need any more; system light/dark preferences handle this fine.

go.mod

@@ -24,7 +24,6 @@ require (
 	github.com/stretchr/testify v1.8.1
 	github.com/tcolgate/mp3 v0.0.0-20170426193717-e79c5a46d300
 	github.com/teacat/noire v1.1.0
-	github.com/wellington/go-libsass v0.9.2
 	github.com/yuin/goldmark v1.4.13
 	github.com/yuin/goldmark-highlighting v0.0.0-20210516132338-9216f9c5aa01
 	golang.org/x/crypto v0.6.0
@@ -45,6 +44,7 @@ require (
 	github.com/danwakefield/fnmatch v0.0.0-20160403171240-cbb64ac3d964 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/dlclark/regexp2 v1.4.0 // indirect
+	github.com/evanw/esbuild v0.21.4
 	github.com/huandu/xstrings v1.3.2 // indirect
 	github.com/imdario/mergo v0.3.12 // indirect
 	github.com/inconshreveable/mousetrap v1.0.0 // indirect
@@ -59,11 +59,10 @@ require (
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/teambition/rrule-go v1.7.2 // indirect
 	go.uber.org/atomic v1.10.0 // indirect
-	golang.org/x/net v0.6.0 // indirect
-	golang.org/x/sync v0.0.0-20220923202941-7f9b1623fab7 // indirect
+	golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8
+	golang.org/x/sync v0.7.0 // indirect
 	golang.org/x/sys v0.5.0 // indirect
 	golang.org/x/text v0.7.0 // indirect
-	golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
 

go.sum

@@ -90,6 +90,8 @@ github.com/dlclark/regexp2 v1.4.0 h1:F1rxgk7p4uKjwIQxBs9oAXe5CqrXlCduYEJvrF4u93E
 github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
 github.com/emersion/go-ical v0.0.0-20220601085725-0864dccc089f h1:feGUUxxvOtWVOhTko8Cbmp33a+tU0IMZxMEmnkoAISQ=
 github.com/emersion/go-ical v0.0.0-20220601085725-0864dccc089f/go.mod h1:2MKFUgfNMULRxqZkadG1Vh44we3y5gJAtTBlVsx1BKQ=
+github.com/evanw/esbuild v0.21.4 h1:pe4SEQMoR1maEjhgWPEPWmUy11Jp6nidxd1mOvMrFFU=
+github.com/evanw/esbuild v0.21.4/go.mod h1:D2vIQZqV/vIf/VRHtViaUtViZmG7o+kKmlBfVQuRi48=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
@@ -115,8 +117,8 @@ github.com/google/btree v1.0.0/go.mod h1:lNA+9X1NB3Zf8V7Ke586lFgjr2dZNuvo3lPJSGZ
 github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
 github.com/google/go-cmp v0.3.0/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
 github.com/google/go-cmp v0.5.4/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.6 h1:BKbKCqvP6I+rmFHt06ZmyQtvB8xAkWdhFyr0ZUNZcxQ=
 github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/martian v2.1.0+incompatible/go.mod h1:9I4somxYTbIHy5NJKHRl3wXiIaQGbYVAs8BPL6v8lEs=
 github.com/google/pprof v0.0.0-20181206194817-3ea8567a2e57/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc=
 github.com/google/pprof v0.0.0-20190515194954-54271f7e092f/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc=
@@ -280,8 +282,6 @@ github.com/teacat/noire v1.1.0/go.mod h1:cetGlnqr+9yKJcFgRgYXOWJY66XIrrjUsGBwNlN
 github.com/teambition/rrule-go v1.7.2 h1:goEajFWYydfCgavn2m/3w5U+1b3PGqPUHx/fFSVfTy0=
 github.com/teambition/rrule-go v1.7.2/go.mod h1:mBJ1Ht5uboJ6jexKdNUJg2NcwP8uUMNvStWXlJD3MvU=
 github.com/tmc/grpc-websocket-proxy v0.0.0-20190109142713-0ad062ec5ee5/go.mod h1:ncp9v5uamzpCO7NfCPTXjqaC+bZgJeR0sMTm6dMHP7U=
-github.com/wellington/go-libsass v0.9.2 h1:6Ims04UDdBs6/CGSVK5JC8FNikR5ssrsMMKE/uaO5Q8=
-github.com/wellington/go-libsass v0.9.2/go.mod h1:mxgxgam0N0E+NAUMHLcu20Ccfc3mVpDkyrLDayqfiTs=
 github.com/xiang90/probing v0.0.0-20190116061207-43a291ad63a2/go.mod h1:UETIi67q53MR2AWcXfiuqkDkRtnGDLqkBTpCHuJHxtU=
 github.com/yuin/goldmark v1.3.6/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
 github.com/yuin/goldmark v1.4.13 h1:fVcFKWvrslecOb/tg+Cc05dkeYx540o0FuFt3nUVDoE=
@@ -308,6 +308,8 @@ golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL
 golang.org/x/exp v0.0.0-20190510132918-efd6b22b2522/go.mod h1:ZjyILWgesfNpC6sMxTJOJm9Kp84zZh5NQWvqDGG3Qr8=
 golang.org/x/exp v0.0.0-20190829153037-c13cbed26979/go.mod h1:86+5VVa7VpoJ4kLfm080zCjGlMRFzhUhsZKEZO7MGek=
 golang.org/x/exp v0.0.0-20191030013958-a1ab85dbe136/go.mod h1:JXzH8nQsPlswgeRAPE3MuO9GYsAcnJvJ4vnMwN/5qkY=
+golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8 h1:yixxcjnhBmY0nkL253HFVIm0JsFHwrHdT3Yh6szTnfY=
+golang.org/x/exp v0.0.0-20240613232115-7f521ea00fb8/go.mod h1:jj3sYF3dwk5D+ghuXyeI3r5MFf+NT2An6/9dOA95KSI=
 golang.org/x/image v0.0.0-20190227222117-0694c2d4d067/go.mod h1:kZ7UVZpmo3dzQBMxlp+ypCbDeSB+sBbTgSJuh5dn5js=
 golang.org/x/image v0.0.0-20190802002840-cff245a6509b/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/image v0.0.0-20210628002857-a66eb6448b8d h1:RNPAfi2nHY7C2srAV8A49jpsYr0ADedCk1wq6fTMTvs=
@@ -337,8 +339,6 @@ golang.org/x/net v0.0.0-20190501004415-9ce7a6920f09/go.mod h1:t9HGtf8HONx5eT2rtn
 golang.org/x/net v0.0.0-20190503192946-f4e77d36d62c/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190603091049-60506f45cf65/go.mod h1:HSz+uSET+XFnRR8LxR5pz3Of3rY3CfYBVs4xY44aLks=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.6.0 h1:L4ZwwTvKW9gr0ZMS1yrHD9GZhIuVjOBBnaKH+SPQK0Q=
-golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -348,8 +348,8 @@ golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20190227155943-e225da77a7e6/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20210220032951-036812b2e83c/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20220923202941-7f9b1623fab7 h1:ZrnxWX62AgTKOSagEqxvb3ffipvEDX2pl7E1TdqLqIc=
-golang.org/x/sync v0.0.0-20220923202941-7f9b1623fab7/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.7.0 h1:YsImfSBoP9QPYL0xyKJPq0gcaJdG3rInoqxTWbfQu9M=
+golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20180823144017-11551d06cbcc/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180905080454-ebe1bf3edb33/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@@ -369,6 +369,7 @@ golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20200413165638-669c56c373c4/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@@ -399,8 +400,6 @@ golang.org/x/tools v0.0.0-20191012152004-8de300cfc20a/go.mod h1:b+2E5dAYhXwXZwtn
 golang.org/x/tools v0.0.0-20191112195655-aa38f8e97acc/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=
-golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/api v0.4.0/go.mod h1:8k5glujaEP+g9n7WNsDg8QP6cUVNI86fCNMcbazEtwE=
 google.golang.org/api v0.7.0/go.mod h1:WtwebWUNSVBH/HAw79HIFXZNqEvBhG+Ra+ax0hx3E3M=
 google.golang.org/api v0.8.0/go.mod h1:o4eAsZoiT+ibD93RtjEohWalFOjRDx6CVaqeizhEnKg=

main.go

@@ -3,7 +3,7 @@ package main
 import (
 	_ "git.handmade.network/hmn/hmn/src/admintools"
 	_ "git.handmade.network/hmn/hmn/src/assets"
-	_ "git.handmade.network/hmn/hmn/src/buildscss"
+	_ "git.handmade.network/hmn/hmn/src/buildscss/cmd"
 	_ "git.handmade.network/hmn/hmn/src/discord/cmd"
 	_ "git.handmade.network/hmn/hmn/src/initimage"
 	_ "git.handmade.network/hmn/hmn/src/migration"

public/js/image_selector.js

@@ -1,12 +1,15 @@
 function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
 	this.form = form;
 	this.maxFileSize = maxFileSize;
-	this.fileInput = container.querySelector(".image_input");
-	this.removeImageInput = container.querySelector(".remove_input");
+	this.fileInput = container.querySelector(".imginput");
+	this.removeImageInput = container.querySelector(".imginput-remove");
 	this.imageEl = container.querySelector("img");
-	this.resetLink = container.querySelector(".reset");
-	this.removeLink = container.querySelector(".remove");
-	this.originalImageUrl = this.imageEl.getAttribute("data-original");
+	this.container = container.querySelector(".imginput-container");
+	this.resetLink = container.querySelector(".imginput-reset-link");
+	this.removeLink = container.querySelector(".imginput-remove-link");
+	this.filenameText = container.querySelector(".imginput-filename");
+	this.originalImageUrl = this.imageEl.getAttribute("data-imginput-original");
+	this.originalImageFilename = this.imageEl.getAttribute("data-imginput-original-filename");
 	this.currentImageUrl = this.originalImageUrl;
 	this.defaultImageUrl = defaultImageUrl || "";
 
@@ -14,7 +17,7 @@ function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
 	this.removeImageInput.value = "";
 
 	this.setImageUrl(this.originalImageUrl);
-	this.updateButtons();
+	this.updatePreview();
 
 	this.fileInput.addEventListener("change", function(ev) {
 		if (this.fileInput.files.length > 0) {
@@ -33,12 +36,16 @@ function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
 	}
 }
 
+ImageSelector.prototype.openFileInput = function() {
+	this.fileInput.click();
+}
+
 ImageSelector.prototype.handleNewImageFile = function(file) {
 	if (file) {
 		this.updateSizeLimit(file.size);
 		this.removeImageInput.value = "";
 		this.setImageUrl(URL.createObjectURL(file));
-		this.updateButtons();
+		this.updatePreview(file);
 	}
 };
 
@@ -47,7 +54,7 @@ ImageSelector.prototype.removeImage = function() {
 	this.fileInput.value = "";
 	this.removeImageInput.value = "true";
 	this.setImageUrl(this.defaultImageUrl);
-	this.updateButtons();
+	this.updatePreview(null);
 };
 
 ImageSelector.prototype.resetImage = function() {
@@ -55,7 +62,7 @@ ImageSelector.prototype.resetImage = function() {
 	this.fileInput.value = "";
 	this.removeImageInput.value = "";
 	this.setImageUrl(this.originalImageUrl);
-	this.updateButtons();
+	this.updatePreview(null);
 };
 
 ImageSelector.prototype.updateSizeLimit = function(size) {
@@ -82,19 +89,24 @@ ImageSelector.prototype.setImageUrl = function(url) {
 	}
 };
 
-ImageSelector.prototype.updateButtons = function() {
-	if ((this.originalImageUrl.length > 0 && this.originalImageUrl != this.defaultImageUrl)
-		&& this.currentImageUrl != this.originalImageUrl) {
+ImageSelector.prototype.updatePreview = function(file) {
+	const showReset = (
+		this.originalImageUrl
+		&& this.originalImageUrl != this.defaultImageUrl
+		&& this.originalImageUrl != this.currentImageUrl
+	);
+	const showRemove = (
+		!this.fileInput.required
+		&& this.currentImageUrl != this.defaultImageUrl
+	);
+	this.resetLink.hidden = !showReset;
+	this.removeLink.hidden = !showRemove;
 
-		this.resetLink.style.display = "inline-block";
+	if (this.currentImageUrl == this.originalImageUrl) {
+		this.filenameText.innerText = this.originalImageFilename;
 	} else {
-		this.resetLink.style.display = "none";
+		this.filenameText.innerText = file ? file.name : "";
 	}
 
-	if (!this.fileInput.required && this.currentImageUrl != this.defaultImageUrl) {
-		this.removeLink.style.display = "inline-block";
-	} else {
-		this.removeLink.style.display = "none";
-	}
+	this.container.hidden = !this.currentImageUrl;
 };
-

public/js/script.js

@@ -0,0 +1,3 @@
+function rem2px(rem) {    
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}

public/js/snippetedit.js

@@ -9,7 +9,7 @@ function readableByteSize(numBytes) {
 		"gb"
 	];
 	let scale = 0;
-	while (numBytes > 1024 && scale < scales.length-1) {
+	while (numBytes > 1024 && scale < scales.length - 1) {
 		numBytes /= 1024;
 		scale++;
 	}
@@ -24,11 +24,16 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 	let attachmentChanged = false;
 	let hasAttachment = false;
 	snippetEdit.redirect.value = location.href;
-	snippetEdit.avatarImg.src = ownerAvatar;
-	snippetEdit.avatarLink.href = ownerUrl;
+	if (ownerAvatar) {
+		snippetEdit.avatarImg.src = ownerAvatar;
+		snippetEdit.avatarLink.href = ownerUrl;
+		snippetEdit.avatarImg.hidden = false;
+	} else {
+		snippetEdit.avatarImg.hidden = true;
+	}
 	snippetEdit.username.textContent = ownerName;
 	snippetEdit.username.href = ownerUrl;
-	snippetEdit.date.textContent = new Intl.DateTimeFormat([], {month: "2-digit", day: "2-digit", year: "numeric"}).format(date);
+	snippetEdit.date.textContent = new Intl.DateTimeFormat([], { month: "2-digit", day: "2-digit", year: "numeric" }).format(date);
 	snippetEdit.text.value = text;
 	if (attachmentElement) {
 		originalAttachment = attachmentElement.cloneNode(true);
@@ -56,7 +61,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 	updateProjectSelector();
 
 	if (originalSnippetEl) {
-		snippetEdit.cancelLink.addEventListener("click", function() {
+		snippetEdit.cancelLink.addEventListener("click", function () {
 			cancel();
 		});
 	} else {
@@ -78,7 +83,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 		if (proj.id == stickyProjectId) {
 			projEl.removeButton.remove();
 		} else {
-			projEl.removeButton.addEventListener("click", function(ev) {
+			projEl.removeButton.addEventListener("click", function (ev) {
 				projEl.root.remove();
 				updateProjectSelector();
 			});
@@ -126,7 +131,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 				option.textContent = remainingProjects[i].name;
 				projectSelector.appendChild(option);
 			}
-			projectSelector.addEventListener("change", function(ev) {
+			projectSelector.addEventListener("change", function (ev) {
 				if (projectSelector.selectedOptions.length > 0) {
 					let selected = projectSelector.selectedOptions[0];
 					if (selected.value != "") {
@@ -237,33 +242,33 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 		}
 	}
 
-	snippetEdit.uploadLink.addEventListener("click", function() {
+	snippetEdit.uploadLink.addEventListener("click", function () {
 		snippetEdit.file.click();
 	});
 
-	snippetEdit.removeLink.addEventListener("click", function() {
+	snippetEdit.removeLink.addEventListener("click", function () {
 		clearAttachment(false);
 	});
 
-	snippetEdit.replaceLink.addEventListener("click", function() {
+	snippetEdit.replaceLink.addEventListener("click", function () {
 		snippetEdit.file.click();
 	});
 
-	snippetEdit.resetLink.addEventListener("click", function() {
+	snippetEdit.resetLink.addEventListener("click", function () {
 		clearAttachment(true);
 	});
 
-	snippetEdit.uploadResetLink.addEventListener("click", function() {
+	snippetEdit.uploadResetLink.addEventListener("click", function () {
 		clearAttachment(true);
 	});
 
-	snippetEdit.file.addEventListener("change", function() {
+	snippetEdit.file.addEventListener("change", function () {
 		if (snippetEdit.file.files.length > 0) {
 			setFile(snippetEdit.file.files[0]);
 		}
 	});
 
-	snippetEdit.root.addEventListener("dragover", function(ev) {
+	snippetEdit.root.addEventListener("dragover", function (ev) {
 		let effect = "none";
 		for (let i = 0; i < ev.dataTransfer.items.length; ++i) {
 			if (ev.dataTransfer.items[i].kind.toLowerCase() == "file") {
@@ -277,7 +282,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 
 	let enterCounter = 0;
 
-	snippetEdit.root.addEventListener("dragenter", function(ev) {
+	snippetEdit.root.addEventListener("dragenter", function (ev) {
 		enterCounter++;
 		let droppable = Array.from(ev.dataTransfer.items).some(
 			item => item.kind.toLowerCase() === "file"
@@ -287,14 +292,14 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 		}
 	});
 
-	snippetEdit.root.addEventListener("dragleave", function(ev) {
+	snippetEdit.root.addEventListener("dragleave", function (ev) {
 		enterCounter--;
 		if (enterCounter == 0) {
 			snippetEdit.root.classList.remove("drop");
 		}
 	});
 
-	snippetEdit.root.addEventListener("drop", function(ev) {
+	snippetEdit.root.addEventListener("drop", function (ev) {
 		enterCounter = 0;
 		snippetEdit.root.classList.remove("drop");
 
@@ -305,18 +310,18 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 		ev.preventDefault();
 	});
 
-	snippetEdit.text.addEventListener("paste", function(ev) {
+	snippetEdit.text.addEventListener("paste", function (ev) {
 		const files = ev.clipboardData?.files ?? [];
 		if (files.length > 0) {
 			setFile(files[0]);
 		}
 	});
 
-	snippetEdit.text.addEventListener("input", function(ev) {
+	snippetEdit.text.addEventListener("input", function (ev) {
 		validate();
 	});
 
-	snippetEdit.saveButton.addEventListener("click", function(ev) {
+	snippetEdit.saveButton.addEventListener("click", function (ev) {
 		let projectsChanged = false;
 		let projInputs = snippetEdit.projectList.querySelectorAll("input[name=project_id]");
 		let assignedIds = [];
@@ -349,8 +354,8 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 			cancel();
 		}
 	});
-	
-	snippetEdit.deleteButton.addEventListener("click", function(ev) {
+
+	snippetEdit.deleteButton.addEventListener("click", function (ev) {
 		if (!window.confirm("Are you sure you want to delete this snippet?")) {
 			ev.preventDefault();
 			return;
@@ -367,10 +372,10 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 function editTimelineSnippet(timelineItemEl, stickyProjectId) {
 	let ownerName = timelineItemEl.querySelector(".user")?.textContent;
 	let ownerUrl = timelineItemEl.querySelector(".user")?.href;
-	let ownerAvatar = timelineItemEl.querySelector(".avatar-icon")?.src;
+	let ownerAvatar = timelineItemEl.querySelector(".avatar")?.src;
 	let creationDate = new Date(timelineItemEl.querySelector("time").dateTime);
 	let rawDesc = timelineItemEl.querySelector(".rawdesc").textContent;
-	let attachment = timelineItemEl.querySelector(".timeline-content-box")?.children?.[0];
+	let attachment = timelineItemEl.querySelector(".timeline-media")?.children?.[0];
 	let projectIds = [];
 	let projectEls = timelineItemEl.querySelectorAll(".projects > a");
 	for (let i = 0; i < projectEls.length; ++i) {

public/js/tabs.js

@@ -1,106 +1,24 @@
-function TabState(tabbed) {
-    this.container = tabbed;
-    this.tabs = tabbed.querySelector(".tab");
+function initTabs(container, initialTab = null) {
+    const buttons = Array.from(container.querySelectorAll("[data-tab-button]"));
+    const tabs = Array.from(container.querySelectorAll("[data-tab]"));
 
-    this.tabbar = document.createElement("div");
-    this.tabbar.classList.add("tab-bar");
-    this.container.insertBefore(this.tabbar, this.container.firstChild);
-
-    this.current_i = -1;
-    this.tab_buttons = [];
-}
-
-function switch_tab_old(state, tab_i) {
-    return function() {
-        if (state.current_i >= 0) {
-            state.tabs[state.current_i].classList.add("hidden");
-            state.tab_buttons[state.current_i].classList.remove("current");
-        }
-
-        state.tabs[tab_i].classList.remove("hidden");
-        state.tab_buttons[tab_i].classList.add("current");
-
-        var hash = "";
-        if (state.tabs[tab_i].hasAttribute("data-url-hash")) {
-            hash = state.tabs[tab_i].getAttribute("data-url-hash");
-        }
-        window.location.hash = hash;
-
-        state.current_i = tab_i;
-    };
-}
-
-document.addEventListener("DOMContentLoaded", function() {
-    const tabContainers = document.getElementsByClassName("tabbed");
-    for (const container of tabContainers) {
-        const tabBar = document.createElement("div");
-        tabBar.classList.add("tab-bar");
-        container.insertAdjacentElement('afterbegin', tabBar);
-
-        const tabs = container.querySelectorAll(".tab");
-        for (let i = 0; i < tabs.length; i++) {
-            const tab = tabs[i];
-            tab.classList.toggle('dn', i > 0);
-            
-            const slug = tab.getAttribute("data-slug");
-
-            // TODO: Should this element be a link?
-            const tabButton = document.createElement("div");
-            tabButton.classList.add("tab-button");
-            tabButton.classList.toggle("current", i === 0);
-            tabButton.innerText = tab.getAttribute("data-name");
-            tabButton.setAttribute("data-slug", slug);
-            
-            tabButton.addEventListener("click", () => {
-                switchTab(container, slug);
-            });
-
-            tabBar.appendChild(tabButton);
-        }
-
-        const initialSlug = window.location.hash;
-        if (initialSlug) {
-            switchTab(container, initialSlug.substring(1));
-        }
-    }
-});
-
-function switchTab(container, slug) {
-    const tabs = container.querySelectorAll('.tab');
-
-    let didMatch = false;
-    for (const tab of tabs) {
-        const slugMatches = tab.getAttribute("data-slug") === slug;
-        tab.classList.toggle('dn', !slugMatches);
-
-        if (slugMatches) {
-            didMatch = true;
-        }
+    if (!initialTab) {
+        initialTab = tabs[0].getAttribute("data-tab");
     }
 
-    const tabButtons = document.querySelectorAll(".tab-button");
-    for (const tabButton of tabButtons) {
-        const buttonSlug = tabButton.getAttribute("data-slug");
-        tabButton.classList.toggle('current', slug === buttonSlug);
+    function switchTo(name) {
+        for (const tab of tabs) {
+            tab.hidden = tab.getAttribute("data-tab") !== name;
+        }
+        for (const button of buttons) {
+            button.classList.toggle("tab-button-active", button.getAttribute("data-tab-button") === name);
+        }
     }
+    switchTo(initialTab);
 
-    if (!didMatch) {
-        // switch to first tab as a fallback
-        tabs[0].classList.remove('dn');
-        tabButtons[0].classList.add('current');
+    for (const button of buttons) {
+        button.addEventListener("click", () => {
+            switchTo(button.getAttribute("data-tab-button"));
+        });
     }
-
-    window.location.hash = slug;
-}
-
-function switchToTabOfElement(container, el) {
-    const tabs = Array.from(container.querySelectorAll('.tab'));
-	let target = el.parentElement;
-	while (target) {
-		if (tabs.includes(target)) {
-			switchTab(container, target.getAttribute("data-slug"));
-			return;
-		}
-		target = target.parentElement;
-	}
 }

public/themes/dark/theme.css

@@ -1,309 +0,0 @@
-/*
-Inserts a CSS expression with one or more custom variables.
-You can provide an arbitrary number of strings in the second
-argument, separated by spaces. Any strings corresponding to
-variable names will be replaced by the correct values, while
-other strings are left untouched.
-
-Example usage:
-
-@include usevar(border-color, dimmer-color);
-@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")");
-
-For clarity and to avoid syntax issues, you are encouraged to
-use unquoted strings for variables and quoted strings for
-everything else.
-
-For convenience in common cases, if only a single argument
-is provided and it does not match an existing variable, this
-will throw an error.
-*/
-pre, code, .codeblock {
-  /* Comment */
-  /* Error */
-  /* Keyword */
-  /* Literal */
-  /* Name */
-  /* Operator */
-  /* Punctuation */
-  /* Comment.Multiline */
-  /* Comment.Preproc */
-  /* Comment.Single */
-  /* Comment.Special */
-  /* Generic.Emph */
-  /* Generic.Strong */
-  /* Keyword.Constant */
-  /* Keyword.Declaration */
-  /* Keyword.Namespace */
-  /* Keyword.Pseudo */
-  /* Keyword.Reserved */
-  /* Keyword.Type */
-  /* Literal.Date */
-  /* Literal.Number */
-  /* Literal.String */
-  /* Name.Attribute */
-  /* Name.Builtin */
-  /* Name.Class */
-  /* Name.Constant */
-  /* Name.Decorator */
-  /* Name.Entity */
-  /* Name.Exception */
-  /* Name.Function */
-  /* Name.Label */
-  /* Name.Namespace */
-  /* Name.Other */
-  /* Name.Property */
-  /* Name.Tag */
-  /* Name.Variable */
-  /* Operator.Word */
-  /* Text.Whitespace */
-  /* Literal.Number.Float */
-  /* Literal.Number.Hex */
-  /* Literal.Number.Integer */
-  /* Literal.Number.Oct */
-  /* Literal.String.Backtick */
-  /* Literal.String.Char */
-  /* Literal.String.Doc */
-  /* Literal.String.Double */
-  /* Literal.String.Escape */
-  /* Literal.String.Heredoc */
-  /* Literal.String.Interpol */
-  /* Literal.String.Other */
-  /* Literal.String.Regex */
-  /* Literal.String.Single */
-  /* Literal.String.Symbol */
-  /* Name.Builtin.Pseudo */
-  /* Name.Variable.Class */
-  /* Name.Variable.Global */
-  /* Name.Variable.Instance */
-  /* Literal.Number.Integer.Long */
-  /* Generic Heading & Diff Header */
-  /* Generic.Subheading & Diff Unified/Comment? */
-  /* Generic.Deleted & Diff Deleted */
-  /* Generic.Inserted & Diff Inserted */ }
-  pre .hll, code .hll, .codeblock .hll {
-    background-color: #49483e; }
-  pre .c, code .c, .codeblock .c {
-    color: #75715e; }
-  pre .err, code .err, .codeblock .err {
-    color: #ff0000; }
-  pre .k, code .k, .codeblock .k {
-    color: #66d9ef; }
-  pre .l, code .l, .codeblock .l {
-    color: #ae81ff; }
-  pre .n, code .n, .codeblock .n {
-    color: #f8f8f2; }
-  pre .o, code .o, .codeblock .o {
-    color: #f92672; }
-  pre .p, code .p, .codeblock .p {
-    color: #f8f8f2; }
-  pre .cm, code .cm, .codeblock .cm {
-    color: #75715e; }
-  pre .cp, code .cp, .codeblock .cp {
-    color: #75715e; }
-  pre .c1, code .c1, .codeblock .c1 {
-    color: #75715e; }
-  pre .cs, code .cs, .codeblock .cs {
-    color: #75715e; }
-  pre .ge, code .ge, .codeblock .ge {
-    font-style: italic; }
-  pre .gs, code .gs, .codeblock .gs {
-    font-weight: bold; }
-  pre .kc, code .kc, .codeblock .kc {
-    color: #66d9ef; }
-  pre .kd, code .kd, .codeblock .kd {
-    color: #66d9ef; }
-  pre .kn, code .kn, .codeblock .kn {
-    color: #f92672; }
-  pre .kp, code .kp, .codeblock .kp {
-    color: #66d9ef; }
-  pre .kr, code .kr, .codeblock .kr {
-    color: #66d9ef; }
-  pre .kt, code .kt, .codeblock .kt {
-    color: #66d9ef; }
-  pre .ld, code .ld, .codeblock .ld {
-    color: #e6db74; }
-  pre .m, code .m, .codeblock .m {
-    color: #ae81ff; }
-  pre .s, code .s, .codeblock .s {
-    color: #e6db74; }
-  pre .na, code .na, .codeblock .na {
-    color: #a6e22e; }
-  pre .nb, code .nb, .codeblock .nb {
-    color: #f8f8f2; }
-  pre .nc, code .nc, .codeblock .nc {
-    color: #a6e22e; }
-  pre .no, code .no, .codeblock .no {
-    color: #66d9ef; }
-  pre .nd, code .nd, .codeblock .nd {
-    color: #a6e22e; }
-  pre .ni, code .ni, .codeblock .ni {
-    color: #f8f8f2; }
-  pre .ne, code .ne, .codeblock .ne {
-    color: #a6e22e; }
-  pre .nf, code .nf, .codeblock .nf {
-    color: #a6e22e; }
-  pre .nl, code .nl, .codeblock .nl {
-    color: #f8f8f2; }
-  pre .nn, code .nn, .codeblock .nn {
-    color: #f8f8f2; }
-  pre .nx, code .nx, .codeblock .nx {
-    color: #a6e22e; }
-  pre .py, code .py, .codeblock .py {
-    color: #f8f8f2; }
-  pre .nt, code .nt, .codeblock .nt {
-    color: #f92672; }
-  pre .nv, code .nv, .codeblock .nv {
-    color: #f8f8f2; }
-  pre .ow, code .ow, .codeblock .ow {
-    color: #f92672; }
-  pre .w, code .w, .codeblock .w {
-    color: #f8f8f2; }
-  pre .mf, code .mf, .codeblock .mf {
-    color: #ae81ff; }
-  pre .mh, code .mh, .codeblock .mh {
-    color: #ae81ff; }
-  pre .mi, code .mi, .codeblock .mi {
-    color: #ae81ff; }
-  pre .mo, code .mo, .codeblock .mo {
-    color: #ae81ff; }
-  pre .sb, code .sb, .codeblock .sb {
-    color: #e6db74; }
-  pre .sc, code .sc, .codeblock .sc {
-    color: #e6db74; }
-  pre .sd, code .sd, .codeblock .sd {
-    color: #e6db74; }
-  pre .s2, code .s2, .codeblock .s2 {
-    color: #e6db74; }
-  pre .se, code .se, .codeblock .se {
-    color: #ae81ff; }
-  pre .sh, code .sh, .codeblock .sh {
-    color: #e6db74; }
-  pre .si, code .si, .codeblock .si {
-    color: #e6db74; }
-  pre .sx, code .sx, .codeblock .sx {
-    color: #e6db74; }
-  pre .sr, code .sr, .codeblock .sr {
-    color: #e6db74; }
-  pre .s1, code .s1, .codeblock .s1 {
-    color: #e6db74; }
-  pre .ss, code .ss, .codeblock .ss {
-    color: #e6db74; }
-  pre .bp, code .bp, .codeblock .bp {
-    color: #f8f8f2; }
-  pre .vc, code .vc, .codeblock .vc {
-    color: #f8f8f2; }
-  pre .vg, code .vg, .codeblock .vg {
-    color: #f8f8f2; }
-  pre .vi, code .vi, .codeblock .vi {
-    color: #f8f8f2; }
-  pre .il, code .il, .codeblock .il {
-    color: #ae81ff; }
-  pre .gu, code .gu, .codeblock .gu {
-    color: #75715e; }
-  pre .gd, code .gd, .codeblock .gd {
-    color: #f92672; }
-  pre .gi, code .gi, .codeblock .gi {
-    color: #a6e22e; }
-
-.light {
-  background-color: #fff;
-  color: #000; }
-
-:root {
-  --fg-font-color: #eee;
-  --theme-color: #666;
-  --theme-color-dim: #444;
-  --theme-color-dimmer: #383838;
-  --theme-color-dimmest: #333;
-  --theme-color-dark: #666;
-  --theme-color-light: #666;
-  --link-color: #aaa;
-  --link-border-color: #aaa;
-  --hr-color: #aaa;
-  --main-background-color: #202020;
-  --main-color: #eee;
-  --dim-color: #bbb;
-  --dimmer-color: #999;
-  --dimmest-color: #777;
-  --menu-bottom-border-color: #444;
-  --login-popup-background: #181818;
-  --content-background: #202020;
-  --content-background-transparent: rgba(32, 32, 32, 0);
-  --dim-background: #252525;
-  --dim-background-transparent: rgba(37, 37, 37, 0);
-  --text-background: #181818;
-  --spoiler-border: #777;
-  --background-even-background: #242424;
-  --project-card-border-color: #333;
-  --project-user-suggestions-background: #222;
-  --project-user-suggestions-border-color: #444;
-  --notice-text-color: #eee;
-  --notice-unapproved-color: #7a2020;
-  --notice-hidden-color: #494949;
-  --notice-hiatus-color: #876327;
-  --notice-dead-color: #7a2020;
-  --notice-lts-color: #2a681d;
-  --notice-lts-reqd-color: #876327;
-  --notice-success-color: #2a681d;
-  --notice-warn-color: #876327;
-  --notice-failure-color: #7a2020;
-  --optionbar-border-color: #333;
-  --tab-background: #181818;
-  --tab-border-color: #3f3f3f;
-  --tab-button-background: #303030;
-  --tab-button-background-hover: #383838;
-  --tab-button-background-current: #181818;
-  --form-check-background: #252527;
-  --form-check-border-color: #666;
-  --form-check-border-color-hover: #084068;
-  --form-text-background: #181818;
-  --form-text-background-active: #252527;
-  --form-text-border-color: #444;
-  --form-text-border-color-active: #084068;
-  --form-button-color: #999;
-  --form-button-color-active: #4c9ed9;
-  --form-button-background: #383838;
-  --form-button-background-active: #303840;
-  --form-button-border-color: transparent;
-  --form-button-inline-border-color: transparent;
-  --form-error-color: #c61d24;
-  --landing-search-background: #282828;
-  --landing-search-background-hover: #181818;
-  --editor-toolbar-background: #282828;
-  --editor-toolbar-border-color: #333;
-  --editor-toolbar-button-background: #282828;
-  --editor-toolbar-button-background-hover: #333;
-  --editor-toolbar-button-border-color: #333;
-  --post-blockquote-border-color: #555;
-  --forum-even-background: #242424;
-  --forum-thread-read-color: #777;
-  --forum-thread-read-link-color: #999;
-  --forum-post-author-color: #999;
-  --forum-diff-source-background: #181818;
-  --forum-diff-source-border-color: #444;
-  --forum-diff-replace-background: #18283a;
-  --forum-diff-replace-border-color: #223d5b;
-  --forum-diff-delete-background: #3a1818;
-  --forum-diff-delete-border-color: #6b1e1c;
-  --forum-diff-insert-background: #233a18;
-  --forum-diff-insert-border-color: #30591b;
-  --card-background: #282828;
-  --card-background-hover: #333;
-  --timeline-content-background: rgba(255, 255, 255, 0.06);
-  --irc-border-color: #333;
-  --irc-tab-current-shadow: 0px 0px 5px #000 inset;
-  --irc-tab-close-button-color: #bbb;
-  --irc-tab-close-button-background: #444;
-  --irc-nick-border-color: #444;
-  --irc-users-color: #aaa;
-  --irc-users-background: #181818;
-  --irc-users-border-color: transparent;
-  --irc-users-popout-background: #181818;
-  --irc-users-popout-border-color-left: #444;
-  --irc-users-popout-border-color-right: #333;
-  --code-line-number-color: #444;
-  --library-star-btn-background: #252525;
-  --library-star-btn-border-color: #bbb;
-  --library-star-btn-a-border-color: #999;
-  --library-star-btn-a-hover-background: #333; }

public/themes/light/theme.css

@@ -1,327 +0,0 @@
-/*
-Inserts a CSS expression with one or more custom variables.
-You can provide an arbitrary number of strings in the second
-argument, separated by spaces. Any strings corresponding to
-variable names will be replaced by the correct values, while
-other strings are left untouched.
-
-Example usage:
-
-@include usevar(border-color, dimmer-color);
-@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")");
-
-For clarity and to avoid syntax issues, you are encouraged to
-use unquoted strings for variables and quoted strings for
-everything else.
-
-For convenience in common cases, if only a single argument
-is provided and it does not match an existing variable, this
-will throw an error.
-*/
-pre, code, .codeblock {
-  /* Comment */
-  /* Error */
-  /* Keyword */
-  /* Operator */
-  /* Comment.Multiline */
-  /* Comment.Preproc */
-  /* Comment.Single */
-  /* Comment.Special */
-  /* Generic.Deleted */
-  /* Generic.Emph */
-  /* Generic.Error */
-  /* Generic.Heading */
-  /* Generic.Inserted */
-  /* Generic.Output */
-  /* Generic.Prompt */
-  /* Generic.Strong */
-  /* Generic.Subheading */
-  /* Generic.Traceback */
-  /* Keyword.Constant */
-  /* Keyword.Declaration */
-  /* Keyword.Namespace */
-  /* Keyword.Pseudo */
-  /* Keyword.Reserved */
-  /* Keyword.Type */
-  /* Literal.Number */
-  /* Literal.String */
-  /* Name.Attribute */
-  /* Name.Builtin */
-  /* Name.Class */
-  /* Name.Constant */
-  /* Name.Decorator */
-  /* Name.Entity */
-  /* Name.Exception */
-  /* Name.Function */
-  /* Name.Label */
-  /* Name.Namespace */
-  /* Name.Tag */
-  /* Name.Variable */
-  /* Operator.Word */
-  /* Text.Whitespace */
-  /* Literal.Number.Float */
-  /* Literal.Number.Hex */
-  /* Literal.Number.Integer */
-  /* Literal.Number.Oct */
-  /* Literal.String.Backtick */
-  /* Literal.String.Char */
-  /* Literal.String.Doc */
-  /* Literal.String.Double */
-  /* Literal.String.Escape */
-  /* Literal.String.Heredoc */
-  /* Literal.String.Interpol */
-  /* Literal.String.Other */
-  /* Literal.String.Regex */
-  /* Literal.String.Single */
-  /* Literal.String.Symbol */
-  /* Name.Builtin.Pseudo */
-  /* Name.Variable.Class */
-  /* Name.Variable.Global */
-  /* Name.Variable.Instance */
-  /* Literal.Number.Integer.Long */ }
-  pre .hll, code .hll, .codeblock .hll {
-    background-color: #ffffcc; }
-  pre .c, code .c, .codeblock .c {
-    color: #60a0b0;
-    font-style: italic; }
-  pre .err, code .err, .codeblock .err {
-    color: #FF0000; }
-  pre .k, code .k, .codeblock .k {
-    color: #007020;
-    font-weight: bold; }
-  pre .o, code .o, .codeblock .o {
-    color: #666666; }
-  pre .cm, code .cm, .codeblock .cm {
-    color: #60a0b0;
-    font-style: italic; }
-  pre .cp, code .cp, .codeblock .cp {
-    color: #007020; }
-  pre .c1, code .c1, .codeblock .c1 {
-    color: #60a0b0;
-    font-style: italic; }
-  pre .cs, code .cs, .codeblock .cs {
-    color: #60a0b0;
-    background-color: #fff0f0; }
-  pre .gd, code .gd, .codeblock .gd {
-    color: #A00000; }
-  pre .ge, code .ge, .codeblock .ge {
-    font-style: italic; }
-  pre .gr, code .gr, .codeblock .gr {
-    color: #FF0000; }
-  pre .gh, code .gh, .codeblock .gh {
-    color: #000080;
-    font-weight: bold; }
-  pre .gi, code .gi, .codeblock .gi {
-    color: #00A000; }
-  pre .go, code .go, .codeblock .go {
-    color: #808080; }
-  pre .gp, code .gp, .codeblock .gp {
-    color: #c65d09;
-    font-weight: bold; }
-  pre .gs, code .gs, .codeblock .gs {
-    font-weight: bold; }
-  pre .gu, code .gu, .codeblock .gu {
-    color: #800080;
-    font-weight: bold; }
-  pre .gt, code .gt, .codeblock .gt {
-    color: #0040D0; }
-  pre .kc, code .kc, .codeblock .kc {
-    color: #007020;
-    font-weight: bold; }
-  pre .kd, code .kd, .codeblock .kd {
-    color: #007020;
-    font-weight: bold; }
-  pre .kn, code .kn, .codeblock .kn {
-    color: #007020;
-    font-weight: bold; }
-  pre .kp, code .kp, .codeblock .kp {
-    color: #007020; }
-  pre .kr, code .kr, .codeblock .kr {
-    color: #007020;
-    font-weight: bold; }
-  pre .kt, code .kt, .codeblock .kt {
-    color: #902000; }
-  pre .m, code .m, .codeblock .m {
-    color: #40a070; }
-  pre .s, code .s, .codeblock .s {
-    color: #4070a0; }
-  pre .na, code .na, .codeblock .na {
-    color: #4070a0; }
-  pre .nb, code .nb, .codeblock .nb {
-    color: #007020; }
-  pre .nc, code .nc, .codeblock .nc {
-    color: #0e84b5;
-    font-weight: bold; }
-  pre .no, code .no, .codeblock .no {
-    color: #60add5; }
-  pre .nd, code .nd, .codeblock .nd {
-    color: #555555;
-    font-weight: bold; }
-  pre .ni, code .ni, .codeblock .ni {
-    color: #d55537;
-    font-weight: bold; }
-  pre .ne, code .ne, .codeblock .ne {
-    color: #007020; }
-  pre .nf, code .nf, .codeblock .nf {
-    color: #06287e; }
-  pre .nl, code .nl, .codeblock .nl {
-    color: #002070;
-    font-weight: bold; }
-  pre .nn, code .nn, .codeblock .nn {
-    color: #0e84b5;
-    font-weight: bold; }
-  pre .nt, code .nt, .codeblock .nt {
-    color: #062873;
-    font-weight: bold; }
-  pre .nv, code .nv, .codeblock .nv {
-    color: #bb60d5; }
-  pre .ow, code .ow, .codeblock .ow {
-    color: #007020;
-    font-weight: bold; }
-  pre .w, code .w, .codeblock .w {
-    color: #bbbbbb; }
-  pre .mf, code .mf, .codeblock .mf {
-    color: #40a070; }
-  pre .mh, code .mh, .codeblock .mh {
-    color: #40a070; }
-  pre .mi, code .mi, .codeblock .mi {
-    color: #40a070; }
-  pre .mo, code .mo, .codeblock .mo {
-    color: #40a070; }
-  pre .sb, code .sb, .codeblock .sb {
-    color: #4070a0; }
-  pre .sc, code .sc, .codeblock .sc {
-    color: #4070a0; }
-  pre .sd, code .sd, .codeblock .sd {
-    color: #4070a0;
-    font-style: italic; }
-  pre .s2, code .s2, .codeblock .s2 {
-    color: #4070a0; }
-  pre .se, code .se, .codeblock .se {
-    color: #4070a0;
-    font-weight: bold; }
-  pre .sh, code .sh, .codeblock .sh {
-    color: #4070a0; }
-  pre .si, code .si, .codeblock .si {
-    color: #70a0d0;
-    font-style: italic; }
-  pre .sx, code .sx, .codeblock .sx {
-    color: #c65d09; }
-  pre .sr, code .sr, .codeblock .sr {
-    color: #235388; }
-  pre .s1, code .s1, .codeblock .s1 {
-    color: #4070a0; }
-  pre .ss, code .ss, .codeblock .ss {
-    color: #517918; }
-  pre .bp, code .bp, .codeblock .bp {
-    color: #007020; }
-  pre .vc, code .vc, .codeblock .vc {
-    color: #bb60d5; }
-  pre .vg, code .vg, .codeblock .vg {
-    color: #bb60d5; }
-  pre .vi, code .vi, .codeblock .vi {
-    color: #bb60d5; }
-  pre .il, code .il, .codeblock .il {
-    color: #40a070; }
-
-.dark {
-  background-color: #222;
-  color: #bbb; }
-
-:root {
-  --fg-font-color: black;
-  --theme-color: #666;
-  --theme-color-dim: #aaa;
-  --theme-color-dimmer: #bbb;
-  --theme-color-dimmest: #ccc;
-  --theme-color-dark: #666;
-  --theme-color-light: #666;
-  --link-color: #666;
-  --link-border-color: #666;
-  --hr-color: #444;
-  --main-background-color: #fff;
-  --main-color: black;
-  --dim-color: #333;
-  --dimmer-color: #999;
-  --dimmest-color: #bbb;
-  --menu-bottom-border-color: black;
-  --login-popup-background: #fbfbfb;
-  --content-background: #f8f8f8;
-  --content-background-transparent: rgba(248, 248, 248, 0);
-  --dim-background: #f0f0f0;
-  --dim-background-transparent: rgba(240, 240, 240, 0);
-  --text-background: #f9f9f9;
-  --spoiler-border: #aaa;
-  --background-even-background: #f8f8f8;
-  --project-card-border-color: #aaa;
-  --project-user-suggestions-background: #fff;
-  --project-user-suggestions-border-color: #ddd;
-  --notice-text-color: #fff;
-  --notice-unapproved-color: #b42222;
-  --notice-hidden-color: #b6b6b6;
-  --notice-hiatus-color: #aa7d30;
-  --notice-dead-color: #b42222;
-  --notice-lts-color: #43a52f;
-  --notice-lts-reqd-color: #aa7d30;
-  --notice-success-color: #43a52f;
-  --notice-warn-color: #aa7d30;
-  --notice-failure-color: #b42222;
-  --optionbar-border-color: #ccc;
-  --tab-background: #fff;
-  --tab-border-color: #d8d8d8;
-  --tab-button-background: #dfdfdf;
-  --tab-button-background-hover: #efefef;
-  --tab-button-background-current: #fff;
-  --form-check-background: #fafafc;
-  --form-check-border-color: #999;
-  --form-check-border-color-hover: #4c9ed9;
-  --form-text-background: #fff;
-  --form-text-background-active: #fafafc;
-  --form-text-border-color: #999;
-  --form-text-border-color-active: #4c9ed9;
-  --form-button-color: black;
-  --form-button-color-active: #4c9ed9;
-  --form-button-background: #fff;
-  --form-button-background-active: #f2f2f2;
-  --form-button-border-color: #ccc;
-  --form-button-inline-border-color: #999;
-  --form-error-color: #c61d24;
-  --landing-search-background: #f8f8f8;
-  --landing-search-background-hover: #fefeff;
-  --editor-toolbar-background: #fff;
-  --editor-toolbar-border-color: transparent;
-  --editor-toolbar-button-background: transparent;
-  --editor-toolbar-button-background-hover: #ddd;
-  --editor-toolbar-button-border-color: #ccc;
-  --post-blockquote-border-color: #ddd;
-  --forum-even-background: #f0f0f0;
-  --forum-thread-read-color: #555;
-  --forum-thread-read-link-color: #888;
-  --forum-post-author-color: #333;
-  --forum-diff-source-background: #fff;
-  --forum-diff-source-border-color: #999;
-  --forum-diff-replace-background: #adcef4;
-  --forum-diff-replace-border-color: #4787d1;
-  --forum-diff-delete-background: #e57979;
-  --forum-diff-delete-border-color: #c12626;
-  --forum-diff-insert-background: #96e579;
-  --forum-diff-insert-border-color: #5baa3f;
-  --card-background: #e8e8e8;
-  --card-background-hover: #f0f0f0;
-  --timeline-content-background: rgba(0, 0, 0, 0.2);
-  --irc-border-color: #ddd;
-  --irc-tab-current-shadow: 0px 0px 5px #bbb inset;
-  --irc-tab-close-button-color: #fff;
-  --irc-tab-close-button-background: #aaa;
-  --irc-nick-border-color: #ccc;
-  --irc-users-color: black;
-  --irc-users-background: #fff;
-  --irc-users-border-color: #ccc;
-  --irc-users-popout-background: #fff;
-  --irc-users-popout-border-color-left: #bbb;
-  --irc-users-popout-border-color-right: #ccc;
-  --code-line-number-color: #777;
-  --library-star-btn-background: #fff;
-  --library-star-btn-border-color: #999;
-  --library-star-btn-a-border-color: #aaa;
-  --library-star-btn-a-hover-background: #fafafa; }

src/buildscss/buildscss.go

@@ -2,94 +2,63 @@ package buildscss
 
 import (
 	"context"
-	"encoding/base64"
-	"fmt"
-	"os"
-	"path/filepath"
 
-	color "git.handmade.network/hmn/hmn/src/ansicolor"
-	"git.handmade.network/hmn/hmn/src/oops"
-	"git.handmade.network/hmn/hmn/src/website"
-	"github.com/spf13/cobra"
-	"github.com/wellington/go-libsass"
+	"git.handmade.network/hmn/hmn/src/config"
+	"git.handmade.network/hmn/hmn/src/jobs"
+	"git.handmade.network/hmn/hmn/src/logging"
+	"github.com/evanw/esbuild/pkg/api"
 )
 
-var compressed bool
+var ActiveServerPort uint16
 
-func init() {
-	libsass.RegisterSassFunc("base64($filename)", func(ctx context.Context, in libsass.SassValue) (*libsass.SassValue, error) {
-		var filename string
-		err := libsass.Unmarshal(in, &filename)
-		if err != nil {
-			return nil, err
-		}
-
-		fileBytes, err := os.ReadFile(filename)
-		if err != nil {
-			return nil, err
-		}
-
-		encoded, _ := libsass.Marshal(base64.StdEncoding.EncodeToString(fileBytes))
-		return &encoded, nil
-	})
-
-	buildCommand := &cobra.Command{
-		Use:   "buildscss",
-		Short: "Build the website CSS",
-		Run: func(cmd *cobra.Command, args []string) {
-			style := libsass.NESTED_STYLE
-			if compressed {
-				style = libsass.COMPRESSED_STYLE
-			}
-
-			err := compile("src/rawdata/scss/style.scss", "public/style.css", "light", style)
-			if err != nil {
-				fmt.Println(color.Bold + color.Red + "Failed to compile main SCSS." + color.Reset)
-				fmt.Println(err)
-				os.Exit(1)
-			}
-
-			for _, theme := range []string{"light", "dark"} {
-				err := compile("src/rawdata/scss/theme.scss", fmt.Sprintf("public/themes/%s/theme.css", theme), theme, style)
-				if err != nil {
-					fmt.Println(color.Bold + color.Red + "Failed to compile theme SCSS." + color.Reset)
-					fmt.Println(err)
-					os.Exit(1)
-				}
-			}
+func RunServer(ctx context.Context) jobs.Job {
+	job := jobs.New()
+	if config.Config.Env != config.Dev {
+		job.Done()
+		return job
+	}
+	logger := logging.ExtractLogger(ctx).With().Str("module", "EsBuild").Logger()
+	esCtx, ctxErr := BuildContext()
+	if ctxErr != nil {
+		panic(ctxErr)
+	}
+	logger.Info().Msg("Starting esbuild server and watcher")
+	err := esCtx.Watch(api.WatchOptions{})
+	serverResult, err := esCtx.Serve(api.ServeOptions{
+		Port:     config.Config.EsBuild.Port,
+		Servedir: "./",
+		OnRequest: func(args api.ServeOnRequestArgs) {
+			logger.Info().Interface("args", args).Msg("Response from esbuild server")
 		},
+	})
+	if err != nil {
+		panic(err)
 	}
-	buildCommand.Flags().BoolVar(&compressed, "compressed", false, "Minify the output CSS")
+	ActiveServerPort = serverResult.Port
+	go func() {
+		<-ctx.Done()
+		logger.Info().Msg("Shutting down esbuild server and watcher")
+		esCtx.Dispose()
+		job.Done()
+	}()
 
-	website.WebsiteCommand.AddCommand(buildCommand)
+	return job
 }
 
-func compile(inpath, outpath string, theme string, style int) error {
-	err := os.MkdirAll(filepath.Dir(outpath), 0755)
-	if err != nil {
-		panic(oops.New(err, "failed to create directory for CSS file"))
-	}
-
-	outfile, err := os.OpenFile(outpath, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0644)
-	if err != nil {
-		panic(oops.New(err, "failed to open CSS file for writing"))
-	}
-	defer outfile.Close()
-
-	infile, err := os.Open(inpath)
-	if err != nil {
-		panic(oops.New(err, "failed to open SCSS file"))
-	}
-	compiler, err := libsass.New(outfile, infile,
-		libsass.IncludePaths([]string{
-			"src/rawdata/scss",
-			fmt.Sprintf("src/rawdata/scss/themes/%s", theme),
-		}),
-		libsass.OutputStyle(style),
-	)
-	if err != nil {
-		panic(oops.New(err, "failed to create SCSS compiler"))
-	}
-
-	return compiler.Run()
+func BuildContext() (api.BuildContext, *api.ContextError) {
+	return api.Context(api.BuildOptions{
+		EntryPoints: []string{
+			"src/rawdata/scss/style.css",
+		},
+		Outbase:  "src/rawdata/scss",
+		Outdir:   "public",
+		External: []string{"/public/*"},
+		Bundle:   true,
+		Write:    true,
+		Engines: []api.Engine{
+			{Name: api.EngineChrome, Version: "109"},
+			{Name: api.EngineFirefox, Version: "109"},
+			{Name: api.EngineSafari, Version: "12"},
+		},
+	})
 }

src/buildscss/cmd/cmd.go

@@ -0,0 +1,39 @@
+package cmd
+
+import (
+	"fmt"
+	"os"
+
+	"git.handmade.network/hmn/hmn/src/buildscss"
+	"git.handmade.network/hmn/hmn/src/logging"
+	"git.handmade.network/hmn/hmn/src/website"
+	"github.com/spf13/cobra"
+)
+
+func init() {
+	buildCommand := &cobra.Command{
+		Use:   "buildscss",
+		Short: "Build the website CSS",
+		Run: func(cmd *cobra.Command, args []string) {
+			ctx, err := buildscss.BuildContext()
+			if err != nil {
+				fmt.Println(err)
+				os.Exit(1)
+			}
+
+			res := ctx.Rebuild()
+			outputFilenames := make([]string, 0)
+			for _, o := range res.OutputFiles {
+				outputFilenames = append(outputFilenames, o.Path)
+			}
+			logging.Info().
+				Interface("Errors", res.Errors).
+				Interface("Warnings", res.Warnings).
+				Msg("Ran esbuild")
+			if len(outputFilenames) > 0 {
+				logging.Info().Interface("Files", outputFilenames).Msg("Wrote files")
+			}
+		},
+	}
+	website.WebsiteCommand.AddCommand(buildCommand)
+}

src/calendar/calendar.go

@@ -207,7 +207,7 @@ func MonitorCalendars(ctx context.Context) jobs.Job {
 				if err != nil {
 					logging.Error().Err(err).Msg("Panicked in MonitorCalendars")
 				}
-				monitorTimer.Reset(time.Minute)
+				monitorTimer.Reset(60 * time.Minute)
 			case <-ctx.Done():
 				return
 			}

src/config/config.go.example

@@ -91,4 +91,7 @@ var Config = HMNConfig{
         FFMpegPath: "", // Will not generate asset video thumbnails if ffmpeg is not specified
         CPULimitPath: "", // Not mandatory. FFMpeg will not limited if this is not provided
     },
+	EsBuild: EsBuildConfig{
+		Port: 9004,
+	},
 }

src/config/types.go

@@ -32,7 +32,8 @@ type HMNConfig struct {
 	EpisodeGuide      EpisodeGuide
 	DevConfig         DevConfig
 	PreviewGeneration PreviewGenerationConfig
-	Calendars      []CalendarSource
+	Calendars         []CalendarSource
+	EsBuild           EsBuildConfig
 }
 
 type PostgresConfig struct {
@@ -104,7 +105,7 @@ type MatrixConfig struct {
 
 type CalendarSource struct {
 	Name string
-	Url string
+	Url  string
 }
 
 type EpisodeGuide struct {
@@ -126,6 +127,10 @@ type PreviewGenerationConfig struct {
 	CPULimitPath string
 }
 
+type EsBuildConfig struct {
+	Port uint16
+}
+
 func init() {
 	if Config.EpisodeGuide.Projects == nil {
 		Config.EpisodeGuide.Projects = make(map[string]string)

src/db/db.go

@@ -62,8 +62,8 @@ func NewConnWithConfig(cfg config.PostgresConfig) *pgx.Conn {
 	pgcfg, err := pgx.ParseConfig(cfg.DSN())
 
 	pgcfg.Tracer = &tracelog.TraceLog{
-		zerologadapter.NewLogger(log.Logger),
-		cfg.LogLevel,
+		Logger:   zerologadapter.NewLogger(log.Logger),
+		LogLevel: cfg.LogLevel,
 	}
 
 	conn, err := pgx.ConnectConfig(context.Background(), pgcfg)
@@ -88,8 +88,8 @@ func NewConnPoolWithConfig(cfg config.PostgresConfig) *pgxpool.Pool {
 	pgcfg.MinConns = cfg.MinConn
 	pgcfg.MaxConns = cfg.MaxConn
 	pgcfg.ConnConfig.Tracer = &tracelog.TraceLog{
-		zerologadapter.NewLogger(log.Logger),
-		cfg.LogLevel,
+		Logger:   zerologadapter.NewLogger(log.Logger),
+		LogLevel: cfg.LogLevel,
 	}
 
 	conn, err := pgxpool.NewWithConfig(context.Background(), pgcfg)

src/embed/embed.go

@@ -129,7 +129,7 @@ func FetchEmbed(ctx context.Context, urlStr string, httpClient *http.Client, max
 	filename := ""
 	u, err := url.Parse(urlStr)
 	if err == nil {
-		lastSlash := utils.IntMax(strings.LastIndex(u.Path, "/"), 0)
+		lastSlash := utils.Max(strings.LastIndex(u.Path, "/"), 0)
 		filename = u.Path[lastSlash:]
 	}
 	result := Embed{

src/hmndata/project_helper.go

@@ -23,6 +23,7 @@ type ProjectsQuery struct {
 	// are generally visible to all users.
 	Lifecycles    []models.ProjectLifecycle // If empty, defaults to visible lifecycles. Do not conflate this with permissions; those are checked separately.
 	Types         ProjectTypeQuery          // bitfield
+	FeaturedOnly  bool
 	IncludeHidden bool
 
 	// Ignored when using FetchProject
@@ -38,8 +39,9 @@ type ProjectsQuery struct {
 
 type ProjectAndStuff struct {
 	Project        models.Project
-	LogoLightAsset *models.Asset `db:"logolight_asset"`
-	LogoDarkAsset  *models.Asset `db:"logodark_asset"`
+	LogoLightAsset *models.Asset
+	LogoDarkAsset  *models.Asset
+	HeaderImage    *models.Asset
 	Owners         []*models.User
 	Tag            *models.Tag
 }
@@ -72,6 +74,7 @@ func FetchProjects(
 		Project        models.Project `db:"project"`
 		LogoLightAsset *models.Asset  `db:"logolight_asset"`
 		LogoDarkAsset  *models.Asset  `db:"logodark_asset"`
+		HeaderAsset    *models.Asset  `db:"header_asset"`
 		Tag            *models.Tag    `db:"tag"`
 	}
 
@@ -86,6 +89,7 @@ func FetchProjects(
 			project
 			LEFT JOIN asset AS logolight_asset ON logolight_asset.id = project.logolight_asset_id
 			LEFT JOIN asset AS logodark_asset ON logodark_asset.id = project.logodark_asset_id
+			LEFT JOIN asset AS header_asset ON header_asset.id = project.header_asset_id
 			LEFT JOIN tag ON project.tag = tag.id
 	`)
 	if len(q.OwnerIDs) > 0 {
@@ -130,6 +134,9 @@ func FetchProjects(
 		}
 		qb.Add(`)`)
 	}
+	if q.FeaturedOnly {
+		qb.Add(`AND project.featured`)
+	}
 	if !q.IncludeHidden {
 		qb.Add(`AND NOT project.hidden`)
 	}
@@ -219,6 +226,7 @@ func FetchProjects(
 				Project:        p.Project,
 				LogoLightAsset: p.LogoLightAsset,
 				LogoDarkAsset:  p.LogoDarkAsset,
+				HeaderImage:    p.HeaderAsset,
 				Owners:         owners,
 				Tag:            p.Tag,
 			})

src/hmndata/snippet_helper.go

@@ -16,6 +16,8 @@ type SnippetQuery struct {
 	Tags              []int
 	DiscordMessageIDs []string
 
+	FeaturedOnly bool
+
 	Limit, Offset int // if empty, no pagination
 }
 
@@ -44,6 +46,8 @@ func FetchSnippets(
 	}
 	defer tx.Rollback(ctx)
 
+	isFiltering := len(q.IDs) > 0 || len(q.Tags) > 0 || len(q.ProjectIDs) > 0
+
 	var tagSnippetIDs []int
 	if len(q.Tags) > 0 {
 		// Get snippet IDs with this tag, then use that in the main query
@@ -62,11 +66,6 @@ func FetchSnippets(
 			return nil, oops.New(err, "failed to get snippet IDs for tag")
 		}
 
-		// special early-out: no snippets found for these tags at all
-		if len(snippetIDs) == 0 {
-			return nil, nil
-		}
-
 		tagSnippetIDs = snippetIDs
 	}
 
@@ -87,11 +86,6 @@ func FetchSnippets(
 			return nil, oops.New(err, "failed to get snippet IDs for tag")
 		}
 
-		// special early-out: no snippets found for these projects at all
-		if len(snippetIDs) == 0 {
-			return nil, nil
-		}
-
 		projectSnippetIDs = snippetIDs
 	}
 
@@ -109,17 +103,24 @@ func FetchSnippets(
 			TRUE
 		`,
 	)
-	if len(q.IDs) > 0 {
-		qb.Add(`AND snippet.id = ANY ($?)`, q.IDs)
-	}
-	if len(tagSnippetIDs) > 0 {
-		qb.Add(`AND snippet.id = ANY ($?)`, tagSnippetIDs)
-	}
-	if len(projectSnippetIDs) > 0 {
-		qb.Add(`AND snippet.id = ANY ($?)`, projectSnippetIDs)
-	}
-	if len(q.OwnerIDs) > 0 {
-		qb.Add(`AND snippet.owner_id = ANY ($?)`, q.OwnerIDs)
+	allSnippetIDs := make([]int, 0, len(q.IDs)+len(tagSnippetIDs)+len(projectSnippetIDs))
+	allSnippetIDs = append(allSnippetIDs, q.IDs...)
+	allSnippetIDs = append(allSnippetIDs, tagSnippetIDs...)
+	allSnippetIDs = append(allSnippetIDs, projectSnippetIDs...)
+	if isFiltering && len(allSnippetIDs) == 0 {
+		// We already managed to filter out all snippets, and all further
+		// parts of this query are more filters, so we can just fail everything
+		// else from right here.
+		qb.Add(`AND FALSE`)
+	} else if len(allSnippetIDs) > 0 && len(q.OwnerIDs) > 0 {
+		qb.Add(`AND (snippet.id = ANY ($?) OR snippet.owner_id = ANY ($?))`, allSnippetIDs, q.OwnerIDs)
+	} else {
+		if len(allSnippetIDs) > 0 {
+			qb.Add(`AND snippet.id = ANY ($?)`, allSnippetIDs)
+		}
+		if len(q.OwnerIDs) > 0 {
+			qb.Add(`AND snippet.owner_id = ANY ($?)`, q.OwnerIDs)
+		}
 	}
 	if len(q.DiscordMessageIDs) > 0 {
 		qb.Add(`AND snippet.discord_message_id = ANY ($?)`, q.DiscordMessageIDs)

src/hmndata/threads_and_posts_helper.go

@@ -375,11 +375,15 @@ func FetchPosts(
 		models.VisibleProjectLifecycles,
 		models.HMNProjectID,
 	)
-	if len(q.ProjectIDs) > 0 {
-		qb.Add(`AND project.id = ANY ($?)`, q.ProjectIDs)
-	}
-	if len(q.UserIDs) > 0 {
-		qb.Add(`AND post.author_id = ANY ($?)`, q.UserIDs)
+	if len(q.ProjectIDs) > 0 && len(q.UserIDs) > 0 {
+		qb.Add(`AND (project.id = ANY($?) OR post.author_id = ANY($?))`, q.ProjectIDs, q.UserIDs)
+	} else {
+		if len(q.ProjectIDs) > 0 {
+			qb.Add(`AND project.id = ANY ($?)`, q.ProjectIDs)
+		}
+		if len(q.UserIDs) > 0 {
+			qb.Add(`AND post.author_id = ANY ($?)`, q.UserIDs)
+		}
 	}
 	if len(q.ThreadIDs) > 0 {
 		qb.Add(`AND post.thread_id = ANY ($?)`, q.ThreadIDs)

src/hmndata/twitch.go

@@ -8,6 +8,7 @@ import (
 	"git.handmade.network/hmn/hmn/src/db"
 	"git.handmade.network/hmn/hmn/src/models"
 	"git.handmade.network/hmn/hmn/src/oops"
+	"git.handmade.network/hmn/hmn/src/perf"
 )
 
 const InvalidUserTwitchID = "INVALID_USER"
@@ -21,27 +22,58 @@ type TwitchStreamer struct {
 
 var twitchRegex = regexp.MustCompile(`twitch\.tv/(?P<login>[^/]+)$`)
 
-func FetchTwitchStreamers(ctx context.Context, dbConn db.ConnOrTx) ([]TwitchStreamer, error) {
-	dbStreamers, err := db.Query[models.Link](ctx, dbConn,
+type TwitchStreamersQuery struct {
+	UserIDs    []int
+	ProjectIDs []int
+}
+
+func FetchTwitchStreamers(ctx context.Context, dbConn db.ConnOrTx, q TwitchStreamersQuery) ([]TwitchStreamer, error) {
+	perf := perf.ExtractPerf(ctx)
+	perf.StartBlock("SQL", "Fetch twitch streamers")
+	defer perf.EndBlock()
+	var qb db.QueryBuilder
+	qb.Add(
 		`
 		SELECT $columns{link}
 		FROM
 			link
 			LEFT JOIN hmn_user AS link_owner ON link_owner.id = link.user_id
 		WHERE
-			url ~* 'twitch\.tv/([^/]+)$' AND
-			((link.user_id IS NOT NULL AND link_owner.status = $1) OR (link.project_id IS NOT NULL AND
+			TRUE
+		`,
+	)
+	if len(q.UserIDs) > 0 && len(q.ProjectIDs) > 0 {
+		qb.Add(
+			`AND (link.user_id = ANY ($?) OR link.project_id = ANY ($?))`,
+			q.UserIDs,
+			q.ProjectIDs,
+		)
+	} else {
+		if len(q.UserIDs) > 0 {
+			qb.Add(`AND link.user_id = ANY ($?)`, q.UserIDs)
+		}
+		if len(q.ProjectIDs) > 0 {
+			qb.Add(`AND link.project_id = ANY ($?)`, q.ProjectIDs)
+		}
+	}
+
+	qb.Add(
+		`
+			AND url ~* 'twitch\.tv/([^/]+)$'
+			AND ((link.user_id IS NOT NULL AND link_owner.status = $?) OR (link.project_id IS NOT NULL AND
 			(SELECT COUNT(*)
 			FROM
 				user_project AS hup
 				JOIN hmn_user AS project_owner ON project_owner.id = hup.user_id
 			WHERE
 				hup.project_id = link.project_id AND
-				project_owner.status != $1
+				project_owner.status != $?
 			) = 0))
 		`,
 		models.UserStatusApproved,
+		models.UserStatusApproved,
 	)
+	dbStreamers, err := db.Query[models.Link](ctx, dbConn, qb.String(), qb.Args()...)
 	if err != nil {
 		return nil, oops.New(err, "failed to fetch twitch links")
 	}

src/hmnurl/hmnurl_test.go

@@ -40,10 +40,6 @@ func TestHomepage(t *testing.T) {
 	AssertSubdomain(t, hero.BuildHomepage(), "hero")
 }
 
-func TestShowcase(t *testing.T) {
-	AssertRegexMatch(t, BuildShowcase(), RegexShowcase, nil)
-}
-
 func TestWhenIsIt(t *testing.T) {
 	AssertRegexMatch(t, BuildWhenIsIt(), RegexWhenIsIt, nil)
 }
@@ -96,8 +92,6 @@ func TestStaticPages(t *testing.T) {
 	AssertRegexMatch(t, BuildManifesto(), RegexManifesto, nil)
 	AssertRegexMatch(t, BuildAbout(), RegexAbout, nil)
 	AssertRegexMatch(t, BuildFoundation(), RegexFoundation, nil)
-	AssertRegexMatch(t, BuildStaffRole("test"), RegexStaffRole, nil)
-	AssertRegexMatch(t, BuildStaffRolesIndex(), RegexStaffRolesIndex, nil)
 	AssertRegexMatch(t, BuildCommunicationGuidelines(), RegexCommunicationGuidelines, nil)
 	AssertRegexMatch(t, BuildContactPage(), RegexContactPage, nil)
 	AssertRegexMatch(t, BuildMonthlyUpdatePolicy(), RegexMonthlyUpdatePolicy, nil)
@@ -459,7 +453,7 @@ func TestTimeMachineFormDone(t *testing.T) {
 }
 
 func TestNewsletterSignup(t *testing.T) {
-	AssertRegexMatch(t, BuildAPINewsletterSignup(), RegexNewsletterSignup, nil)
+	AssertRegexMatch(t, BuildAPINewsletterSignup(), RegexAPINewsletterSignup, nil)
 	AssertSubdomain(t, BuildAPINewsletterSignup(), "")
 }
 

src/hmnurl/urls.go

@@ -28,13 +28,6 @@ func (c *UrlContext) BuildHomepage() string {
 	return c.Url("/", nil)
 }
 
-var RegexShowcase = regexp.MustCompile("^/showcase$")
-
-func BuildShowcase() string {
-	defer CatchPanic()
-	return Url("/showcase", nil)
-}
-
 var RegexWhenIsIt = regexp.MustCompile("^/whenisit$")
 
 func BuildWhenIsIt() string {
@@ -347,24 +340,6 @@ func BuildConferences() string {
 	return Url("/conferences", nil)
 }
 
-/*
-* Volunteer/Staff Roles
- */
-
-var RegexStaffRolesIndex = regexp.MustCompile(`^/roles$`)
-
-func BuildStaffRolesIndex() string {
-	defer CatchPanic()
-	return Url("/roles", nil)
-}
-
-var RegexStaffRole = regexp.MustCompile(`^/roles/(?P<slug>[^/]+)$`)
-
-func BuildStaffRole(slug string) string {
-	defer CatchPanic()
-	return Url(fmt.Sprintf("/roles/%s", slug), nil)
-}
-
 /*
 * User
  */
@@ -649,6 +624,12 @@ func BuildEducationRerender() string {
 	return Url("/education/rerender", nil)
 }
 
+/*
+ * Style test
+ */
+
+var RegexStyleTest = regexp.MustCompile(`^/debug/styles$`)
+
 /*
 * Forums
  */
@@ -956,6 +937,28 @@ func BuildTwitchEventSubCallback() string {
 
 var RegexTwitchDebugPage = regexp.MustCompile("^/twitch_debug$")
 
+/*
+* Following
+ */
+
+var RegexFollowingTest = regexp.MustCompile("^/following$")
+
+func BuildFollowingTest() string {
+	return Url("/following", nil)
+}
+
+var RegexFollowUser = regexp.MustCompile("^/follow/user$")
+
+func BuildFollowUser() string {
+	return Url("/follow/user", nil)
+}
+
+var RegexFollowProject = regexp.MustCompile("^/follow/project$")
+
+func BuildFollowProject() string {
+	return Url("/follow/project", nil)
+}
+
 /*
 * User assets
  */
@@ -993,6 +996,13 @@ func BuildS3Asset(s3key string) string {
 	return res
 }
 
+var RegexEsBuild = regexp.MustCompile("^/esbuild$")
+
+func BuildEsBuild() string {
+	defer CatchPanic()
+	return Url("/esbuild", nil)
+}
+
 var RegexPublic = regexp.MustCompile("^/public/.+$")
 
 func BuildPublic(filepath string, cachebust bool) string {

src/migration/migrations/2024-06-01T020118Z_AddHeaderImage.go

@@ -0,0 +1,47 @@
+package migrations
+
+import (
+	"context"
+	"time"
+
+	"git.handmade.network/hmn/hmn/src/migration/types"
+	"github.com/jackc/pgx/v5"
+)
+
+func init() {
+	registerMigration(AddHeaderImage{})
+}
+
+type AddHeaderImage struct{}
+
+func (m AddHeaderImage) Version() types.MigrationVersion {
+	return types.MigrationVersion(time.Date(2024, 6, 1, 2, 1, 18, 0, time.UTC))
+}
+
+func (m AddHeaderImage) Name() string {
+	return "AddHeaderImage"
+}
+
+func (m AddHeaderImage) Description() string {
+	return "Adds a header image to projects"
+}
+
+func (m AddHeaderImage) Up(ctx context.Context, tx pgx.Tx) error {
+	_, err := tx.Exec(ctx,
+		`
+		ALTER TABLE project
+			ADD COLUMN header_asset_id UUID REFERENCES asset (id) ON DELETE SET NULL;
+		`,
+	)
+	return err
+}
+
+func (m AddHeaderImage) Down(ctx context.Context, tx pgx.Tx) error {
+	_, err := tx.Exec(ctx,
+		`
+		ALTER TABLE project
+			DROP COLUMN header_asset_id;
+		`,
+	)
+	return err
+}

src/migration/migrations/2024-06-18T022536Z_RemoveDarkTheme.go

@@ -0,0 +1,47 @@
+package migrations
+
+import (
+	"context"
+	"time"
+
+	"git.handmade.network/hmn/hmn/src/migration/types"
+	"github.com/jackc/pgx/v5"
+)
+
+func init() {
+	registerMigration(RemoveDarkTheme{})
+}
+
+type RemoveDarkTheme struct{}
+
+func (m RemoveDarkTheme) Version() types.MigrationVersion {
+	return types.MigrationVersion(time.Date(2024, 6, 18, 2, 25, 36, 0, time.UTC))
+}
+
+func (m RemoveDarkTheme) Name() string {
+	return "RemoveDarkTheme"
+}
+
+func (m RemoveDarkTheme) Description() string {
+	return "Remove the darktheme field from users"
+}
+
+func (m RemoveDarkTheme) Up(ctx context.Context, tx pgx.Tx) error {
+	_, err := tx.Exec(ctx,
+		`
+		ALTER TABLE hmn_user
+			DROP COLUMN darktheme;
+		`,
+	)
+	return err
+}
+
+func (m RemoveDarkTheme) Down(ctx context.Context, tx pgx.Tx) error {
+	_, err := tx.Exec(ctx,
+		`
+		ALTER TABLE hmn_user
+			ADD COLUMN darktheme BOOLEAN NOT NULL DEFAULT FALSE;
+		`,
+	)
+	return err
+}

src/migration/migrations/2024-06-20T194134Z_AddFollower.go

@@ -0,0 +1,57 @@
+package migrations
+
+import (
+	"context"
+	"time"
+
+	"git.handmade.network/hmn/hmn/src/migration/types"
+	"github.com/jackc/pgx/v5"
+)
+
+func init() {
+	registerMigration(AddFollower{})
+}
+
+type AddFollower struct{}
+
+func (m AddFollower) Version() types.MigrationVersion {
+	return types.MigrationVersion(time.Date(2024, 6, 20, 19, 41, 34, 0, time.UTC))
+}
+
+func (m AddFollower) Name() string {
+	return "AddFollower"
+}
+
+func (m AddFollower) Description() string {
+	return "Add follower table"
+}
+
+func (m AddFollower) Up(ctx context.Context, tx pgx.Tx) error {
+	_, err := tx.Exec(ctx,
+		`
+		CREATE TABLE follower (
+			user_id int NOT NULL,
+			following_user_id int REFERENCES hmn_user (id) ON DELETE CASCADE,
+			following_project_id int REFERENCES project (id) ON DELETE CASCADE,
+			CONSTRAINT user_id_or_project_id CHECK ((following_user_id IS NOT NULL AND following_project_id IS NULL) OR (following_user_id IS NULL AND following_project_id IS NOT NULL))
+		);
+
+		CREATE INDEX follower_user_id ON follower(user_id);
+		CREATE UNIQUE INDEX follower_following_user ON follower (user_id, following_user_id);
+		CREATE UNIQUE INDEX follower_following_project ON follower (user_id, following_project_id);
+		`,
+	)
+	return err
+}
+
+func (m AddFollower) Down(ctx context.Context, tx pgx.Tx) error {
+	_, err := tx.Exec(ctx,
+		`
+		DROP INDEX follower_following_user;
+		DROP INDEX follower_following_project;
+		DROP INDEX follower_user_id;
+		DROP TABLE follower;
+		`,
+	)
+	return err
+}

src/migration/seed.go

@@ -289,7 +289,7 @@ func seedProject(ctx context.Context, tx pgx.Tx, input models.Project, owners []
 		input.ForumEnabled, input.BlogEnabled,
 		utils.OrDefault(input.DateCreated, time.Now()),
 	)
-	latestProjectId = utils.IntMax(latestProjectId, project.ID)
+	latestProjectId = utils.Max(latestProjectId, project.ID)
 
 	// Create forum (even if unused)
 	forum := db.MustQueryOne[models.Subforum](ctx, tx,

src/models/follow.go

@@ -0,0 +1,7 @@
+package models
+
+type Follow struct {
+	UserID             int  `db:"user_id"`
+	FollowingUserID    *int `db:"following_user_id"`
+	FollowingProjectID *int `db:"following_project_id"`
+}

src/models/subforum.go

@@ -5,7 +5,6 @@ import (
 
 	"git.handmade.network/hmn/hmn/src/db"
 	"git.handmade.network/hmn/hmn/src/oops"
-	"github.com/jackc/pgx/v5/pgxpool"
 )
 
 type Subforum struct {
@@ -43,7 +42,7 @@ func (node *SubforumTreeNode) GetLineage() []*Subforum {
 	return result
 }
 
-func GetFullSubforumTree(ctx context.Context, conn *pgxpool.Pool) SubforumTree {
+func GetFullSubforumTree(ctx context.Context, conn db.ConnOrTx) SubforumTree {
 	subforums, err := db.Query[Subforum](ctx, conn,
 		`
 		SELECT $columns

src/models/thread.go

@@ -12,6 +12,12 @@ const (
 	ThreadTypePersonalBlogPost
 )
 
+var ValidThreadTypes = []ThreadType{
+	ThreadTypeProjectBlogPost,
+	ThreadTypeForumPost,
+	ThreadTypePersonalBlogPost,
+}
+
 type Thread struct {
 	ID int `db:"id"`
 

src/models/user.go

@@ -38,8 +38,7 @@ type User struct {
 	Signature     string     `db:"signature"`
 	AvatarAssetID *uuid.UUID `db:"avatar_asset_id"`
 
-	DarkTheme bool   `db:"darktheme"`
-	Timezone  string `db:"timezone"`
+	Timezone string `db:"timezone"`
 
 	ShowEmail bool `db:"showemail"`
 

src/perf/perf.go

@@ -174,7 +174,8 @@ const PerfContextKey = "HMNPerf"
 func ExtractPerf(ctx context.Context) *RequestPerf {
 	iperf := ctx.Value(PerfContextKey)
 	if iperf == nil {
-		return nil
+		// NOTE(asaf): Returning a dummy perf so we don't crash if it's missing
+		return MakeNewRequestPerf("PERF MISSING", "PERF MISSING", "PERF MISSING")
 	}
 	return iperf.(*RequestPerf)
 }

src/rawdata/scss/_admin.scss

@@ -1,23 +0,0 @@
-.unapproved-project {
-  border-bottom: 1px solid transparent;
-  padding: 10px;
-  padding-bottom: 20px;
-
-  &.hidden-project {
-    background: -moz-linear-gradient(left,      rgba(132,26,26,0.4) 0%,rgba(132,26,26,0.1) 15%, rgba(132,26,26,0.0) 50%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(left,   rgba(132,26,26,0.4) 0%,rgba(132,26,26,0.1) 15%, rgba(132,26,26,0.0) 50%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to right,       rgba(132,26,26,0.4) 0%,rgba(132,26,26,0.1) 15%, rgba(132,26,26,0.0) 50%); /*  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  }
-
-  &:last-child {
-    border-bottom-width: 0px;
-  }
-}
-
-.hidden-project-tag {
-  color:red;
-}
-
-a.new-user {
-  display:block;
-}

src/rawdata/scss/_authors.scss

@@ -1,70 +0,0 @@
-.userlist {
-  text-align:center;
-  width:100%;
-  margin:0px auto;
-  padding-top:30px;
-  position:relative;
-  line-height:0em;
-
-  .user {
-    margin:5px;
-    display:inline-block;
-    height:200px;
-    max-height:180px;
-    text-align:left;
-    position:relative;
-    width:296px;
-    border-radius:3px;
-    line-height:1.4em;
-    overflow:hidden;
-    box-shadow:0px 2px 5px rgba(0,0,0,0.20);
-
-    top:0px;
-    transition: box-shadow 0.2s, background-color 0.2s;
-
-    &:hover {
-      box-shadow:0px 3px 7px rgba(0,0,0,0.20);
-    }
-
-    table {
-      /* Border and background color given by theme */
-      border:1px solid transparent;
-      width:100%;
-      height:100%;
-    }
-
-    .bottom {
-      transition: background-color 0.2s;
-    }
-
-    td {
-      vertical-align:top;
-
-      &.avatar {
-        width:100px;
-        height:80px;
-      }
-    }
-
-    .name {
-      text-align:left;
-
-      .username {
-        vertical-align:middle;
-      }
-    }
-
-    .avatar .image {
-      display:block;
-      float:left;
-      width:80px;
-      height:80px;
-      background-size:cover;
-      margin-right:10px;
-    }
-
-    .bio {
-      padding:5px;
-    }
-  }
-}

src/rawdata/scss/_content.scss

@@ -1,186 +0,0 @@
-strong {
-  font-weight: 500;
-}
-
-.text {
-  @include usevar(background-color, text-background);
-}
-
-.underline {
-  text-decoration:underline;
-}
-
-.monospace {
-  font-family: $monospace-fonts;
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 0.2em 0 0.05em;
-  border-radius: 3px;
-
-  &::before, &::after {
-    content: "\00a0";
-    letter-spacing: -0.2em;
-  }
-}
-
-.center {
-  text-align: center;
-}
-
-.right {
-  text-align: right;
-}
-
-.left {
-  text-align: left;
-}
-
-.justify {
-  text-align:justify;
-  -webkit-hyphens:manual;
-  -moz-hyphens:manual;
-  -ms-hyphens:manual;
-  hyphens:manual;
-}
-
-.spoiler {
-  @include usevar(border-color, spoiler-border);
-
-  border-width: 1px;
-  border-style: dashed;
-  color: transparent;
-
-  &::selection {
-    color: white;
-    background-color: black;
-  }
-}
-
-blockquote {
-  @extend .b--dimmest;
-  @extend .ml2, .pl2, .mr0;
-  @extend .bl;
-
-  .quotewho {
-    line-height: 2em;
-
-    &::after {
-      content: " said:";
-    }
-  }
-}
-
-pre {
-  font-family: $monospace-fonts;
-}
-
-.post-content {
-  * {
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  h1 {
-    font-size: 2rem;
-  }
-
-  h2 {
-    font-size: 1.5rem;
-  }
-
-  h3 {
-    font-size: 1.25rem;
-  }
-
-  h4 {
-    font-size: 1rem;
-  }
-
-  h5 {
-    font-size: 0.8rem;
-  }
-
-  h1, h2, h3, h4, h5 {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-
-  li:not(:last-child) {
-    margin-bottom: 0.2em;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  hr {
-    @extend .mh3;
-  }
-
-  div.code {
-    @extend .b--dimmer;
-
-    max-width: 100%;
-    max-height: 20em;
-    max-height: 80vh;
-    overflow: auto;
-    -moz-tab-size: 4;
-    tab-size: 4;
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  div + br,
-  blockquote + br,
-  ul + br,
-  ol + br,
-  {
-    display: none;
-  }
-
-  table {
-    @extend .mv2;
-  }
-
-  th, td {
-    @extend .ph2, .pv1;
-    @extend .ba, .b--dimmest;
-  }
-
-  code {
-    @extend .bg--dim;
-    @extend .br2;
-
-    padding: .2em 0;
-    white-space: nowrap;
-
-    &::before, &::after {
-      content: "\00a0";
-      letter-spacing: -0.2em;
-      display: inline-block;
-    }
-  }
-
-  pre > code, pre.hmn-code {
-    @extend .bg--dim;
-    @extend .br2;
-
-    padding: 0.7em;
-    overflow-x: auto;
-  }
-}
-
-figure {
-  @extend .mh0, .mv2, .mv3-ns, .pa2, .pa3-ns, .bg--dim, .br3;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 0;
-
-  figcaption {
-    @extend .pv1, .pv2-ns;
-  }
-}

src/rawdata/scss/_core.scss

@@ -1,834 +0,0 @@
-// Global variables
-$input-padding: 0.3rem;
-
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none;   /* Chrome/Safari/Opera */
-  -khtml-user-select: none;    /* Konqueror */
-  -moz-user-select: none;      /* Firefox */
-  -ms-user-select: none;       /* IE/Edge */
-  user-select: none;           /* non-prefixed version, currently */
-}
-
-* {
-  box-sizing: border-box;
-}
-
-br {
-  border-style: none; // why, IE...
-}
-
-body {
-  @include usevar(background-color, main-background-color);
-  @include usevar(color, main-color);
-
-  font-family: "Fira Sans", sans-serif;
-  background-size: cover;
-  min-height: 100vh;
-  box-sizing: border-box;
-  font-size: px2rem(14px);
-  line-height: 1.5;
-  font-weight: 400;
-}
-
-a, .link {
-  @include usevar(color, link-color);
-  @include usevar(border-bottom-color, link-border-color);
-
-  border-bottom: none;
-  text-decoration: none;
-
-  &:hover {
-    /* text-decoration:underline; */
-  }
-
-  &.external::after {
-    font-family: "icons";
-    content:" 1";
-    vertical-align:middle;
-  }
-}
-
-ol {
-  list-style-type: decimal;
-}
-
-ul {
-  list-style-type: circle;
-  padding: 0;
-  margin: 0;
-}
-
-.list-none {
-  list-style-type: none;
-}
-
-li {
-  padding: 0;
-  margin: 0;
-  padding-left: 5px;
-  margin-left: 15px;
-}
-
-h1, h2, h3, h4, h5 {
-  font-weight: 500;
-  margin: 0;
-  margin-bottom: 0.5rem;
-  font-size: 1.5rem;
-  line-height: 1.25em;
-}
-
-strong {
-  font-weight: 600;
-}
-
-em {
-  font-style: italic;
-}
-
-p {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-.p-spaced p {
-  $spacing: 0.6em;
-
-  &:not(:first-child) {
-    margin-top: $spacing;
-  }
-  
-  &:not(:last-child) {
-    margin-bottom: $spacing;
-  }
-}
-
-table {
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-th, td {
-  @include usevar(color, fg-font-color);
-}
-
-td {
-  vertical-align:baseline;
-}
-
-hr {
-  @include usevar(border-top-color, hr-color);
-  @extend .mv3;
-
-  border-width: 1px 0 0;
-  border-top-style: solid;
-}
-
-$monospace-fonts: "Fira Mono", monospace;
-
-.mono {
-  font-family: $monospace-fonts;
-}
-
-article code {
-  font-family: $monospace-fonts;
-}
-
-.big { font-size:120%; }
-
-.title {
-  font-weight: bold;
-}
-
-.clear {
-  width: 0;
-}
-
-.full {
-  width: 100%;
-}
-
-.hidden {
-  display: none;
-}
-
-.empty {
-  padding-left: 20px;
-}
-
-.column h2 {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.margin-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.flex-fair {
-  flex-basis: 1px;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-@media #{$breakpoint-not-small} {
-  .flex-fair-ns {
-    flex-basis: 1px;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-}
-
-@media #{$breakpoint-large} {
-  .flex-fair-l {
-    flex-basis: 1px;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-}
-
-.c--normal {
-  @include usevar('color', 'fg-font-color');
-}
-
-.c--inherit {
-  color: inherit;
-
-  &:hover, &:active {
-    color: inherit;
-  }
-}
-
-.b--theme {
-  @include usevar(border-color, theme-color);
-}
-
-.c--dim {
-  @include usevar(color, dim-color);
-}
-
-.c--theme-dim {
-  @include usevar(color, theme-color-dim);
-}
-
-.b--dim {
-  @include usevar(border-color, dim-color);
-}
-
-.b--theme-dim {
-  @include usevar(border-color, theme-color-dim);
-}
-
-.c--dimmer {
-  @include usevar(color, dimmer-color);
-}
-
-.c--theme-dimmer {
-  @include usevar(color, theme-color-dimmer);
-}
-
-.b--dimmer {
-  @include usevar(border-color, dimmer-color);
-}
-
-.b--theme-dimmer {
-  @include usevar(border-color, theme-color-dimmer);
-}
-
-.c--dimmest {
-  @include usevar(color, dimmest-color);
-}
-
-.c--theme-dimmest {
-  @include usevar(color, theme-color-dimmest);
-}
-
-.b--dimmest {
-  @include usevar(border-color, dimmest-color);
-}
-
-.b--theme-dimmest {
-  @include usevar(border-color, theme-color-dimmest);
-}
-
-.bg--dim {
-  @include usevar(background-color, dim-background);
-}
-
-.bg--content {
-  @include usevar(background-color, content-background);
-}
-
-.bg--card {
-  @include usevar(background-color, card-background);
-}
-
-.f8 {
-  font-size: 0.65rem;
-}
-
-.mw-site {
-  max-width: 80rem;
-}
-
-.mh-3 {
-  max-height: $height-3;
-}
-
-.mh-4 {
-  max-height: $height-4;
-}
-
-.mh-5 {
-  max-height: $height-5;
-}
-
-.mh-6 {
-  max-height: $height-6;
-}
-
-.mh-100 {
-  max-height: 100%;
-}
-
-.mh-50vh {
-  max-height: 50vh;
-}
-
-.mh-60vh {
-  max-height: 60vh;
-}
-
-.mh-70vh {
-  max-height: 70vh;
-}
-
-.mh-80vh {
-  max-height: 80vh;
-}
-
-.minw-100 {
-  min-width: 100%;
-}
-
-.minh-1 {
-  min-height: $height-1;
-}
-
-.minh-2 {
-  min-height: $height-2;
-}
-
-.minh-3 {
-  min-height: $height-3;
-}
-
-.minh-4 {
-  min-height: $height-4;
-}
-
-.minh-5 {
-  min-height: $height-5;
-}
-
-.minh-6 {
-  min-height: $height-6;
-}
-
-.h1-5 {
-	height: 1.5rem;
-}
-
-.fira {
-  font-family: "Fira Sans", sans-serif;
-}
-
-.bi-avoid { break-inside: avoid; }
-.cc-auto { column-count: auto; }
-.cc1 { column-count: 1; }
-.cc2 { column-count: 2; }
-.cc3 { column-count: 3; }
-.cg0 { column-gap: $spacing-none; }
-.cg1 { column-gap: $spacing-extra-small; }
-.cg2 { column-gap: $spacing-small; }
-.cg3 { column-gap: $spacing-medium; }
-.cg4 { column-gap: $spacing-large; }
-.cg5 { column-gap: $spacing-extra-large; }
-
-.g0 { gap: $spacing-none; }
-.g1 { gap: $spacing-extra-small; }
-.g2 { gap: $spacing-small; }
-.g3 { gap: $spacing-medium; }
-.g4 { gap: $spacing-large; }
-.g5 { gap: $spacing-extra-large; }
-
-.grid {
-  display: grid;
-}
-
-.grid-1 {
-  grid-template-columns: 1fr;
-}
-
-.grid-2 {
-  grid-template-columns: 1fr 1fr;
-}
-
-.aspect-ratio--2x1 {
-  padding-bottom: 50%;
-}
-
-.hide-if-empty:empty {
-  display: none !important;
-}
-
-@media #{$breakpoint-not-small} {
-  .bi-avoid-ns { break-inside: avoid; }
-  .cc-auto-ns { column-count: auto; }
-  .cc1-ns { column-count: 1; }
-  .cc2-ns { column-count: 2; }
-  .cc3-ns { column-count: 3; }
-  .cg0-ns { column-gap: $spacing-none; }
-  .cg1-ns { column-gap: $spacing-extra-small; }
-  .cg2-ns { column-gap: $spacing-small; }
-  .cg3-ns { column-gap: $spacing-medium; }
-  .cg4-ns { column-gap: $spacing-large; }
-  .cg5-ns { column-gap: $spacing-extra-large; }
-  .grid-1-ns { grid-template-columns: 1fr; }
-  .grid-2-ns { grid-template-columns: 1fr 1fr; }
-
-  .bg--dim-ns {
-    @include usevar(background-color, dim-background);
-  }
-
-  .g0-ns { gap: $spacing-none; }
-  .g1-ns { gap: $spacing-extra-small; }
-  .g2-ns { gap: $spacing-small; }
-  .g3-ns { gap: $spacing-medium; }
-  .g4-ns { gap: $spacing-large; }
-  .g5-ns { gap: $spacing-extra-large; }
-}
-
-@media #{$breakpoint-medium} {
-  .bi-avoid-m { break-inside: avoid; }
-  .cc-auto-m { column-count: auto; }
-  .cc1-m { column-count: 1; }
-  .cc2-m { column-count: 2; }
-  .cc3-m { column-count: 3; }
-  .cg1-m { column-gap: $spacing-extra-small; }
-  .cg2-m { column-gap: $spacing-small; }
-  .cg3-m { column-gap: $spacing-medium; }
-  .cg4-m { column-gap: $spacing-large; }
-  .cg5-m { column-gap: $spacing-extra-large; }
-  .grid-1-m { grid-template-columns: 1fr; }
-  .grid-2-m { grid-template-columns: 1fr 1fr; }
-
-  .bg--dim-m {
-    @include usevar(background-color, dim-background);
-  }
-
-  .g0-m { gap: $spacing-none; }
-  .g1-m { gap: $spacing-extra-small; }
-  .g2-m { gap: $spacing-small; }
-  .g3-m { gap: $spacing-medium; }
-  .g4-m { gap: $spacing-large; }
-  .g5-m { gap: $spacing-extra-large; }
-}
-
-@media #{$breakpoint-large} {
-  .bi-avoid-l { break-inside: avoid; }
-  .cc-auto-l { column-count: auto; }
-  .cc1-l { column-count: 1; }
-  .cc2-l { column-count: 2; }
-  .cc3-l { column-count: 3; }
-  .cg1-l { column-gap: $spacing-extra-small; }
-  .cg2-l { column-gap: $spacing-small; }
-  .cg3-l { column-gap: $spacing-medium; }
-  .cg4-l { column-gap: $spacing-large; }
-  .cg5-l { column-gap: $spacing-extra-large; }
-  .grid-1-l { grid-template-columns: 1fr; }
-  .grid-2-l { grid-template-columns: 1fr 1fr; }
-
-  .bg--dim-l {
-    @include usevar(background-color, dim-background);
-  }
-
-  .g0-l { gap: $spacing-none; }
-  .g1-l { gap: $spacing-extra-small; }
-  .g2-l { gap: $spacing-small; }
-  .g3-l { gap: $spacing-medium; }
-  .g4-l { gap: $spacing-large; }
-  .g5-l { gap: $spacing-extra-large; }
-}
-
-.not-first:first-child {
-  display: none;
-}
-
-.not-first-of-type:first-of-type {
-  display: none;
-}
-
-.not-last:last-child {
-  display: none;
-}
-
-.not-last-of-type:last-of-type {
-  display: none;
-}
-
-.svgicon {
-  svg {
-    fill: currentColor;
-    stroke: currentColor;
-    width: 1em;
-    height: 1em;
-  }
-
-  &:not(.svgicon-nofix) svg {
-    transform: translate(0px,0.1em);
-  }
-}
-
-// Tachyons' `center` is unfortunately overloaded by a .center
-// class we have in our own CSS.
-.center-layout {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-footer {
-  .list li:not(:last-child)::after {
-    @extend .c--dimmer;
-
-    @media #{$breakpoint-not-small} {
-      & {
-        content: ' / ';
-      }
-    }
-  }
-}
-
-.content {
-  @include usevar(background-color, content-background);
-
-  margin: auto;
-
-  p {
-    -moz-text-size-adjust:auto;
-    -webkit-text-size-adjust:auto;
-    text-size-adjust:auto;
-
-    margin: 0.6rem 0;
-  }
-
-  .description {
-    line-height: 1.42em;
-    text-align: left;
-    margin: auto;
-
-    p {
-      margin-bottom: $spacing-small;
-      text-align: left;
-    }
-  }
-
-  > .top-bar {
-      text-align: left;
-  }
-}
-
-.content-block {
-  // TODO: What the heck are these styles
-  /* Background color given by theme */
-  background-repeat:repeat-x;
-  border-radius:2px;
-  text-align:left;
-  width:100%;
-  /* box-shadow: 0px 4px 7px rgba(0,0,0,0.5); /* Not themed */
-  position:relative;
-  box-sizing:border-box;
-
-  &.top-bar {
-    background-image:none;
-  }
-
-  &.language-desc {
-    padding: 10px;
-
-    h3 {
-      margin-left: 10px;
-    }
-  }
-
-  .no-bg {
-    background-image:none;
-    background-color:transparent;
-    box-shadow:none;
-  }
-}
-
-.sidebar {
-  .content-block {
-    &.single {
-      padding:0px; /* for project list, TODO */
-      margin-top:20px;
-    }
-
-    &.top-bar {
-      /* box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Not themed */
-      width:80%;
-      display:block;
-      margin:10px auto;
-    }
-  }
-
-  br.sidebar-filler {
-    line-height:20px;
-  }
-
-  .projectlist {
-    background-color:transparent;
-  }
-}
-
-.content-block .bottom-padding, .sidebar .bottom-padding {
-  margin-top: $spacing-medium;
-}
-
-.breadcrumb {
-  &:hover {
-    text-decoration:underline;
-  }
-
-  &.current {
-    text-overflow: clip ellipsis;
-  }
-}
-
-.breadcrumb-before:nth-of-type(n+2)::before {
-  content: '≫';
-}
-
-.optionbar {
-  @extend .b--dimmest;
-
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  text-align: center;
-  align-items: center;
-  border-style: dashed;
-  border-width: 0px;
-  border-bottom-width: 1px;
-  padding-bottom: $spacing-small;
-
-  @media #{$breakpoint-not-small} {
-    flex-direction: row;
-    text-align: left;
-    padding-bottom: 0;
-  }
-
-  &.bottom {
-    border-bottom-width: 0px;
-    border-top-width: 1px;
-    padding-bottom: 0;
-    padding-top: $spacing-small;
-
-    @media #{$breakpoint-not-small} {
-      padding-top: 0;
-    }
-  }
-
-  &.center {
-    text-align: center; // TODO: find this and kill it
-  }
-
-  .options {
-    display: flex;
-    flex-direction: column;
-
-    @media #{$breakpoint-not-small} {
-      flex-direction: row;
-    }
-
-    & {
-      #{$buttons} {
-        @include lite-button;
-        @extend .ph2;
-        @extend .pv1;
-        @extend .pv2-ns;
-      }
-    }
-  }
-
-  .group {
-    display: inline-block;
-    height: 100%;
-    margin: auto;
-  }
-}
-
-.tab {
-  @include usevar(background-color, tab-background);
-  @extend .pa2;
-}
-
-.tab-bar {
-  @include usevar(border-color, tab-border-color);
-  @extend .flex, .flex-row;
-
-  width: 100%;
-
-  .tab-button {
-    @include usevar(background-color, tab-button-background);
-    @include usevar(border-color, tab-border-color);
-    @extend .ph3, .pv2;
-
-    cursor: pointer; // TODO: Should this be a link?
-
-    &:hover {
-      @include usevar(background-color, tab-button-background-hover);
-    }
-
-    &.current {
-      @include usevar(background-color, tab-button-background-current);
-      font-weight: 500;
-    }
-  }
-}
-
-.pagination {
-  .page.current {
-    cursor: default;
-    font-weight: 600;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .button {
-    @extend .pv0, .ph2;
-  }
-}
-
-.user-link {
-  position:relative;
-}
-
-// TODO(ben): It appears that this code is inactive because the JS that would
-// create the popups is commented out.
-.user-popup {
-  opacity:0;
-  max-height:0px;
-  width:340px;
-
-  text-align:center;
-
-  transition:max-height 0.2s, opacity 0.1s;
-  box-shadow:0px 2px 5px rgba(0,0,0,0.3);
-
-  overflow:hidden;
-  position:absolute;
-  bottom:0px;
-
-  &.expanded {
-    visibility:visible;
-    max-height:250px;
-    opacity:1;
-  }
-
-  table {
-    /* Background color given by theme */
-    width:100%;
-    position:relative;
-    border-radius:3px;
-    z-index:10;
-  }
-
-  td {
-    vertical-align:top;
-    padding:15px 9px;
-  }
-
-  #avatar {
-    width:100px;
-    height:100px;
-    background-size:contain;
-    background-position:center center;
-    background-repeat:no-repeat;
-    border-radius:3px;
-    margin:0px auto;
-  }
-
-  .username {
-    font-weight:bold;
-  }
-
-  .bottom {
-    /* Border color given by theme */
-    border-top: 1px solid transparent;
-    padding: 15px;
-
-    .bio {
-      vertical-align:top;
-      width:90%;
-    }
-  }
-}
-
-.site-search {
-  &[type=text].lite {
-    // wow CSS selector priority sucks
-
-    // First transition copied from input .lite
-    transition: border-bottom-color 60ms ease-in-out, width 300ms ease;
-  }
-}
-
-#search_button_homepage {
-  margin:0px;
-  height:100%;
-  height:calc(100% - 2px);
-  border-radius:0px;
-  display:inline-block;
-  display:none;
-}
-
-.background-even:nth-of-type(even) {
-  // this is the default, and should be overridden by dynamic colors.
-  @include usevar(background-color, background-even-background);
-  @include usevar(--fade-color, background-even-background);
-}
-
-.sr-only {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  word-wrap: normal !important;
-  transition: 0.2s all;
-}
-
-.sr-focusable {
-  @extend .sr-only;
-
-  &:focus {
-    padding: 15px 10px;
-    height: auto;
-    width: auto;
-    background: var(--content-background);
-    clip: initial;
-    clip-path: initial;
-    z-index: 99999;
-  }
-}

src/rawdata/scss/_editor.scss

@@ -1,130 +0,0 @@
-// TODO: Old and wrong and bad
-.toolbar {
-  @include usevar('background-color', 'editor-toolbar-background');
-  @include usevar('border-color', 'editor-toolbar-border-color');
-
-  border-radius:3px;
-  height: 2.2em;
-  overflow-y:scroll;
-  transition:all 0.3s;
-  border: 1px solid transparent;
-
-  .button, input[type=button] {
-    @include usevar('background-color', 'editor-toolbar-button-background');
-    @include usevar('border-color', 'editor-toolbar-button-border-color');
-
-    line-height: 2.2em;
-    box-shadow:none;
-    border:0px;
-    border-right:1px solid transparent;
-    border-radius:0px;
-    margin:0px;
-    padding:0px 10px;
-    height:100%;
-    vertical-align:bottom;
-    text-transform:none;
-    font-weight:300;
-
-    &:hover {
-      @include usevar('background-color', 'editor-toolbar-button-background-hover');
-    }
-  }
-
-  input[type="text"] {
-    height:2.2em;
-    border:0px solid transparent; /* Not themed */
-  }
-}
-
-#preview:empty::after {
-  content: 'A preview of your post will appear here.';
-  @include usevar(color, dimmer-color);
-  font-style: italic;
-}
-
-@media #{$breakpoint-not-small} {
-  #preview-container {
-    max-height: calc(100vh - 20rem);
-    overflow: auto;
-  }
-}
-
-.edit-form {
-  .edit-form-row {
-    @extend .flex;
-    @extend .flex-column;
-    @extend .flex-row-ns;
-    @extend .mv3;
-
-    > :first-child {
-      @extend .w-100;
-      @extend .w4-ns;
-      @extend .flex-grow-0;
-      @extend .flex-shrink-0;
-      @extend .tl;
-      @extend .tr-ns;
-      @extend .pr0;
-      @extend .pr2-ns;
-      @extend .pb1;
-      @extend .pb0-ns;
-      font-weight: 500;
-    }
-
-    > :nth-child(2) {
-      @extend .flex-grow-1;
-      @extend .overflow-hidden;
-    }
-
-    .pt-input-ns {
-      // NOTE(ben): This could maybe be more general someday?
-      @media #{$breakpoint-not-small} {
-        padding-top: $input-padding;
-      }
-    }
-  }
-
-  input[type=text] {
-    @extend .w-100;
-    @extend .mw5-ns;
-  }
-
-  input[type=text]:invalid {
-    @include usevar(border-color, form-error-color);
-  }
-
-  textarea {
-    @extend .w-100;
-    @extend .w6-ns;
-    @extend .mw-100;
-    @extend .h3;
-  }
-
-  &.project-edit {
-    .project_description {
-      width: 100%;
-      min-height: 400px;
-      height: 30vh;
-    }
-
-    input.project_blurb, 
-    input.project_name,
-    {
-      min-width: 300px;
-      width: 50%;
-    }
-
-    .quota-bar {
-      // @include usevar(border-color, 'project-edit-quota-bar-border-color');
-
-      width: 500px;
-      border-width: 1px;
-      margin-bottom: 10px;
-
-      .quota-filled {
-        // @include usevar(background-color, 'project-edit-quota-bar-filled-background');
-
-        height: 100%;
-      }
-    }
-  }
-}

src/rawdata/scss/_episodes.scss

@@ -1,269 +0,0 @@
-.episode-list {
-  .description p {
-    line-height:1.42em;
-  }
-
-  h2, h3 {
-    font-size:1em;
-    font-weight:bold;
-  }
-
-  ul {
-    margin-bottom:30px;
-    list-style-type:none;
-    margin-top:-2px;
-  }
-}
-
-// UNUSED(outer_holder)
-#outer_holder .back {
-  margin: 0px auto 20px auto;
-
-  .outer {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    -webkit-justify-content: center;
-    justify-content: center;
-
-    & > .sidebar {
-      max-width: 260px;
-
-      & > div {
-        margin: 6px;
-        background-color: #ddd;
-        width: 200px;
-        margin-bottom: 12px;
-      }
-    }
-  }
-
-  article {
-    -webkit-box-flex: 1 1 40%;
-    -moz-box-flex: 1 1 40%;
-    -webkit-flex: 1 1 40%;
-    -ms-flex: 1 1 40%;
-    flex: 1 1 40%;
-  }
-}
-
-// UNUSED
-#player-wrapper {
-  display: inline-block;
-  -webkit-box-flex: 0 1 auto;
-  -moz-box-flex: 0 1 auto;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  box-shadow: 0px 0px 4px #000;
-}
-
-@media screen {
-  #player-wrapper #player {
-    width: 320px;
-    height: 210px;
-  }
-}
-@media screen and (min-width: 500px) {
-  #player-wrapper #player {
-    width: 480px;
-    height: 300px;
-  }
-}
-@media screen and (min-width: 670px) {
-  #player-wrapper #player {
-    width: 640px;
-    height: 390px;
-  }
-}
-@media screen and (min-width: 890px) {
-  #player-wrapper #player {
-    width: 854px;
-    height: 510px;
-  }
-}
-@media screen and (min-width: 1320px) {
-  #player-wrapper #player {
-    width: 1280px;
-    height: 750px;
-  }
-}
-
-.annotation {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  flex-wrap: wrap;
-  align-items: flex-start;
-
-  .navigation {
-    width: 450px;
-    display: inline-block;
-  }
-
-  .notes {
-    display: inline-block;
-  }
-}
-
-// UNUSED(timecodes)
-nav.timecodes {
-  margin: 0px;
-  max-width: 450px;
-  min-height: 700px;
-  overflow-y: auto;
-  -webkit-box-flex: 0 0 auto;
-  -moz-box-flex: 0 0 auto;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-
-  a {
-    color: #ccc;
-  }
-
-  ul[name=markers] {
-    margin: 0px;
-    padding: 0px;
-    list-style-type: none;
-    font-size: 15px;
-
-    & > li {
-      padding: 4px;
-      display: block;
-      border-bottom: 1px solid #333;
-
-      &:hover {
-        background-color: rgba(0,90,0,0.3);
-      }
-
-      a {
-        display: block;
-        text-decoration: none;
-
-        span.timecode {
-          color: #777777;
-          float: left;
-          font-size: 86%;
-          margin-right: .5em;
-          text-align: right;
-          width: 42px;
-        }
-      }
-    }
-  }
-}
-
-// UNUSED
-#video-notes {
-  min-height: 700px;
-  margin-top: 0px;
-
-  pre {
-    margin-top:1.5em;
-    margin-left: 10px;
-    margin-right: 30px;
-    margin-bottom: 1.5em;
-    padding: 10px;
-    overflow: auto;
-  }
-}
-
-// UNUSED
-#game_icon {
-  background-position: 0px 0px;
-  background-repeat: no-repeat;
-  background-image: url("/images/hero_home_200x114.png");
-  background-size: cover;
-  height: 113px;
-  margin: 0px 0px 4px 0px;
-}
-
-// UNUSED
-.sidebar-heading {
-  margin: 0px 0px 16px;
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: bold;
-  color: #00547c;
-  white-space: nowrap;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
-  text-align: center;
-}
-
-// Episode Search
-
-.queryContainer {
-  width: 1000px;
-  margin: 15px auto;
-  display: flex;
-  flex-direction: horizontal;
-
-  label {
-    flex-grow: 0;
-    flex-shrink: 0;
-    padding-right: 15px;
-  }
-}
-
-#query {
-  flex-grow: 1;
-}
-
-#results {
-  width: 800px;
-  margin: 0 auto;
-}
-
-.dayContainer:nth-child(2n) {
-  background-color: rgba(0,0,0,0.05);
-}
-
-.dayName {
-  width: 200px;
-  display: inline-block;
-  vertical-align: top;
-  line-height: 16px;
-  box-sizing: border-box;
-  padding: 5px;
-}
-
-.markerList {
-  display: inline-block;
-  width: 600px;
-  box-sizing: border-box;
-  vertical-align: top;
-}
-
-.marker {
-  cursor: pointer;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  display: block;
-  text-decoration: none;
-
-  &:first-child {
-    border: none;
-  }
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  b {
-    color: black;
-    background-color: rgb(255, 155, 0);
-  }
-}
-
-#resultsSummary {
-  text-align: center;
-  margin: 10px 0;
-}

src/rawdata/scss/_forum.scss

@@ -1,360 +0,0 @@
-.display-options {
-  height:100%;
-  padding:0px 20px 0px 20px;
-
-  > * {
-    display:inline-block;
-    vertical-align:middle;
-  }
-}
-
-.forum h3 {
-  margin:0px 80px 0px 20px;
-  font-weight:bold;
-}
-
-.forum-narrow .forum-narrow-hide {
-  display: none;
-}
-
-.post-bg-alternate:nth-of-type(odd) {
-  @include usevar('background-color', 'forum-even-background');
-}
-
-.thread-list-item .latestpost {
-  width: 16.5rem;
-}
-
-.thread {
-  @include usevar('color', 'fg-font-color');
-
-  @extend .ma0;
-
-  .profile & {
-    padding-left:15px;
-  }
-
-  .title {
-    font-weight: bold;
-
-    transition: border-bottom-color 0.1s;
-    border-bottom-color: transparent;
-
-    &:hover {
-      border-bottom-color: initial;
-    }
-  }
-
-  .forum & .info th {
-    width: 50px;
-  }
-}
-
-.avatar-icon {
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
-  object-fit: cover;
-  border-radius: 100%;
-  overflow: hidden;
-  object-fit: cover;
-  @include usevar(background-color, dimmest-color);
-}
-
-:root {
-  @include usevar(--fade-color, 'content-background');
-}
-
-.excerpt-fade {
-  background-image: linear-gradient(to top, var(--fade-color), rgba(0, 0, 0, 0));
-  pointer-events: none;
-}
-
-.read {
-  @include usevar('color', 'forum-thread-read-color');
-
-  td {
-    @include usevar('color', 'forum-thread-read-color');
-  }
-
-  a {
-    @include usevar('color', 'forum-thread-read-link-color');
-  }
-
-  .title {
-    font-weight: 500;
-  }
-}
-
-.goto {
-  font-size: 200%;
-  width: 30px;
-
-  a {
-    display: block;
-    padding: 0px 10px;
-    box-sizing: border-box;
-    position: relative;
-    line-height: 100%;
-    background-color: transparent;
-  }
-}
-
-.badge {
-  display: inline-block;
-  border-radius: 1000em;
-  padding: 0 0.8em;
-  font-size: 0.9em;
-  line-height: 1.8em;
-  font-weight: bold;
-
-  &.staff {
-    background-color: #17b2c6;
-    color: white;
-
-    &::before {
-      content: 'Staff';
-    }
-  }
-}
-
-.postid a {
-  margin-top: -4rem;
-  padding-top: 4rem;
-  outline: none;
-}
-
-.codeblocktable {
-  font-family: $monospace-fonts;
-  font-size:14px;
-  overflow:auto;
-  line-height:1.5em;
-
-  tbody {
-    width:100%;
-  }
-
-  .linenos {
-    @include usevar(color, 'code-line-number-color');
-
-    font-weight:500;
-    padding: 5px;
-    background: rgba(0, 0, 0, 0.15);
-  }
-
-  .code {
-    /* Background color given by theme */
-    padding-right:20px;
-    padding-left:10px;
-    max-width:80em;
-  }
-}
-
-.post {
-  .action.button {
-    padding:0px 10px;
-    margin-top:0px;
-    margin-right:4px;
-    background-color:transparent;
-    font-size:130%;
-    border-radius:0px;
-    border-width:0px;
-    border-bottom-width:2px;
-    transition:border-bottom-width 0.1s;
-
-    &:hover {
-      border-bottom-width:4px;
-    }
-  }
-}
-
-.blog {
-  .post {
-    .meta {
-      position:relative;
-    }
-
-    &.op .meta {
-      margin-bottom:10px;
-    }
-
-    .badges {
-      width: 40px;
-      font-size: 0.7em;
-      text-align: center;
-    }
-  }
-
-  .sidebar {
-    .post > .author {
-      padding:15px;
-      text-align:center;
-    }
-
-    .recent-posts {
-      text-align:center;
-      padding:15px;
-
-      h2 {
-        display:inline;
-      }
-    }
-
-    .archive ul {
-      list-style-type:none;
-      text-align:left;
-    }
-  }
-
-  .post-list {
-    .post {
-      &:nth-child(even) {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-.featured-post .meta .avatar-icon {
-  left:-60px;
-  bottom:-5px;
-}
-
-.content-block.blog {
-  p.title {
-    font-weight:bold;
-
-    a {
-      border-bottom-width:0px;
-
-      &:hover {
-        border-bottom-width:1px;
-      }
-    }
-  }
-}
-
-a.mark_as_read {
-  float: right;
-}
-
-.mark_as_read_toplevel_forum {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  text-align: center;
-
-  a {
-    text-decoration: underline;
-  }
-}
-
-div.mark_as_read_toplevel_blog {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  text-align: center;
-
-  a {
-    text-decoration: none;
-  }
-}
-
-.mark_as_read_toplevel_blog 
-div.mark_as_read_site {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  text-align: center;
-
-  a {
-    text-decoration: none;
-  }
-}
-
-.mark_as_read_site 
-li.post-entry {
-  margin-left:0px;
-  margin-bottom: 3px;
-}
-
-.diff {
-  width:100%;
-  max-height:100vh;
-  overflow-y:scroll;
-  margin-top:20px;
-
-  > .post-source {
-    @include usevar(color, 'fg-font-color');
-    @include usevar(background-color, 'forum-diff-source-background');
-    @include usevar(border-color, 'forum-diff-source-border-color');
-
-    border-width: 1px;
-    border-radius: 2px;
-    font-family: $monospace-fonts;
-    width:49%;
-    box-sizing:border-box;
-    padding: 4px;
-    display:inline-block;
-    vertical-align: top;
-  }
-
-  .diff-replace,
-  .diff-delete,
-  .diff-insert,
-  {
-    border-width: 1px;
-    border-radius: 2px;
-    padding: 1px;
-  }
-
-  .diff-replace {
-    @include usevar(background-color, 'forum-diff-replace-background');
-    @include usevar(border-color, 'forum-diff-replace-border-color');
-  }
-
-  .diff-delete {
-    @include usevar(background-color, 'forum-diff-delete-background');
-    @include usevar(border-color, 'forum-diff-delete-border-color');
-  }
-
-  .diff-insert {
-    @include usevar(background-color, 'forum-diff-insert-background');
-    @include usevar(border-color, 'forum-diff-insert-border-color');
-  }
-}
-
-.index {
-  list-style-type:none;
-  -webkit-column-count: 3;
-  -moz-column-count: 3;
-  column-count: 3;
-  margin-top:20px;
-
-  .index-category {
-    margin-bottom:20px;
-    -webkit-column-break-inside: avoid;
-    page-break-inside: avoid;
-    break-inside: avoid-column;
-  }
-}
-
-.bbtable {
-  width: 100%;
-  border: 1px solid;
-
-  td, th {
-    border: 1px solid;
-    padding: 4px;
-  }
-
-  th {
-    background: rgba(0, 0, 0, 0.15);
-    font-weight: bold;
-    border-bottom-width: 2px;
-  }
-
-  tbody tr:nth-child(even) {
-    background: rgba(0, 0, 0, 0.05);
-  }
-}

src/rawdata/scss/_header.scss

@@ -1,150 +0,0 @@
-header {
-  $logo-height: px2rem(60px);
-
-  .hmn-logo {
-    height: $logo-height;
-    width: 100%;
-    text-transform: uppercase;
-    font-family: 'MohaveHMN', sans-serif;
-    font-size: 2rem;
-    
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white !important;
-
-    &.big {
-      @media #{$breakpoint-not-small} {
-        width: px2rem(180px);
-      }
-    }
-
-    &.small {
-      @media #{$breakpoint-not-small} {
-        width: $logo-height;
-        padding: 0.8rem;
-        text-align: justify;
-		text-align-last: justify;
-        text-justify: inter-character;
-        flex-direction: column;
-        font-size: 1rem;
-        line-height: 1em;
-        align-items: stretch;
-      }
-    }
-  }
-
-  .items {
-    position: relative; // will be used on mobile, when .root-item is not relative
-  }
-
-  .root-item {
-    @media #{$breakpoint-not-small} {
-      & {
-        position: relative; // makes submenus align to this item instead of the screen
-        height: $logo-height;
-      }
-    }
-
-    &:not(:hover):not(.clicked) > .submenu {
-      display: none;
-    }
-
-    &.clicked .svgicon {
-      transform: rotate(180deg);
-    }
-
-    > a {
-      @extend .pa2, .ph3-l;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      font-weight: bold;
-    }
-
-    .svgicon {
-      font-size: 0.7em;
-    }
-  }
-
-  &:not(.clicked) .root-item:not(:hover),
-  &.clicked .root-item:not(.clicked) {
-    > .submenu {
-      display: none;
-    }
-  }
-
-  .submenu {
-    @extend .bw1;
-    @include usevar(background-color, content-background);
-
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    min-width: 10rem;
-    border-top-style: solid;
-    border-bottom-style: solid;
-
-    @media #{$breakpoint-not-small} {
-      & {
-        border-top-style: none;
-        border-left-style: solid;
-        border-right-style: solid;
-        left: initial;
-        right: initial;
-      }
-    }
-
-    > a {
-      @extend .pa2, .ph3-l;
-
-      display: block;
-      white-space: nowrap;
-      z-index: 1;
-      font-weight: bold;
-      text-align: center;
-
-      @media #{$breakpoint-not-small} {
-        & {
-          text-align: left;
-        }
-      }
-    }
-  }
-
-  .menu-bar {
-    width: 100%;
-    z-index: 10;
-  }
-  
-  #login-link{
-    cursor: pointer;
-  }
-
-  #login-popup {
-    @include usevar(background-color, login-popup-background);
-    @include usevar(color, fg-font-color);
-    
-    visibility: hidden;
-    position: absolute;
-    z-index: 12;
-    overflow: hidden;
-    right: 0;
-    top: 100%;
-    width: 100%;
-    
-    &.open {
-      visibility: visible;
-    }
-
-    @media #{$breakpoint-not-small} {
-      top: 2.2rem;
-      width: 17rem;
-    }
-  }
-}

src/rawdata/scss/_irc.scss

@@ -1,206 +0,0 @@
-.chat {
-  @include usevar(border-color, 'irc-border-color');
-
-  margin: auto;
-  width: 100%;
-  border: 1px solid transparent;
-  position: relative;
-  overflow: hidden;
-  padding-right: 8px;
-  box-sizing: border-box;
-
-  #tabs {
-    overflow-y: scroll;
-    box-sizing: border-box;
-
-    .hidden {
-      display: none;
-    }
-
-    .current {
-      @include usevar(box-shadow, 'irc-tab-current-shadow');
-    }
-
-    .button {
-      padding-left: 10px;
-      padding-right: 3px;
-      transition: width 0.2s;
-      text-transform: none;
-      vertical-align: top;
-
-      .close-btn {
-        visibility: hidden;
-        opacity: 0;
-        transition: opacity 0.2s;
-
-        display: inline-block;
-        font-size: 9pt;
-        vertical-align: middle;
-        height: 13px;
-        line-height: 11px;
-        width: 13px;
-        margin-left: 5px;
-        padding-left: 2px;
-        padding-right: 3px;
-        border-radius: 3px;
-        border: 1px solid transparent; /* Not themed */
-
-        position: relative;
-        top: -2px;
-      }
-
-      &:hover .close-btn {
-        @include usevar(color, 'irc-tab-close-button-color');
-        @include usevar(background-color, 'irc-tab-close-button-background');
-
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    .new-tab {
-      padding: 0px;
-      padding-left: 10px;
-    }
-  }
-
-  #history {
-    width: 100%;
-    min-height: 300px;
-    height: 50vh;
-    overflow-y: auto;
-    padding-top: 3px;
-    box-sizing: border-box;
-
-    .channel {
-      width: 100%;
-      display: none;
-
-      &.current {
-        display: table;
-      }
-
-      &.hidden {
-        display: none;
-      }
-    }
-
-    .entry {
-      display: table-row;
-      width: 100%;
-      font-size: 11pt;
-
-      &.minor {
-        color: #777;
-        font-size: 10pt;
-      }
-
-      &.alert {
-        color: #dd683b;
-      }
-
-      &.error {
-        color: #880000;
-        font-style: italic;
-      }
-
-      &.action {
-        font-style: italic;
-
-        .msg .action-name {
-          font-weight: bold;
-        }
-      }
-
-      .nick, .msg {
-        display: table-cell;
-        padding: 0px 4px;
-      }
-
-      .nick {
-        @include usevar(border-color, 'irc-nick-border-color');
-
-        font-weight: bold;
-        text-align: right;
-        border-right-width: 1px;
-        border-right-style: solid;
-      }
-
-      .msg {
-        width: 100%;
-
-        .highlight {
-          background-color: #dd683b;
-          color: #fff;
-          padding: 0px 5px;
-        }
-
-        .emote {
-          height: 1.6em;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-
-  #chatbox {
-    width: 100%;
-  }
-
-  #users {
-    @include usevar(color, 'irc-users-color');
-    @include usevar(background-color, 'irc-users-background');
-    @include usevar(border-color, 'irc-users-border-color');
-
-    position: absolute;
-    border-left-width: 1px;
-    border-left-style: solid;
-    padding: 5px;
-    right: 0px;
-    top: 0px;
-    color: #333;
-    height: 100%;
-    max-width: 20%;
-    width: 20%;
-    transition: right 0.2s;
-    max-height: 100%;
-    overflow-y: auto;
-    box-sizing: border-box;
-
-    &.collapsed {
-      right:-20%;
-    }
-
-    .popout {
-      @include usevar(background-color, 'irc-users-popout-background');
-      @include usevar(border-left-color, 'irc-users-popout-border-color-left');
-      @include usevar(border-right-color, 'irc-users-popout-border-color-right');
-
-      width: 8px;
-      font-size: 7pt;
-      height: 100%;
-      border-radius: 2px;
-      border: 0px solid transparent; /* Not themed */
-      border-left-width: 1px;
-      border-left-style: solid;
-      border-right-width: 1px;
-      border-right-style: solid;
-      position: absolute;
-      top: 0px;
-      left: -8px;
-      box-shadow: 0px 0px 0px transparent; /* Not themed */
-      text-align: center;
-      margin: 0px;
-      cursor: pointer;
-    }
-
-    .op {
-      font-weight: bold;
-    }
-
-    .user {
-      cursor: pointer;
-    }
-  }
-}
-

src/rawdata/scss/_landing.scss

@@ -1,24 +0,0 @@
-.landing-layout {
-  display: grid;
-  gap: $spacing-medium;
-
-  > * {
-    overflow: hidden;
-  }
-}
-
-@media #{$breakpoint-large} {
-  .landing-layout {
-    grid-template-columns: 1fr;
-    grid-auto-columns: 1fr;
-
-    > * {
-      grid-column: 1 / 2;
-
-      &.landing-right {
-        grid-column: 2 / 3;
-        grid-row: 1 / 20; // increase this number if somehow you ever add that much garbage to the home page :)
-      }
-    }
-  }
-}

src/rawdata/scss/_library.scss

@@ -1,21 +0,0 @@
-.star-btn {
-  border-bottom-width: 2px;
-  @include usevar('background-color', 'library-star-btn-background');
-  @include usevar('border-color', 'library-star-btn-border-color');
-
-  a {
-    @include usevar('border-color', 'library-star-btn-a-border-color');
-
-    &:hover {
-      @include usevar('background-color', 'library-star-btn-a-hover-background');
-    }
-  }
-}
-
-.library-dropcap {
-  width: 1em;
-  height: 1.1em;
-  padding-top: 0.19em;
-  text-align: center;
-  font-size: 2rem;
-}

src/rawdata/scss/_notices.scss

@@ -1,45 +0,0 @@
-.notice {
-	@include usevar(color, notice-text-color);
-	@extend .ph3, .pv2;
-	@extend .br2-ns;
-
-	a {
-		@include usevar(color, notice-text-color);
-		@include usevar(border-bottom-color, notice-text-color);
-	}
-}
-.notice-unapproved {
-	@include usevar(background-color, notice-unapproved-color);
-}
-
-.notice-hidden {
-	@include usevar(background-color, notice-hidden-color);
-}
-
-.notice-hiatus {
-	@include usevar(background-color, notice-hiatus-color);
-}
-
-.notice-dead {
-	@include usevar(background-color, notice-dead-color);
-}
-
-.notice-lts {
-	@include usevar(background-color, notice-lts-color);
-}
-
-.notice-lts-reqd {
-	@include usevar(background-color, notice-lts-reqd-color);
-}
-
-.notice-success {
-	@include usevar(background-color, notice-success-color);
-}
-
-.notice-warn {
-	@include usevar(background-color, notice-warn-color);
-}
-
-.notice-failure {
-	@include usevar(background-color, notice-failure-color);
-}

src/rawdata/scss/_profile.scss

@@ -1,52 +0,0 @@
-.profile {
-  .content {
-    .description {
-      margin:0px auto;
-      max-width:40em;
-    }
-
-    h2 {
-      margin-bottom:10px;
-    }
-  }
-
-  ul.recent-posts, ul.recent-comments {
-    list-style-type:none;
-  }
-
-  ul .entry {
-    margin-left:20px;
-  }
-
-  .entry {
-    .context {
-      font-weight:bold;
-      border-bottom:0px;
-    }
-  }
-
-  .content-block.projects {
-    background-image:none;
-    overflow-y:visible;
-  }
-}
-
-.profile .content-block.avatar,
-.project .content-block.logo {
-  background-color:transparent;
-  background-image:none;
-  box-shadow:none;
-  min-height:200px;
-
-  img {
-    // TODO(ben): Check if this was actually set to anything before
-    // box-shadow: 
-  }
-}
-
-.project .content-block.screenshots,
-.profile .content-block.projects
-{
-  padding:0px;
-  min-height:0em;
-}

src/rawdata/scss/_progress_bar.scss

@@ -1,15 +0,0 @@
-.upload_bar.uploading .instructions, .upload_bar:not(.uploading) .progress {
-	display: none;
-}
-
-.upload_bar .progress_bar {
-	border: 2px solid;
-	@include usevar('border-color', 'link-color');
-	padding: 2px;
-}
-
-.upload_bar .progress_bar > div {
-	@include usevar('background-color', 'link-color');
-	height: 100%;
-}
-

src/rawdata/scss/_projects.scss

@@ -1,272 +0,0 @@
-.project-carousel {
-  .carousel-item {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    br {
-      line-height: 0.6em;
-    }
-  }
-
-  .carousel-item-small {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    &:not(.active) {
-      display: none;
-    }
-  }
-
-  .carousel-description {
-    max-height: 14rem;
-    overflow: hidden;
-  }
-
-  .carousel-fade {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 30px;
-
-    @include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")")
-  }
-}
-
-.project {
-  .pair {
-    display: flex;
-    align-items: flex-start;
-
-    .key {
-      font-weight: bold;
-      flex-shrink: 0;
-    }
-
-    .value {
-      text-align: right;
-      flex-grow: 1;
-    }
-  }
-
-  .settings-icon {
-    z-index: 10;
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    right: 5px;
-    top: 5px;
-    margin: 0px;
-    text-align: center;
-    padding: 3px;
-    border-radius: 5px;
-    line-height: 100%;
-    box-sizing: border-box;
-  }
-
-  .screenshots .slideshow {
-    background-color:black;
-  }
-
-  .tags {
-    text-align:center;
-
-    h2 {
-      margin-bottom:5px;
-    }
-
-    li {
-      display:inline-block;
-    }
-  }
-
-  .button-bar {
-    border: none;
-  }
-
-  .forum {
-    h3 {
-      margin: 0;
-    }
-
-    .thread-entry-right {
-      display: none;
-    }
-  }
-}
-
-.project-card {
-  @include usevar(color, 'fg-font-color');
-  @include usevar(background-color, 'card-background');
-  @include usevar(border-color, 'project-card-border-color');
-
-  transition: box-shadow 0.2s, background-color 0.2s;
-
-  .slideshow & {
-    margin-top:8px;
-  }
-
-  &:hover {
-    @include usevar(background-color, 'card-background-hover');
-
-    & > .title {
-      text-decoration:underline;
-    }
-  }
-
-  .image-container {
-    $image-size: 8rem;
-
-    width: $image-size;
-    min-height: $image-size;
-
-    .image {
-      position: absolute;
-      width: $image-size;
-      top: 0;
-      bottom: 0;
-    }
-  }
-
-  .details {
-    /* Background color given by theme */
-    transition: background-color 0.2s;
-  }
-
-  .badges:empty {
-    display: none;
-  }
-
-  .badge {
-    color: white;
-    border-radius: 5px;
-  }
-}
-
-.projectlist {
-  .sidebar & {
-    padding:0px;
-    width:340px;
-
-    // background-image:none;
-    // background-color:transparent;
-    // box-shadow:none;
-
-    .project-card.more {
-      height:40px;
-      width:326px;
-      padding-top:5px;
-    }
-  }
-}
-
-.screenshots .slide {
-  max-width:100%;
-}
-
-.slideshow {
-  /* Background color and color given by theme */
-  position:relative;
-  background-image:none;
-  overflow:hidden;
-
-  .optionbar {
-    height:30px;
-    text-align:center;
-  }
-
-  .buttons {
-    display:inline-block;
-    height:100%;
-  }
-
-  .button {
-    line-height:100%;
-    padding:5px 8px;
-    font-weight:400;
-
-    &.current {
-      font-weight:600;
-    }
-  }
-
-  #slide-deck {
-    width:100%;
-    position:relative;
-    transition:left 0.3s;
-    left:0px;
-    text-align:center;
-    display:flex;
-    flex-direction:horizontal;
-    justify-content: space-around;
-    align-items: center;
-  }
-
-  .slide {
-    flex: 1 1 100%;
-    position:relative;
-
-    img {
-      margin:auto;
-      max-height:60vh;
-      max-width:100%;
-    }
-  }
-
-  &.cards {
-    #slide-deck {
-      justify-content: flex-start;
-    }
-
-    .slide {
-      flex: 0 1 auto;
-    }
-  }
-}
-
-#project_owner_suggestions {
-  max-height:300px;
-  overflow:auto;
-  position:absolute;
-  border:1px solid transparent;
-
-  #user_template {
-    display:none;
-  }
-}
-
-.user_suggestions {
-  @include usevar(background-color, 'project-user-suggestions-background');
-
-  padding-top: 5px;
-  padding-bottom: 5px;
-
-  &#project_owner_suggestions .user {
-    @include usevar(border-color, 'project-user-suggestions-border-color');
-
-    border-bottom-width: 1px;
-    width: 200px;
-    box-sizing:border-box;
-    cursor:pointer;
-  }
-
-  .user {
-    position:relative;
-    margin-left:50px;
-    display: inline-block;
-    margin-right:10px;
-
-    .avatar-icon {
-      left:-50px;
-      bottom:0px;
-      border-radius:50%;
-      border:2px solid transparent;
-    }
-  }
-}
-
-#project_owners {
-  min-width:50%;
-}

src/rawdata/scss/_showcase.scss

@@ -1,7 +0,0 @@
-.showcase-item {
-  .gradient {
-    width: 100%;
-    height: 114px;
-    background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
-  }
-}

src/rawdata/scss/_streams.scss

@@ -1,51 +0,0 @@
-.streams-container {
-  #empty-message {
-    display: none;
-  }
-
-  .streams {
-    &:empty {
-      display: none;
-
-      + #empty-message {
-        display: block;
-      }
-    }
-  }
-
-  .stream {
-    .live {
-      position: absolute;
-      left: $spacing-small;
-      top: $spacing-small;
-      color: white;
-      background-color: #e91916;
-      font-weight: bold;
-    }
-
-    .viewers {
-      position: absolute;
-      left: $spacing-small;
-      bottom: $spacing-small;
-      color: white;
-      background-color: rgba(0, 0, 0, 0.7);
-    }
-
-    .avatar {
-      padding: 1.5rem;
-    }
-  }
-
-  .twitch-embed-container {
-    padding-bottom: 0%;
-    transition: padding-bottom 400ms ease-in-out;
-
-    &.open {
-      padding-bottom: 150%;
-
-      @media screen and (min-width: 713px) { // magic numbers, Twitch has weird breakpoints
-        padding-bottom: 40.6%;
-      }
-    }
-  }
-}

src/rawdata/scss/_timeline.scss

@@ -1,53 +0,0 @@
-.timeline-item {
-    @include usevar(background-color, card-background);
-    @include usevar(--fade-color, card-background);
-    @include usevar(color, main-color);
-
-    .avatar-icon {
-        border: 2px solid;
-        @include usevar(border-color, theme-color);
-
-        &.big {
-            width: 3rem;
-            height: 3rem;
-
-            @media #{$breakpoint-not-small} {
-                width: px2rem(62px);
-                height: px2rem(62px);
-            }
-        }
-    }
-
-    .timeline-content-box {
-		&.timeline-item-bg {
-			@include usevar(background-color, timeline-content-background);
-		}
-
-        > * {
-            display: block;
-            max-width: 100%;
-            max-height: 80vh;
-        }
-    
-        &.embed {
-            @extend .aspect-ratio, .aspect-ratio--16x9;
-    
-            > iframe {
-                @extend .aspect-ratio--object;
-            }
-        }
-    }
-}
-
-.timeline-modal {
-    .container {
-        max-height: 100vh;
-		max-width: 100%;
-        
-        @media #{$breakpoint-not-small} {
-			width: auto;
-			max-width: calc(100% - 2rem);
-            max-height: calc(100vh - 2rem);
-        }
-    }
-}

src/rawdata/scss/carousel.css

@@ -14,23 +14,22 @@
 
   .carousel-button {
     border: 1px solid;
-    @include usevar(border-color, dimmer-color);
+    border-color: var(--dimmer-color);
     cursor: pointer;
 
     transition: all 100ms ease-in-out;
 
     &:hover {
-      @include usevar(background-color, dimmest-color);
+      background-color: var(--bg-3);
     }
 
     &.active {
-      @include usevar(border-color, theme-color);
-      @extend .w2;
+      border-color: var(--theme-color);
+      width: var(--width-2);
 
       &:hover {
-        @include usevar(background-color, theme-color-dimmest);
+        background-color: var(--theme-color-dimmest);
       }
     }
   }
-}
-
+}

src/rawdata/scss/content.css

@@ -0,0 +1,176 @@
+.post-content {
+  line-height: 1.4;
+
+  * {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+  }
+
+  h5 {
+    font-size: 0.8rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    line-height: 1.2;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  li:not(:last-child) {
+    margin-bottom: 0.6em;
+  }
+
+  li p {
+    margin-top: 0.6em;
+    margin-bottom: 0.6em;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  hr {
+    margin-left: var(--spacing-medium);
+    margin-right: var(--spacing-medium);
+  }
+
+  div.code {
+    border-color: var(--dimmer-color);
+
+    max-width: 100%;
+    max-height: 20em;
+    max-height: 80vh;
+    overflow: auto;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  div+br,
+  blockquote+br,
+  ul+br,
+  ol+br {
+    display: none;
+  }
+
+  table {
+    margin-top: var(--spacing-small);
+    margin-bottom: var(--spacing-small);
+  }
+
+  th,
+  td {
+    padding: var(--spacing-extra-small) var(--spacing-small);
+    border: 1px solid var(--border-color);
+  }
+
+  code {
+    background-color: var(--bg-3);
+
+    padding: .2em 0;
+    white-space: nowrap;
+
+    &::before,
+    &::after {
+      content: "\00a0";
+      letter-spacing: -0.2em;
+      display: inline-block;
+    }
+  }
+
+  pre>code,
+  pre.hmn-code {
+    background-color: var(--bg-3);
+
+    padding: 0.7em;
+    overflow-x: auto;
+  }
+
+  blockquote {
+    border-color: var(--bg-3);
+    margin-left: var(--spacing-small);
+    padding-left: var(--spacing-small);
+    margin-right: 0;
+    border-left-style: solid;
+    border-left-width: 1px;
+
+    .quotewho {
+      line-height: 2em;
+
+      &::after {
+        content: " said:";
+      }
+    }
+  }
+
+  figure {
+    margin: var(--spacing-small) 0;
+    padding: var(--spacing-small) var(--spacing-small) 0;
+    background-color: var(--dim-background);
+    border-radius: var(--border-radius-3);
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (min-width: 35em) {
+      margin-top: var(--spacing-medium);
+      margin-bottom: var(--spacing-medium);
+      padding: var(--spacing-medium) var(--spacing-medium) 0;
+    }
+
+    figcaption {
+      margin: var(--spacing-extra-small) 0;
+
+      @media screen and (min-width: 35em) {
+        margin: var(--spacing-small) 0;
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+
+  td {
+    vertical-align: baseline;
+  }
+
+  .spoiler {
+    border-color: var(--spoiler-border);
+
+    border-width: 1px;
+    border-style: dashed;
+    color: transparent;
+
+    &::selection {
+      color: white;
+      background-color: black;
+    }
+  }
+}

src/rawdata/scss/core.css

@@ -0,0 +1,767 @@
+/* Bare minimum styles */
+
+* {
+    /* It's aggressive, but we like it aggressive */
+    box-sizing: border-box;
+    border-color: var(--border-color);
+}
+
+br {
+    /* why, IE... */
+    border-style: none;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--color);
+    font-family: "Inter", sans-serif;
+    min-height: 100vh;
+    box-sizing: border-box;
+}
+
+a,
+.link {
+    color: var(--link-color);
+    border-bottom: none;
+    text-decoration: none;
+
+    &.external::after {
+        font-family: "icons";
+        content: " 1";
+        vertical-align: middle;
+    }
+}
+
+.link--normal {
+    --link-color: var(--color);
+}
+
+b,
+strong {
+    font-weight: 600;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    margin: 0;
+    line-height: 1;
+    font-weight: 600;
+}
+
+code,
+pre,
+.mono {
+    font-family: "Fira Mono", monospace;
+}
+
+/* Utility */
+
+.bg--main {
+    background-color: var(--main-background-color);
+}
+
+.bg--card {
+    background-color: var(--card-background);
+}
+
+.bg--card-transparent {
+    background-color: var(--card-background-transparent);
+}
+
+.m--center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.flex-shrink-0 {
+    flex-shrink: 0;
+}
+
+.flex-grow-1 {
+    flex-grow: 1;
+}
+
+.flex-fair {
+    flex-basis: 1px;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+@media screen and (min-width: 35em) {
+    .flex-fair-ns {
+        flex-basis: 1px;
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}
+
+@media screen and (min-width: 60em) {
+    .flex-fair-l {
+        flex-basis: 1px;
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}
+
+.b--theme-dark {
+    border-color: var(--theme-color-dark);
+}
+
+.b--theme-light {
+    border-color: var(--theme-color-light);
+}
+
+.bg1 {
+    background-color: var(--bg-1);
+}
+
+.bg2 {
+    background-color: var(--bg-2);
+}
+
+.bg3 {
+    background-color: var(--bg-3);
+}
+
+.bg4 {
+    background-color: var(--bg-4);
+}
+
+.bg5 {
+    background-color: var(--bg-5);
+}
+
+.bg-theme {
+    background-color: var(--theme-color);
+}
+
+.bg-theme-dim {
+    background-color: var(--theme-color-dim);
+}
+
+.bg-theme-dimmer {
+    background-color: var(--theme-color-dimmer);
+}
+
+.bg-theme-dimmest {
+    background-color: var(--theme-color-dimmest);
+}
+
+.bg-theme-dark {
+    background-color: var(--theme-color-dark);
+}
+
+.bg-theme-light {
+    background-color: var(--theme-color-light);
+}
+
+.c--normal {
+    color: var(--color);
+}
+
+.c--inherit {
+    color: inherit;
+
+    &:hover,
+    &:active {
+        color: inherit;
+    }
+}
+
+.f8 {
+    font-size: 0.65rem;
+}
+
+.w6 {
+    width: var(--width-6);
+}
+
+.w7 {
+    width: var(--width-7);
+}
+
+.w8 {
+    width: var(--width-8);
+}
+
+.mw-site {
+    max-width: var(--site-width);
+}
+
+.mw-site-narrow {
+    max-width: var(--site-width-narrow);
+}
+
+.mh-3 {
+    max-height: var(--height-3);
+}
+
+.mh-4 {
+    max-height: var(--height-4);
+}
+
+.mh-5 {
+    max-height: var(--height-5);
+}
+
+.mh-6 {
+    max-height: var(--height-6);
+}
+
+.mh-100 {
+    max-height: 100%;
+}
+
+.mh-50vh {
+    max-height: 50vh;
+}
+
+.mh-60vh {
+    max-height: 60vh;
+}
+
+.mh-70vh {
+    max-height: 70vh;
+}
+
+.mh-80vh {
+    max-height: 80vh;
+}
+
+.minw-100 {
+    min-width: 100%;
+}
+
+.minh-1 {
+    min-height: var(--height-1);
+}
+
+.minh-2 {
+    min-height: var(--height-2);
+}
+
+.minh-3 {
+    min-height: var(--height-3);
+}
+
+.minh-4 {
+    min-height: var(--height-4);
+}
+
+.minh-5 {
+    min-height: var(--height-5);
+}
+
+.minh-6 {
+    min-height: var(--height-6);
+}
+
+.h1-5 {
+    height: 1.5rem;
+}
+
+.fira {
+    font-family: "Fira Sans", sans-serif;
+}
+
+.bi-avoid {
+    break-inside: avoid;
+}
+
+.cc-auto {
+    column-count: auto;
+}
+
+.cc1 {
+    column-count: 1;
+}
+
+.cc2 {
+    column-count: 2;
+}
+
+.cc3 {
+    column-count: 3;
+}
+
+.cg0 {
+    column-gap: var(--spacing-none);
+}
+
+.cg1 {
+    column-gap: var(--spacing-extra-small);
+}
+
+.cg2 {
+    column-gap: var(--spacing-small);
+}
+
+.cg3 {
+    column-gap: var(--spacing-medium);
+}
+
+.cg4 {
+    column-gap: var(--spacing-large);
+}
+
+.cg5 {
+    column-gap: var(--spacing-extra-large);
+}
+
+.g0 {
+    gap: var(--spacing-none);
+}
+
+.g1 {
+    gap: var(--spacing-extra-small);
+}
+
+.g2 {
+    gap: var(--spacing-small);
+}
+
+.g3 {
+    gap: var(--spacing-medium);
+}
+
+.g4 {
+    gap: var(--spacing-large);
+}
+
+.g5 {
+    gap: var(--spacing-extra-large);
+}
+
+.grid {
+    display: grid;
+}
+
+.grid-1 {
+    grid-template-columns: 1fr;
+}
+
+.grid-2 {
+    grid-template-columns: 1fr 1fr;
+}
+
+.aspect-ratio--2x1 {
+    padding-bottom: 50%;
+}
+
+.hide-if-empty:empty {
+    display: none !important;
+}
+
+.fill-current {
+    fill: currentColor;
+}
+
+.rot-180 {
+    transform: rotate(180deg);
+}
+
+:not([hidden])+.show-when-sibling-hidden {
+    display: none;
+}
+
+.grab:hover {
+    cursor: grab;
+
+    .grabbing & {
+        cursor: grabbing;
+    }
+}
+
+.grabbing {
+    cursor: grabbing;
+}
+
+@media screen and (min-width: 35em) {
+    .w6-ns {
+        width: var(--width-6);
+    }
+
+    .w7-ns {
+        width: var(--width-7);
+    }
+
+    .w8-ns {
+        width: var(--width-8);
+    }
+
+    .bi-avoid-ns {
+        break-inside: avoid;
+    }
+
+    .cc-auto-ns {
+        column-count: auto;
+    }
+
+    .cc1-ns {
+        column-count: 1;
+    }
+
+    .cc2-ns {
+        column-count: 2;
+    }
+
+    .cc3-ns {
+        column-count: 3;
+    }
+
+    .cg0-ns {
+        column-gap: var(--spacing-none);
+    }
+
+    .cg1-ns {
+        column-gap: var(--spacing-extra-small);
+    }
+
+    .cg2-ns {
+        column-gap: var(--spacing-small);
+    }
+
+    .cg3-ns {
+        column-gap: var(--spacing-medium);
+    }
+
+    .cg4-ns {
+        column-gap: var(--spacing-large);
+    }
+
+    .cg5-ns {
+        column-gap: var(--spacing-extra-large);
+    }
+
+    .grid-1-ns {
+        grid-template-columns: 1fr;
+    }
+
+    .grid-2-ns {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .bg1-ns {
+        background-color: var(--bg-1);
+    }
+
+    .bg2-ns {
+        background-color: var(--bg-2);
+    }
+
+    .bg3-ns {
+        background-color: var(--bg-3);
+    }
+
+    .bg4-ns {
+        background-color: var(--bg-4);
+    }
+
+    .bg5-ns {
+        background-color: var(--bg-5);
+    }
+}
+
+@media screen and (min-width: 35em) and (max-width: 60em) {
+    .w6-m {
+        width: var(--width-6);
+    }
+
+    .w7-m {
+        width: var(--width-7);
+    }
+
+    .w8-m {
+        width: var(--width-8);
+    }
+
+    .bi-avoid-m {
+        break-inside: avoid;
+    }
+
+    .cc-auto-m {
+        column-count: auto;
+    }
+
+    .cc1-m {
+        column-count: 1;
+    }
+
+    .cc2-m {
+        column-count: 2;
+    }
+
+    .cc3-m {
+        column-count: 3;
+    }
+
+    .cg1-m {
+        column-gap: var(--spacing-extra-small);
+    }
+
+    .cg2-m {
+        column-gap: var(--spacing-small);
+    }
+
+    .cg3-m {
+        column-gap: var(--spacing-medium);
+    }
+
+    .cg4-m {
+        column-gap: var(--spacing-large);
+    }
+
+    .cg5-m {
+        column-gap: var(--spacing-extra-large);
+    }
+
+    .grid-1-m {
+        grid-template-columns: 1fr;
+    }
+
+    .grid-2-m {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .bg1-m {
+        background-color: var(--bg-1);
+    }
+
+    .bg2-m {
+        background-color: var(--bg-2);
+    }
+
+    .bg3-m {
+        background-color: var(--bg-3);
+    }
+
+    .bg4-m {
+        background-color: var(--bg-4);
+    }
+
+    .bg5-m {
+        background-color: var(--bg-5);
+    }
+}
+
+@media screen and (min-width: 60em) {
+    .w6-l {
+        width: var(--width-6);
+    }
+
+    .w7-l {
+        width: var(--width-7);
+    }
+
+    .w8-l {
+        width: var(--width-8);
+    }
+
+    .bi-avoid-l {
+        break-inside: avoid;
+    }
+
+    .cc-auto-l {
+        column-count: auto;
+    }
+
+    .cc1-l {
+        column-count: 1;
+    }
+
+    .cc2-l {
+        column-count: 2;
+    }
+
+    .cc3-l {
+        column-count: 3;
+    }
+
+    .cg1-l {
+        column-gap: var(--spacing-extra-small);
+    }
+
+    .cg2-l {
+        column-gap: var(--spacing-small);
+    }
+
+    .cg3-l {
+        column-gap: var(--spacing-medium);
+    }
+
+    .cg4-l {
+        column-gap: var(--spacing-large);
+    }
+
+    .cg5-l {
+        column-gap: var(--spacing-extra-large);
+    }
+
+    .grid-1-l {
+        grid-template-columns: 1fr;
+    }
+
+    .grid-2-l {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .bg1-l {
+        background-color: var(--bg-1);
+    }
+
+    .bg2-l {
+        background-color: var(--bg-2);
+    }
+
+    .bg3-l {
+        background-color: var(--bg-3);
+    }
+
+    .bg4-l {
+        background-color: var(--bg-4);
+    }
+
+    .bg5-l {
+        background-color: var(--bg-5);
+    }
+}
+
+/*
+TODO(redesign): It's really unfortunate that we rely on text stuff so much...it
+makes all our SVGs fuzzy. Evaluate the places we use this and see if we can use the
+lite variant instead.
+*/
+.svgicon {
+    svg {
+        fill: currentColor;
+        width: 1em;
+        height: 1em;
+        overflow: visible;
+    }
+
+    &:not(.svgicon-nofix) svg {
+        transform: translate(0px, 0.1em);
+    }
+}
+
+.svgicon-lite {
+    svg {
+        fill: currentColor;
+        overflow: visible;
+    }
+}
+
+.sr {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+    transition: 0.2s all;
+}
+
+.sr-focusable:focus {
+    padding: 15px 10px;
+    height: auto;
+    width: auto;
+    background: var(--content-background);
+    clip: initial;
+    clip-path: initial;
+    z-index: 99999;
+}
+
+.breadcrumb {
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &.current {
+        text-overflow: clip ellipsis;
+    }
+}
+
+/* Old stuff that should probably be moved? */
+
+.optionbar {
+    width: 100%;
+    padding-bottom: var(--spacing-small);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-align: center;
+    align-items: center;
+    border-style: dashed;
+    border-width: 0 0 1px;
+    border-color: var(--bg-3);
+
+    @media screen and (min-width: 35em) {
+        flex-direction: row;
+        text-align: left;
+        padding-bottom: 0;
+    }
+
+    &.bottom {
+        border-bottom-width: 0;
+        border-top-width: 1px;
+        padding-bottom: 0;
+        padding-top: var(--spacing-small);
+
+        @media screen and (min-width: 35em) {
+            padding-top: 0;
+        }
+    }
+
+    &.center {
+        /* TODO: find this and kill it */
+        text-align: center;
+    }
+
+    .options {
+        display: flex;
+        flex-direction: column;
+
+        @media screen and (min-width: 35em) {
+            flex-direction: row;
+        }
+
+        .option {
+            padding: var(--spacing-extra-small) var(--spacing-small);
+
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+
+            @media screen and (min-width: 35em) {
+                padding-top: var(--spacing-small);
+                padding-bottom: var(--spacing-small);
+            }
+        }
+    }
+
+    .group {
+        display: inline-block;
+        height: 100%;
+        margin: auto;
+    }
+}
+
+.tab {
+    background-color: var(--tab-background);
+    padding: var(--spacing-small);
+}
+
+.background-even:nth-of-type(even) {
+    background-color: var(--background-even-background);
+    --fade-color: var(--background-even-background);
+}

src/rawdata/scss/editor.css

@@ -0,0 +1,75 @@
+#preview:empty::after {
+  content: 'A preview of your post will appear here.';
+  color: var(--dimmer-color);
+  font-style: italic;
+}
+
+@media screen and (min-width: 35em) {
+  #preview-container {
+    max-height: calc(100vh - 20rem);
+    overflow: auto;
+  }
+}
+
+.edit-form {
+  .edit-form-row {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--spacing-medium);
+    margin-bottom: var(--spacing-medium);
+
+    @media screen and (min-width: 35em) {
+      flex-direction: row;
+    }
+
+    > :first-child {
+      width: 100%;
+      font-weight: 500;
+      flex-grow: 0;
+      flex-shrink: 0;
+      text-align: left;
+      padding-right: 0;
+      padding-bottom: var(--spacing-extra-small);
+
+      @media screen and (min-width: 35em) {
+        width: var(--width-4);
+        text-align: right;
+        padding-right: var(--spacing-small);
+        padding-bottom: 0;
+      }
+    }
+
+    > :nth-child(2) {
+      flex-grow: 1;
+      overflow: hidden;
+    }
+
+    .pt-input-ns {
+      @media screen and (min-width: 35em) {
+        padding-top: var(--spacing-extra-small);
+      }
+    }
+  }
+
+  input[type=text] {
+    width: 100%;
+
+    @media screen and (min-width: 35em) {
+      max-width: var(--width-5);
+    }
+  }
+
+  input[type=text]:invalid {
+    border-color: var(--red);
+  }
+
+  textarea {
+    width: 100%;
+    max-width: 100%;
+    height: var(--height-3);
+
+    @media screen and (min-width: 35em) {
+      width: var(--width-6);
+    }
+  }
+}

src/rawdata/scss/education.css

@@ -1,26 +1,26 @@
 .edu-course {
     &.highlight {
         border-left: 0.25rem solid black;
-        @include usevar(border-color, link-color);
-        @include usevar(background-color, theme-color-dimmest);
+        border-color: var(--link-color);
+        background-color: var(--theme-color-dimmest);
     }
 
     .edu-article.coming-soon {
-        @extend .c--dimmer;
+        color: var(--dimmer-color);
         font-style: italic;
     }
 
     .edu-article::after {
-        $height: 10rem;
+        --height: 10rem;
         content: '';
         position: absolute;
         width: 1rem;
-        height: $height;
+        height: var(--height);
         border-width: 0 0 1px 1px;
         border-style: solid;
-        @include usevar(border-color, dimmest-color);
+        border-color: var(--bg-3);
         left: -1.5rem;
-        top: 1rem - $height;
+        top: calc(1rem - var(--height));
         border-bottom-left-radius: 0.5rem;
     }
 }
@@ -37,4 +37,4 @@
     .note {
         color: red;
     }
-}
+}

src/rawdata/scss/form.css

@@ -0,0 +1,95 @@
+.hmn-form {
+
+    input,
+    textarea,
+    select {
+        color: var(--color);
+        accent-color: var(--button-color-primary);
+        background-color: var(--bg-3);
+        padding: 0.75rem;
+        outline: none;
+
+        &:not(.no-border) {
+            border: 1px solid var(--border-color);
+        }
+
+        &:focus {
+            border-color: var(--border-color-focused);
+
+            ~.also-focus {
+                border-color: var(--border-color-focused);
+            }
+        }
+
+        .error &,
+        &.error,
+        &:user-invalid {
+            border-color: var(--border-color-error);
+        }
+
+        &:disabled {
+            background-color: var(--bg-5);
+            color: var(--border-color);
+        }
+    }
+
+    textarea {
+        resize: vertical;
+    }
+
+    button,
+    input[type=submit] {
+        color: var(--color);
+        background-color: var(--bg-3);
+        cursor: pointer;
+        font-weight: 500;
+        line-height: 1.5rem;
+
+        &.btn-primary {
+            background-color: var(--button-color-primary);
+        }
+
+        &:not(.no-border) {
+            border: none;
+        }
+
+        &:not(.no-padding) {
+            padding: 0.5rem 1.5rem;
+        }
+    }
+
+    label {
+        font-weight: 600;
+    }
+
+    .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-extra-small);
+        line-height: 1.4;
+    }
+
+    .error .error-msg {
+        color: var(--color-error);
+    }
+
+    fieldset {
+        margin: 0;
+        padding: 0;
+        border: 1px solid var(--border-color);
+        background-color: var(--bg-2);
+        display: flex;
+        flex-direction: column;
+    }
+
+    legend {
+        background-color: var(--bg-1);
+        font-weight: bold;
+        float: left;
+        padding: var(--spacing-medium);
+
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--border-color);
+        }
+    }
+}

src/rawdata/scss/forum.css

@@ -0,0 +1,173 @@
+.thread-list-item .latestpost {
+  width: 16.5rem;
+}
+
+.excerpt-fade {
+  background-image: linear-gradient(to top, var(--fade-color), rgba(0, 0, 0, 0));
+  pointer-events: none;
+}
+
+.read {
+  color: var(--forum-thread-read-color);
+
+  td {
+    color: var(--forum-thread-read-color);
+  }
+
+  a {
+    color: var(--forum-thread-read-link-color);
+  }
+
+  .title {
+    font-weight: 500;
+  }
+}
+
+.goto {
+  font-size: 200%;
+  width: 30px;
+
+  a {
+    display: block;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    position: relative;
+    line-height: 100%;
+    background-color: transparent;
+  }
+}
+
+.badge {
+  display: inline-block;
+  border-radius: 1000em;
+  padding: 0 0.8em;
+  font-size: 0.9em;
+  line-height: 1.8em;
+  font-weight: bold;
+
+  &.staff {
+    background-color: #17b2c6;
+    color: white;
+
+    &::before {
+      content: 'Staff';
+    }
+  }
+}
+
+.postid a {
+  margin-top: -4rem;
+  padding-top: 4rem;
+  outline: none;
+}
+
+.codeblocktable {
+  font-family: monospace;
+  font-size: 14px;
+  overflow: auto;
+  line-height: 1.5em;
+
+  tbody {
+    width: 100%;
+  }
+
+  .linenos {
+    color: var(--theme-dim);
+    font-weight: 500;
+    padding: 5px;
+    background: rgba(0, 0, 0, 0.15);
+  }
+
+  .code {
+    /* Background color given by theme */
+    padding-right: 20px;
+    padding-left: 10px;
+    max-width: 80em;
+  }
+}
+
+.post {
+  .action.button {
+    padding: 0px 10px;
+    margin-top: 0px;
+    margin-right: 4px;
+    background-color: transparent;
+    font-size: 130%;
+    border-radius: 0px;
+    border-width: 0px;
+    border-bottom-width: 2px;
+    transition: border-bottom-width 0.1s;
+
+    &:hover {
+      border-bottom-width: 4px;
+    }
+  }
+}
+
+.blog {
+  .post {
+    .meta {
+      position: relative;
+    }
+
+    &.op .meta {
+      margin-bottom: 10px;
+    }
+
+    .badges {
+      width: 40px;
+      font-size: 0.7em;
+      text-align: center;
+    }
+  }
+
+  .sidebar {
+    .post>.author {
+      padding: 15px;
+      text-align: center;
+    }
+
+    .recent-posts {
+      text-align: center;
+      padding: 15px;
+
+      h2 {
+        display: inline;
+      }
+    }
+
+    .archive ul {
+      list-style-type: none;
+      text-align: left;
+    }
+  }
+
+  .post-list {
+    .post {
+      &:nth-child(even) {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.bbtable {
+  width: 100%;
+  border: 1px solid;
+
+  td,
+  th {
+    border: 1px solid;
+    padding: 4px;
+  }
+
+  th {
+    background: rgba(0, 0, 0, 0.15);
+    font-weight: bold;
+    border-bottom-width: 2px;
+  }
+
+  tbody tr:nth-child(even) {
+    background: rgba(0, 0, 0, 0.05);
+  }
+}

src/rawdata/scss/header.css

@@ -0,0 +1,184 @@
+header.old {
+  --logo-height: 3.75rem;
+
+  .hmn-logo {
+    height: var(--logo-height);
+    width: 100%;
+    text-transform: uppercase;
+    font-family: 'MohaveHMN', sans-serif;
+    font-size: 2rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white !important;
+
+    &.big {
+      @media screen and (min-width: 35em) {
+        width: 11.25rem;
+      }
+    }
+
+    &.small {
+      @media screen and (min-width: 35em) {
+        width: var(--logo-height);
+        padding: 0.8rem;
+        text-align: justify;
+        text-align-last: justify;
+        text-justify: inter-character;
+        flex-direction: column;
+        font-size: 1rem;
+        line-height: 1em;
+        align-items: stretch;
+      }
+    }
+  }
+
+  .items {
+    position: relative;
+    /* will be used on mobile, when .root-item is not relative */
+  }
+
+  .root-item {
+    @media screen and (min-width: 35em) {
+      & {
+        position: relative;
+        /* makes submenus align to this item instead of the screen */
+        height: var(--logo-height);
+      }
+    }
+
+    &:not(:hover):not(.clicked)>.submenu {
+      display: none;
+    }
+
+    &.clicked .svgicon {
+      transform: rotate(180deg);
+    }
+
+    >a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      font-weight: bold;
+    }
+
+    .svgicon {
+      font-size: 0.7em;
+    }
+  }
+
+  &:not(.clicked) .root-item:not(:hover),
+  &.clicked .root-item:not(.clicked) {
+    >.submenu {
+      display: none;
+    }
+  }
+
+  .submenu {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    min-width: 10rem;
+    border-top-style: solid;
+    border-bottom-style: solid;
+
+    @media screen and (min-width: 35em) {
+      & {
+        border-top-style: none;
+        border-left-style: solid;
+        border-right-style: solid;
+        left: initial;
+        right: initial;
+      }
+    }
+
+    >a {
+      display: block;
+      white-space: nowrap;
+      z-index: 1;
+      font-weight: bold;
+      text-align: center;
+
+      @media screen and (min-width: 35em) {
+        & {
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
+header {
+  background-color: var(--bg-2);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+
+  .hmn-logo {
+    font-family: 'MohaveHMN', sans-serif;
+    text-transform: uppercase;
+    font-size: 1.6rem;
+    padding: 0.6rem 0.8rem;
+    line-height: 1;
+  }
+
+  .menu-chevron {
+    /* ensure that it also has .svgicon */
+    display: inline-block;
+    margin-left: var(--spacing-extra-small);
+  }
+
+  .avatar {
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
+  .header-nav {
+
+    >a,
+    >.root-item>a {
+      display: block;
+      padding: var(--spacing-medium);
+    }
+
+    .submenu {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      z-index: 100;
+      min-width: 8rem;
+      background-color: var(--bg-2);
+      border-style: solid;
+      border-width: 1px;
+      border-top-width: 0;
+
+      >a {
+        padding: var(--spacing-small) var(--spacing-medium);
+        display: block;
+        white-space: nowrap;
+        z-index: 1;
+      }
+    }
+
+    .root-item {
+      &:not(:hover):not(.clicked)>.submenu {
+        display: none;
+      }
+
+      &.clicked .svgicon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &:not(.clicked) .root-item:not(:hover),
+  &.clicked .root-item:not(.clicked) {
+    >.submenu {
+      display: none;
+    }
+  }
+}

src/rawdata/scss/icons.css

@@ -9,65 +9,65 @@ span.icon {
 
 span.icon-settings::before {
   font-family: "icons";
-  content:"0";
+  content: "0";
 }
 
 span.icon-link::before {
   font-family: "icons";
-  content:"1";
+  content: "1";
 }
 
 span.icon-logout::before {
   font-family: "icons";
-  content:"2";
+  content: "2";
 }
 
 span.icon-twitter::before {
   font-family: "icons";
-  content:"#";
+  content: "#";
 }
 
 span.icon-twitch::before {
   font-family: "icons";
-  content:"$";
+  content: "$";
 }
 
 span.icon-github::before {
   font-family: "icons";
-  content:"%";
+  content: "%";
 }
 
 span.icon-patreon::before {
   font-family: "icons";
-  content:"&";
+  content: "&";
 }
 
 span.icon-youtube::before {
   font-family: "icons";
-  content:"'";
+  content: "'";
 }
 
 span.icon-soundcloud::before {
   font-family: "icons";
-  content:"*";
+  content: "*";
 }
 
 span.icon-web::before {
   font-family: "icons";
-  content:"3";
+  content: "3";
 }
 
 span.icon-itchio::before {
   font-family: "icons";
-  content:"+";
+  content: "+";
 }
 
 span.icon-hitbox::before {
   font-family: "icons";
-  content:",";
+  content: ",";
 }
 
 span.icon-rss::before {
   font-family: "icons";
-  content:"4";
+  content: "4";
 }

src/rawdata/scss/notices.css

@@ -0,0 +1,28 @@
+.notice a {
+	color: inherit;
+	border-bottom-color: inherit;
+}
+
+.notice-hiatus {
+	background-color: var(--notice-hiatus-color);
+}
+
+.notice-dead {
+	background-color: var(--notice-dead-color);
+}
+
+.notice-lts {
+	background-color: var(--notice-lts-color);
+}
+
+.notice-success {
+	background-color: var(--notice-success-color);
+}
+
+.notice-warn {
+	background-color: var(--notice-warn-color);
+}
+
+.notice-failure {
+	background-color: var(--notice-failure-color);
+}

src/rawdata/scss/progress_bar.css

@@ -0,0 +1,15 @@
+.upload_bar.uploading .instructions,
+.upload_bar:not(.uploading) .progress {
+	display: none;
+}
+
+.upload_bar .progress_bar {
+	border: 2px solid;
+	border-color: var(--link-color);
+	padding: 2px;
+}
+
+.upload_bar .progress_bar>div {
+	background-color: var(--link-color);
+	height: 100%;
+}

src/rawdata/scss/projects.css

@@ -0,0 +1,87 @@
+.pair {
+  display: flex;
+  align-items: flex-start;
+
+  .key {
+    font-weight: bold;
+    flex-shrink: 0;
+  }
+
+  .value {
+    text-align: right;
+    flex-grow: 1;
+  }
+}
+
+.project-carousel {
+  .carousel-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    br {
+      line-height: 0.6em;
+    }
+  }
+
+  .carousel-item-small {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    &:not(.active) {
+      display: none;
+    }
+  }
+
+  .carousel-description {
+    max-height: 14rem;
+    overflow: hidden;
+  }
+
+  .carousel-fade {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 30px;
+
+    background: linear-gradient(var(--dim-background-transparent), var(--dim-background));
+  }
+}
+
+.project-card {
+  color: var(--fg-font-color);
+  background-color: var(--card-background);
+
+  &.project-card-black {
+    background-color: var(--card-background-transparent);
+  }
+
+  .slideshow & {
+    margin-top: 8px;
+  }
+
+  .image-container {
+    --image-size: 8rem;
+
+    width: var(--image-size);
+    min-height: var(--image-size);
+
+    .image {
+      position: absolute;
+      width: var(--image-size);
+      top: 0;
+      bottom: 0;
+    }
+  }
+
+  .badges:empty {
+    display: none;
+  }
+
+  .badge {
+    color: white;
+    border-radius: 5px;
+  }
+}

src/rawdata/scss/showcase.css

@@ -0,0 +1,5 @@
+.showcase-item .gradient {
+  width: 100%;
+  height: 114px;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
+}

src/rawdata/scss/style.css

@@ -0,0 +1,20 @@
+@import "tachyons.min.css";
+
+@import "vars.css";
+@import "core.css";
+
+@import "carousel.css";
+@import "content.css";
+@import "editor.css";
+@import "education.css";
+@import "form.css";
+@import "forum.css";
+@import "header.css";
+@import "icons.css";
+@import "notices.css";
+@import "progress_bar.css";
+@import "projects.css";
+@import "showcase.css";
+@import "syntax.css";
+@import "tabs.css";
+@import "timeline.css";

src/rawdata/scss/style.scss

@@ -14,17 +14,17 @@
 @import 'episodes';
 @import 'education';
 @import 'forms';
-@import 'forum';
+// @import 'forum';
 @import 'header';
 @import 'icons';
 @import 'irc';
-@import 'landing';
+// @import 'landing';
 @import 'library';
 @import 'profile';
 @import 'projects';
 @import 'showcase';
 @import 'streams';
-@import 'timeline';
+// @import 'timeline';
 @import 'carousel';
 @import 'notices';
 @import 'progress_bar';

src/rawdata/scss/syntax.css

@@ -0,0 +1,39 @@
+pre, code, .codeblock {
+    .hll { background-color: #ffffcc }
+    .c { color: #008000 } /* Comment */
+    .err { border: 1px solid #FF0000 } /* Error */
+    .k { color: #0000ff } /* Keyword */
+    .ch { color: #008000 } /* Comment.Hashbang */
+    .cm { color: #008000 } /* Comment.Multiline */
+    .cp { color: #0000ff } /* Comment.Preproc */
+    .cpf { color: #008000 } /* Comment.PreprocFile */
+    .c1 { color: #008000 } /* Comment.Single */
+    .cs { color: #008000 } /* Comment.Special */
+    .ge { font-style: italic } /* Generic.Emph */
+    .gh { font-weight: bold } /* Generic.Heading */
+    .gp { font-weight: bold } /* Generic.Prompt */
+    .gs { font-weight: bold } /* Generic.Strong */
+    .gu { font-weight: bold } /* Generic.Subheading */
+    .kc { color: #0000ff } /* Keyword.Constant */
+    .kd { color: #0000ff } /* Keyword.Declaration */
+    .kn { color: #0000ff } /* Keyword.Namespace */
+    .kp { color: #0000ff } /* Keyword.Pseudo */
+    .kr { color: #0000ff } /* Keyword.Reserved */
+    .kt { color: #2b91af } /* Keyword.Type */
+    .s { color: #a31515 } /* Literal.String */
+    .nc { color: #2b91af } /* Name.Class */
+    .ow { color: #0000ff } /* Operator.Word */
+    .sa { color: #a31515 } /* Literal.String.Affix */
+    .sb { color: #a31515 } /* Literal.String.Backtick */
+    .sc { color: #a31515 } /* Literal.String.Char */
+    .dl { color: #a31515 } /* Literal.String.Delimiter */
+    .sd { color: #a31515 } /* Literal.String.Doc */
+    .s2 { color: #a31515 } /* Literal.String.Double */
+    .se { color: #a31515 } /* Literal.String.Escape */
+    .sh { color: #a31515 } /* Literal.String.Heredoc */
+    .si { color: #a31515 } /* Literal.String.Interpol */
+    .sx { color: #a31515 } /* Literal.String.Other */
+    .sr { color: #a31515 } /* Literal.String.Regex */
+    .s1 { color: #a31515 } /* Literal.String.Single */
+    .ss { color: #a31515 } /* Literal.String.Symbol */
+}

src/rawdata/scss/tabs.css

@@ -0,0 +1,8 @@
+.tab-button {
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+}
+
+.tab-button-active {
+    border-color: var(--link-color);
+}

src/rawdata/scss/tachyons-vars.css

@@ -0,0 +1,140 @@
+/* Variables copied from tachyons/variables.scss and adapted to CSS variables. */
+
+:root {
+    --sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
+    --serif: georgia, serif;
+    --code: consolas, monaco, monospace;
+    --font-size-headline: 6rem;
+    --font-size-subheadline: 5rem;
+    --font-size-1: 3rem;
+    --font-size-2: 2.25rem;
+    --font-size-3: 1.5rem;
+    --font-size-4: 1.25rem;
+    --font-size-5: 1rem;
+    --font-size-6: .875rem;
+    --font-size-7: .75rem;
+    --letter-spacing-tight: -.05em;
+    --letter-spacing-1: .1em;
+    --letter-spacing-2: .25em;
+    --line-height-solid: 1;
+    --line-height-title: 1.25;
+    --line-height-copy: 1.5;
+    --measure: 30em;
+    --measure-narrow: 20em;
+    --measure-wide: 34em;
+    --spacing-none: 0;
+    --spacing-extra-small: .25rem;
+    --spacing-small: .5rem;
+    --spacing-medium: 1rem;
+    --spacing-large: 2rem;
+    --spacing-extra-large: 4rem;
+    --spacing-extra-extra-large: 8rem;
+    --spacing-extra-extra-extra-large: 16rem;
+    --spacing-copy-separator: 1.5em;
+    --height-1: 1rem;
+    --height-2: 2rem;
+    --height-3: 4rem;
+    --height-4: 8rem;
+    --height-5: 16rem;
+    --height-6: 32rem;
+    --width-1: 1rem;
+    --width-2: 2rem;
+    --width-3: 4rem;
+    --width-4: 8rem;
+    --width-5: 16rem;
+    --width-6: 32rem;
+    --width-7: 48rem;
+    --width-8: 64rem;
+    --max-width-1: 1rem;
+    --max-width-2: 2rem;
+    --max-width-3: 4rem;
+    --max-width-4: 8rem;
+    --max-width-5: 16rem;
+    --max-width-6: 32rem;
+    --max-width-7: 48rem;
+    --max-width-8: 64rem;
+    --max-width-9: 96rem;
+    --border-radius-none: 0;
+    --border-radius-1: .125rem;
+    --border-radius-2: .25rem;
+    --border-radius-3: .5rem;
+    --border-radius-4: 1rem;
+    --border-radius-circle: 100%;
+    --border-radius-pill: 9999px;
+    --border-width-none: 0;
+    --border-width-1: .125rem;
+    --border-width-2: .25rem;
+    --border-width-3: .5rem;
+    --border-width-4: 1rem;
+    --border-width-5: 2rem;
+    --box-shadow-1: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
+    --box-shadow-2: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
+    --box-shadow-3: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
+    --box-shadow-4: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
+    --box-shadow-5: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
+    --black: #000;
+    --near-black: #111;
+    --dark-gray: #333;
+    --mid-gray: #555;
+    --gray: #777;
+    --silver: #999;
+    --light-silver: #aaa;
+    --moon-gray: #ccc;
+    --light-gray: #eee;
+    --near-white: #f4f4f4;
+    --white: #fff;
+    --transparent: transparent;
+    --black-90: rgba(0, 0, 0, .9);
+    --black-80: rgba(0, 0, 0, .8);
+    --black-70: rgba(0, 0, 0, .7);
+    --black-60: rgba(0, 0, 0, .6);
+    --black-50: rgba(0, 0, 0, .5);
+    --black-40: rgba(0, 0, 0, .4);
+    --black-30: rgba(0, 0, 0, .3);
+    --black-20: rgba(0, 0, 0, .2);
+    --black-10: rgba(0, 0, 0, .1);
+    --black-05: rgba(0, 0, 0, .05);
+    --black-025: rgba(0, 0, 0, .025);
+    --black-0125: rgba(0, 0, 0, .0125);
+    --white-90: rgba(255, 255, 255, .9);
+    --white-80: rgba(255, 255, 255, .8);
+    --white-70: rgba(255, 255, 255, .7);
+    --white-60: rgba(255, 255, 255, .6);
+    --white-50: rgba(255, 255, 255, .5);
+    --white-40: rgba(255, 255, 255, .4);
+    --white-30: rgba(255, 255, 255, .3);
+    --white-20: rgba(255, 255, 255, .2);
+    --white-10: rgba(255, 255, 255, .1);
+    --white-05: rgba(255, 255, 255, .05);
+    --white-025: rgba(255, 255, 255, .025);
+    --white-0125: rgba(255, 255, 255, .0125);
+    --dark-red: #e7040f;
+    --red: #ff4136;
+    --light-red: #ff725c;
+    --orange: #ff6300;
+    --gold: #ffb700;
+    --yellow: #ffd700;
+    --light-yellow: #fbf1a9;
+    --purple: #5e2ca5;
+    --light-purple: #a463f2;
+    --dark-pink: #d5008f;
+    --hot-pink: #ff41b4;
+    --pink: #ff80cc;
+    --light-pink: #ffa3d7;
+    --dark-green: #137752;
+    --green: #19a974;
+    --light-green: #9eebcf;
+    --navy: #001b44;
+    --dark-blue: #00449e;
+    --blue: #357edd;
+    --light-blue: #96ccff;
+    --lightest-blue: #cdecff;
+    --washed-blue: #f6fffe;
+    --washed-green: #e8fdf5;
+    --washed-yellow: #fffceb;
+    --washed-red: #ffdfdf;
+
+    --breakpoint-not-small: 'screen and (min-width: 35em)';
+    --breakpoint-medium: 'screen and (min-width: 35em) and (max-width: 60em)';
+    --breakpoint-large: 'screen and (min-width: 60em)';
+}

src/rawdata/scss/themes/dark/_variables.scss

@@ -25,8 +25,6 @@ $vars: (
 
   menu-bottom-border-color: #444,
 
-  login-popup-background: #181818,
-
   content-background: #202020,
   content-background-transparent: rgba(#202020, 0),
   dim-background: #252525,

src/rawdata/scss/themes/light/_variables.scss

@@ -25,8 +25,6 @@ $vars: (
 
   menu-bottom-border-color: black,
 
-  login-popup-background: #fbfbfb,
-
   content-background: #f8f8f8,
   content-background-transparent: rgba(#f8f8f8, 0),
   dim-background: #f0f0f0,

src/rawdata/scss/timeline.css

@@ -0,0 +1,67 @@
+.avatar {
+    object-fit: cover;
+    overflow: hidden;
+    background-color: var(--bg-3);
+    flex-shrink: 0;
+    border: none;
+
+    width: var(--avatar-size-normal);
+    height: var(--avatar-size-normal);
+}
+
+.avatar.avatar-user {
+    border-radius: 999px;
+}
+
+.avatar.avatar-small {
+    width: var(--avatar-size-small);
+    height: var(--avatar-size-small);
+}
+
+.timeline-item {
+    background-color: var(--card-background);
+    --fade-color: var(--card-background);
+    color: var(--main-color);
+
+    .timeline-media {
+        background-color: var(--timeline-media-background);
+        max-height: 60vh;
+
+        &.timeline-embed {
+            /* aspect-ratio aspect-ratio--16x9 */
+            height: 0;
+            position: relative;
+            padding-bottom: 56.25%;
+
+            >iframe {
+                /* aspect-ratio--object */
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 100;
+            }
+        }
+
+        >* {
+            display: block;
+            max-width: 100%;
+        }
+    }
+}
+
+.timeline-modal {
+    .container {
+        max-height: 100vh;
+        max-width: 100%;
+
+        @media screen and (min-width: 35em) {
+            width: auto;
+            max-width: calc(100% - 2rem);
+            max-height: calc(100vh - 2rem);
+        }
+    }
+}

src/rawdata/scss/vars.css

@@ -0,0 +1,114 @@
+/*
+Media queries cannot have variables, so here are media queries you can copy-paste as necessary:
+
+$breakpoint-not-small: screen and (min-width: 35em)
+$breakpoint-medium: screen and (min-width: 35em) and (max-width: 60em)
+$breakpoint-large: screen and (min-width: 60em)
+*/
+
+@import "tachyons-vars.css";
+
+:root {
+    --background-color: white;
+    --color: black;
+    --link-color: #d12991;
+    --red: #c61d24;
+
+    /* Default theme colors in case the project.css is busted */
+    --theme-color: #b1b1b1;
+    --theme-color-dim: #c0c0c0;
+    --theme-color-dimmer: #dddddd;
+    --theme-color-dimmest: #f0f0f0;
+
+    --theme-color-dark: #666;
+    --theme-color-light: #666;
+
+    --main-background-color: #f8f8f8;
+    --main-background-color-transparent: rgba(#f8f8f8, 0);
+
+    --card-background: #ebebeb;
+    --card-background-hover: #f1f1f1;
+    --card-background-transparent: #ebebeb00;
+
+    --timeline-media-background: #b4b4b466;
+
+    --bg-1: #f8f8f8;
+    --bg-2: #e8e8e8;
+    --bg-3: #d8d8d8;
+
+    --border-color: #bfbfbf;
+    --border-color-focused: #4e55ff;
+    --border-color-error: #ff3a3a;
+
+    --button-color-primary: #ee84ff;
+
+    --forum-thread-read-color: #555;
+    --forum-thread-read-link-color: #888;
+
+    --notice-hiatus-color: #aa7d30;
+    --notice-dead-color: #b42222;
+    --notice-lts-color: #43a52f;
+    --notice-success-color: #43a52f;
+    --notice-warn-color: #aa7d30;
+    --notice-failure-color: #b42222;
+
+    --spoiler-border: #aaa;
+
+    --site-width: 54rem;
+    --site-width-narrow: 40rem;
+
+    --avatar-size-small: 1.5rem;
+    --avatar-size-normal: 2.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #2f2f2f;
+
+        --color: #eee;
+        --link-color: #ff5dc2;
+        --color-error: #ff6666;
+
+        --theme-color: #666;
+        --theme-color-dim: #444;
+        --theme-color-dimmer: #383838;
+        --theme-color-dimmest: #333;
+
+        --theme-color-dark: #666;
+        --theme-color-light: #666;
+
+        --main-background-color: #202020;
+        --main-background-color-transparent: rgba(#202020, 0);
+
+        /* --card-background: #282828; */
+        --card-background: #494949;
+        --card-background-hover: #333;
+        --card-background-transparent: #24242400;
+
+        --timeline-media-background: #24242466;
+
+        --bg-1: #1f1f1f;
+        --bg-2: #2f2f2f;
+        --bg-3: #494949;
+        --bg-4: #595959;
+        --bg-5: #cbcbcb;
+
+        --border-color: #595959;
+        --border-color-focused: #4e55ff;
+        --border-color-error: #ff3a3a;
+
+        --button-color-primary: #c900ea;
+
+        --forum-thread-read-color: #777;
+        --forum-thread-read-link-color: #999;
+
+        --notice-hiatus-color: #876327;
+        --notice-dead-color: #7a2020;
+        --notice-lts-color: #2a681d;
+        --notice-success-color: #2a681d;
+        --notice-warn-color: #876327;
+        --notice-failure-color: #7a2020;
+
+        --spoiler-border: #777;
+    }
+}

src/templates/img/add.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M6,6L6,0L8,0L8,6L14,6L14,8L8,8L8,14L6,14L6,8L0,8L0,6L6,6Z" style="fill-rule:nonzero;"/>
+</svg>

src/templates/img/arrow-right-up.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-5,-5)">
+        <path d="M16.004,9.414L7.397,18.021L5.983,16.607L14.589,8L7.004,8L7.004,6L18.004,6L18.004,17L16.004,17L16.004,9.414Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

src/templates/img/chevron-down.svg

@@ -1,7 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 186 186" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,185.342,0.00025)">
+<svg width="10" height="10" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(3.30372e-18,0.0539539,-0.0539539,3.30372e-18,9.99997,4.04654e-05)">
         <path d="M51.707,185.343C48.966,185.343 46.214,184.299 44.114,182.194C39.92,178 39.92,171.213 44.114,167.019L118.466,92.672L44.114,18.32C39.92,14.126 39.92,7.333 44.114,3.145C48.308,-1.049 55.101,-1.049 59.294,3.145L141.228,85.079C145.422,89.273 145.422,96.066 141.228,100.254L59.294,182.193C57.201,184.293 54.454,185.343 51.707,185.343Z" style="fill-rule:nonzero;"/>
     </g>
 </svg>

src/templates/img/chevron-right.svg

@@ -1,10 +1,5 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-	 viewBox="0 0 185.343 185.343">
-<g>
-	<path d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175
-		l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934
-		c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/>
-</g>
-</svg>
+<svg width="10" height="10" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.053954,0,0,0.053954,2.6977e-05,4.38728e-21)">
+        <path d="M51.707,185.343C48.966,185.343 46.214,184.299 44.114,182.194C39.92,178 39.92,171.213 44.114,167.019L118.466,92.672L44.114,18.32C39.92,14.126 39.92,7.333 44.114,3.145C48.308,-1.049 55.101,-1.049 59.294,3.145L141.228,85.079C145.422,89.273 145.422,96.066 141.228,100.254L59.294,182.193C57.201,184.293 54.454,185.343 51.707,185.343Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

src/templates/img/close.svg

@@ -1,11 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 47.971 47.971">
-<g>
-	<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
-		c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
-		C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
-		s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/>
-</g>
-</svg>
+<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7,5.444l5.444,-5.444l1.556,1.556l-5.444,5.444l5.444,5.444l-1.556,1.556l-5.444,-5.444l-5.444,5.444l-1.556,-1.556l5.444,-5.444l-5.444,-5.444l1.556,-1.556l5.444,5.444Z"/></svg>

src/templates/img/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM13.4142 13.9997L15.182 15.7675L13.7678 17.1817L12 15.4139L10.2322 17.1817L8.81802 15.7675L10.5858 13.9997L8.81802 12.232L10.2322 10.8178L12 12.5855L13.7678 10.8178L15.182 12.232L13.4142 13.9997ZM9 4V6H15V4H9Z"></path></svg>

src/templates/img/draggable.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z"></path></svg>

src/templates/img/logos/app-store.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM8.82258 15.3427C8.42804 14.8663 7.9373 14.6957 7.34401 14.834L7.19355 14.875L6.60484 15.8911C6.37903 16.2863 6.5121 16.7903 6.90726 17.0161C7.26949 17.2231 7.7232 17.1286 7.97023 16.807L8.03226 16.7137L8.82258 15.3427ZM13.2097 8.66129C12.7218 9.06452 12.2298 10.2581 12.9194 11.4476L15.9597 16.7137C16.1895 17.1089 16.6895 17.2419 17.0847 17.0161C17.4469 16.8054 17.5889 16.3677 17.4361 15.9919L17.3871 15.8911L16.5847 14.5H17.7742C18.2298 14.5 18.5968 14.1331 18.5968 13.6774C18.5968 13.2568 18.2841 12.9118 17.8776 12.8612L17.7742 12.8548H15.6331L13.44 9.05741L13.2097 8.66129ZM13.4879 5.61694C13.1257 5.40995 12.672 5.50451 12.4249 5.82608L12.3629 5.91935L11.996 6.55242L11.6371 5.91935C11.4073 5.52419 10.9073 5.39113 10.5121 5.61694C10.1499 5.82762 10.0079 6.26532 10.1606 6.64118L10.2097 6.74194L11.0484 8.19758L8.3629 12.8508H6.26613C5.81048 12.8508 5.44355 13.2177 5.44355 13.6734C5.44355 14.094 5.7562 14.439 6.16268 14.4896L6.26613 14.496H13.746C14.0869 13.8562 13.6854 12.9472 12.9357 12.8579L12.8145 12.8508H10.2621L13.7903 6.74194C14.0161 6.34677 13.8831 5.84274 13.4879 5.61694Z"></path></svg>

src/templates/img/logos/bluesky.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 11.3884C11.0942 9.62673 8.62833 6.34423 6.335 4.7259C4.13833 3.17506 3.30083 3.4434 2.75167 3.69256C2.11583 3.9784 2 4.95506 2 5.52839C2 6.10339 2.315 10.2367 2.52 10.9276C3.19917 13.2076 5.61417 13.9776 7.83917 13.7309C4.57917 14.2142 1.68333 15.4017 5.48083 19.6292C9.65833 23.9542 11.2058 18.7017 12 16.0392C12.7942 18.7017 13.7083 23.7651 18.4442 19.6292C22 16.0392 19.4208 14.2142 16.1608 13.7309C18.3858 13.9784 20.8008 13.2076 21.48 10.9276C21.685 10.2376 22 6.10256 22 5.52923C22 4.95423 21.8842 3.97839 21.2483 3.6909C20.6992 3.44256 19.8617 3.17423 17.665 4.72423C15.3717 6.34506 12.9058 9.62756 12 11.3884Z"></path></svg>

src/templates/img/logos/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M19.3034 5.33716C17.9344 4.71103 16.4805 4.2547 14.9629 4C14.7719 4.32899 14.5596 4.77471 14.411 5.12492C12.7969 4.89144 11.1944 4.89144 9.60255 5.12492C9.45397 4.77471 9.2311 4.32899 9.05068 4C7.52251 4.2547 6.06861 4.71103 4.70915 5.33716C1.96053 9.39111 1.21766 13.3495 1.5891 17.2549C3.41443 18.5815 5.17612 19.388 6.90701 19.9187C7.33151 19.3456 7.71356 18.73 8.04255 18.0827C7.41641 17.8492 6.82211 17.5627 6.24904 17.2231C6.39762 17.117 6.5462 17.0003 6.68416 16.8835C10.1438 18.4648 13.8911 18.4648 17.3082 16.8835C17.4568 17.0003 17.5948 17.117 17.7434 17.2231C17.1703 17.5627 16.576 17.8492 15.9499 18.0827C16.2789 18.73 16.6609 19.3456 17.0854 19.9187C18.8152 19.388 20.5875 18.5815 22.4033 17.2549C22.8596 12.7341 21.6806 8.80747 19.3034 5.33716ZM8.5201 14.8459C7.48007 14.8459 6.63107 13.9014 6.63107 12.7447C6.63107 11.5879 7.45884 10.6434 8.5201 10.6434C9.57071 10.6434 10.4303 11.5879 10.4091 12.7447C10.4091 13.9014 9.57071 14.8459 8.5201 14.8459ZM15.4936 14.8459C14.4535 14.8459 13.6034 13.9014 13.6034 12.7447C13.6034 11.5879 14.4323 10.6434 15.4936 10.6434C16.5442 10.6434 17.4038 11.5879 17.3825 12.7447C17.3825 13.9014 16.5548 14.8459 15.4936 14.8459Z"></path></svg>

src/templates/img/logos/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"></path></svg>

src/templates/img/logos/gitlab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M21.6634 9.98681L21.6354 9.91518L18.9164 2.8208C18.8612 2.68166 18.7634 2.56353 18.6371 2.48326C18.5098 2.40292 18.3607 2.36406 18.2104 2.37206C18.0601 2.38006 17.9159 2.43452 17.7979 2.52792C17.6809 2.62169 17.5966 2.75 17.5569 2.89453L15.7187 8.52037H8.28157L6.44336 2.89453C6.40366 2.75 6.31934 2.62169 6.20241 2.52792C6.08487 2.43389 5.94083 2.37903 5.79052 2.37102C5.64021 2.36301 5.49116 2.40226 5.36429 2.48326C5.2374 2.5632 5.13921 2.6814 5.08388 2.8208L2.36183 9.9245L2.33379 9.99512C1.94304 11.0182 1.895 12.1406 2.19691 13.1933C2.49882 14.2461 3.13436 15.1724 4.00794 15.8329L4.01832 15.8401L4.04221 15.8588L8.18917 18.9631L10.2393 20.5157L11.4856 21.4597C11.6319 21.5704 11.8104 21.6302 11.9939 21.6302C12.1774 21.6302 12.3559 21.5704 12.5023 21.4597L13.7486 20.5157L15.7997 18.9631L19.9706 15.8401L19.9819 15.8318C20.8585 15.1719 21.4966 14.2449 21.7999 13.1904C22.1033 12.1361 22.0553 11.0116 21.6634 9.98681Z"></path></svg>

src/templates/img/logos/google-play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3.60972 1.81396L13.793 12L3.61082 22.1864C3.41776 22.1048 3.24866 21.962 3.13555 21.7667C3.0474 21.6144 3.00098 21.4416 3.00098 21.2656V2.73453C3.00098 2.32109 3.25188 1.96625 3.60972 1.81396ZM14.5 12.707L16.802 15.009L5.86498 21.342L14.5 12.707ZM17.699 9.50896L20.5061 11.1347C20.9841 11.4114 21.1473 12.0232 20.8705 12.5011C20.783 12.6523 20.6574 12.778 20.5061 12.8655L17.698 14.491L15.207 12L17.699 9.50896ZM5.86498 2.65796L16.803 8.98996L14.5 11.293L5.86498 2.65796Z"></path></svg>

src/templates/img/logos/patreon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M15.001 17C10.8588 17 7.50098 13.6421 7.50098 9.5C7.50098 5.35786 10.8588 2 15.001 2C19.1431 2 22.501 5.35786 22.501 9.5C22.501 13.6421 19.1431 17 15.001 17ZM2.00098 2H6.00098V22H2.00098V2Z"></path></svg>

src/templates/img/logos/steam.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12.0052 2C6.75435 2 2.44852 6.05 2.04102 11.1975L7.40102 13.4125C7.85518 13.1033 8.40352 12.9208 8.99435 12.9208C9.04685 12.9208 9.09852 12.9242 9.15102 12.9258L11.5352 9.47417V9.425C11.5352 7.34583 13.2252 5.655 15.3052 5.655C17.3835 5.655 19.0752 7.3475 19.0752 9.4275C19.0752 11.5075 17.3835 13.1983 15.3052 13.1983H15.2177L11.821 15.6242C11.821 15.6675 11.8243 15.7117 11.8243 15.7567C11.8243 17.3192 10.5618 18.5867 8.99935 18.5867C7.63685 18.5867 6.48602 17.6092 6.22352 16.3142L2.38602 14.725C3.57435 18.9225 7.42768 22 12.0052 22C17.5277 22 22.0043 17.5225 22.0043 12C22.0043 6.4775 17.5268 2 12.0052 2ZM7.07852 16.6667C7.29685 17.1192 7.67352 17.4992 8.17352 17.7083C9.25435 18.1575 10.501 17.645 10.9502 16.5625C11.1693 16.0375 11.1702 15.4633 10.9543 14.9383C10.7385 14.4133 10.3293 14.0042 9.80685 13.7858C9.28685 13.5692 8.73185 13.5783 8.24185 13.7608L9.51102 14.2858C10.3077 14.6192 10.6852 15.5358 10.3518 16.3317C10.021 17.1292 9.10435 17.5067 8.30685 17.175L7.07852 16.6667ZM17.8185 9.4225C17.8185 8.0375 16.691 6.91 15.306 6.91C13.9185 6.91 12.7935 8.0375 12.7935 9.4225C12.7935 10.81 13.9185 11.935 15.306 11.935C16.6918 11.935 17.8185 10.81 17.8185 9.4225ZM15.3118 7.53C16.3527 7.53 17.2002 8.375 17.2002 9.41833C17.2002 10.4608 16.3527 11.3058 15.3118 11.3058C14.2677 11.3058 13.4243 10.4608 13.4243 9.41833C13.4243 8.375 14.2685 7.53 15.3118 7.53Z"></path></svg>

src/templates/img/logos/tiktok.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M16 8.24537V15.5C16 19.0899 13.0899 22 9.5 22C5.91015 22 3 19.0899 3 15.5C3 11.9101 5.91015 9 9.5 9C10.0163 9 10.5185 9.06019 11 9.17393V12.3368C10.5454 12.1208 10.0368 12 9.5 12C7.567 12 6 13.567 6 15.5C6 17.433 7.567 19 9.5 19C11.433 19 13 17.433 13 15.5V2H16C16 4.76142 18.2386 7 21 7V10C19.1081 10 17.3696 9.34328 16 8.24537Z"></path></svg>

src/templates/img/logos/trello.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M5.25098 3H18.751C19.993 3 21.001 4.00737 21.001 5.25V18.75C21.001 19.992 19.9935 21 18.751 21H5.25098C4.00898 21 3.00098 19.9925 3.00098 18.75V5.25C3.00098 4.008 4.00835 3 5.25098 3ZM13.171 6.42054V12.1795C13.171 12.7762 13.6545 13.26 14.2507 13.26H17.5812C18.1776 13.26 18.661 12.7765 18.661 12.1795V6.42054C18.661 5.82384 18.1774 5.34 17.5812 5.34H14.2507C13.6543 5.34 13.171 5.82348 13.171 6.42054ZM5.34098 6.42045V16.6796C5.34098 17.2762 5.82455 17.76 6.42071 17.76H9.75125C10.3476 17.76 10.831 17.277 10.831 16.6796V6.42045C10.831 5.82375 10.3474 5.34 9.75125 5.34H6.42071C5.82428 5.34 5.34098 5.82303 5.34098 6.42045Z"></path></svg>

src/templates/img/logos/twitch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M21.001 3V14.7391L16.3053 19.4348H12.3923L9.95523 21.7826H6.91402V19.4348H3.00098V6.13043L4.2281 3H21.001ZM19.4358 4.56522H6.13141V16.3043H9.26185V18.6522L11.6097 16.3043H16.3053L19.4358 13.1739V4.56522ZM16.3053 7.69565V12.3913H14.7401V7.69565H16.3053ZM12.3923 7.69565V12.3913H10.8271V7.69565H12.3923Z"></path></svg>

src/templates/img/logos/twitter-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18.2048 2.25H21.5128L14.2858 10.51L22.7878 21.75H16.1308L10.9168 14.933L4.95084 21.75H1.64084L9.37084 12.915L1.21484 2.25H8.04084L12.7538 8.481L18.2048 2.25ZM17.0438 19.77H18.8768L7.04484 4.126H5.07784L17.0438 19.77Z"></path></svg>

src/templates/img/logos/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M22.2125 5.65605C21.4491 5.99375 20.6395 6.21555 19.8106 6.31411C20.6839 5.79132 21.3374 4.9689 21.6493 4.00005C20.8287 4.48761 19.9305 4.83077 18.9938 5.01461C18.2031 4.17106 17.098 3.69303 15.9418 3.69434C13.6326 3.69434 11.7597 5.56661 11.7597 7.87683C11.7597 8.20458 11.7973 8.52242 11.8676 8.82909C8.39047 8.65404 5.31007 6.99005 3.24678 4.45941C2.87529 5.09767 2.68005 5.82318 2.68104 6.56167C2.68104 8.01259 3.4196 9.29324 4.54149 10.043C3.87737 10.022 3.22788 9.84264 2.64718 9.51973C2.64654 9.5373 2.64654 9.55487 2.64654 9.57148C2.64654 11.5984 4.08819 13.2892 6.00199 13.6731C5.6428 13.7703 5.27232 13.8194 4.90022 13.8191C4.62997 13.8191 4.36771 13.7942 4.11279 13.7453C4.64531 15.4065 6.18886 16.6159 8.0196 16.6491C6.53813 17.8118 4.70869 18.4426 2.82543 18.4399C2.49212 18.4402 2.15909 18.4205 1.82812 18.3811C3.74004 19.6102 5.96552 20.2625 8.23842 20.2601C15.9316 20.2601 20.138 13.8875 20.138 8.36111C20.138 8.1803 20.1336 7.99886 20.1256 7.81997C20.9443 7.22845 21.651 6.49567 22.2125 5.65605Z"></path></svg>

src/templates/img/logos/vimeo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M1.17444 8.30112C0.892531 7.88758 0.922443 7.88758 1.50184 7.37867C2.73388 6.29651 3.8964 5.11316 5.23826 4.1668C6.45346 3.31485 8.06417 2.7652 9.16466 4.1202C10.1791 5.36886 10.203 7.26157 10.4599 8.76952C10.7168 10.3336 10.963 11.9336 11.5114 13.4308C11.6632 13.8514 11.9535 14.6472 12.4793 14.7141C13.1568 14.8073 13.8474 13.6184 14.1617 13.1739C14.979 11.9945 16.0867 10.4053 15.9469 8.88781C15.8094 7.27591 14.0685 7.57941 12.9811 7.96416C13.1556 6.1551 14.8392 4.1214 16.4607 3.43314C18.1801 2.71979 20.7372 2.73174 21.6011 4.67105C22.5235 6.77286 21.6943 9.21402 20.6894 11.1187C19.5925 13.187 18.1801 15.1012 16.671 16.8888C15.3399 18.4768 13.765 20.2189 11.7803 20.9777C9.51357 21.8416 8.17052 20.158 7.39862 18.2079C6.55622 16.0846 6.13682 13.702 5.52862 11.4915C5.27291 10.5571 4.96941 9.49362 4.3624 8.72292C3.57019 7.72757 2.67044 8.66317 1.88779 9.19968C1.61894 8.93322 1.39669 8.59267 1.17444 8.30112Z"></path></svg>

src/templates/img/logos/website.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM9.71002 19.6674C8.74743 17.6259 8.15732 15.3742 8.02731 13H4.06189C4.458 16.1765 6.71639 18.7747 9.71002 19.6674ZM10.0307 13C10.1811 15.4388 10.8778 17.7297 12 19.752C13.1222 17.7297 13.8189 15.4388 13.9693 13H10.0307ZM19.9381 13H15.9727C15.8427 15.3742 15.2526 17.6259 14.29 19.6674C17.2836 18.7747 19.542 16.1765 19.9381 13ZM4.06189 11H8.02731C8.15732 8.62577 8.74743 6.37407 9.71002 4.33256C6.71639 5.22533 4.458 7.8235 4.06189 11ZM10.0307 11H13.9693C13.8189 8.56122 13.1222 6.27025 12 4.24799C10.8778 6.27025 10.1811 8.56122 10.0307 11ZM14.29 4.33256C15.2526 6.37407 15.8427 8.62577 15.9727 11H19.9381C19.542 7.8235 17.2836 5.22533 14.29 4.33256Z"></path></svg>

src/templates/img/logos/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12.2439 4C12.778 4.00294 14.1143 4.01586 15.5341 4.07273L16.0375 4.09468C17.467 4.16236 18.8953 4.27798 19.6037 4.4755C20.5486 4.74095 21.2913 5.5155 21.5423 6.49732C21.942 8.05641 21.992 11.0994 21.9982 11.8358L21.9991 11.9884L21.9991 11.9991C21.9991 11.9991 21.9991 12.0028 21.9991 12.0099L21.9982 12.1625C21.992 12.8989 21.942 15.9419 21.5423 17.501C21.2878 18.4864 20.5451 19.261 19.6037 19.5228C18.8953 19.7203 17.467 19.8359 16.0375 19.9036L15.5341 19.9255C14.1143 19.9824 12.778 19.9953 12.2439 19.9983L12.0095 19.9991L11.9991 19.9991C11.9991 19.9991 11.9956 19.9991 11.9887 19.9991L11.7545 19.9983C10.6241 19.9921 5.89772 19.941 4.39451 19.5228C3.4496 19.2573 2.70692 18.4828 2.45587 17.501C2.0562 15.9419 2.00624 12.8989 2 12.1625V11.8358C2.00624 11.0994 2.0562 8.05641 2.45587 6.49732C2.7104 5.51186 3.45308 4.73732 4.39451 4.4755C5.89772 4.05723 10.6241 4.00622 11.7545 4H12.2439ZM9.99911 8.49914V15.4991L15.9991 11.9991L9.99911 8.49914Z"></path></svg>