WIP cleanup styles dunno

Port _projects.scss (deleting most of it!)
Port the content styles (easier than I thought!)
2024-05-13 19:00:09 -05:00 · 2024-05-13 18:47:07 -05:00 · 2024-05-13 18:33:15 -05:00 · 2024-05-13 17:43:39 -05:00 · 2024-05-10 22:22:31 -05:00 · 2024-05-10 20:22:20 -05:00
134 changed files with 23593 additions and 13765 deletions
--- a/.gitignore
+++ b/.gitignore
@ -16,7 +16,6 @@ local/backups
 /tmp
 *.exe
 .DS_Store
-__debug_bin*

 # vim session saves
 Session.vim
--- a/go.mod
+++ b/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
--- a/public/HMNLogo_SaveTheDate.png
+++ b/public/HMNLogo_SaveTheDate.png
--- a/public/icons-7ANC2ICW.ttf
+++ b/public/icons-7ANC2ICW.ttf
--- a/public/learningjam2024/2024LJOpenGraph.png
+++ b/public/learningjam2024/2024LJOpenGraph.png
--- a/public/learningjam2024/2024LJTwitterCard.png
+++ b/public/learningjam2024/2024LJTwitterCard.png
--- a/public/learningjam2024/books.svg
+++ b/public/learningjam2024/books.svg
@ -1 +0,0 @@
-<?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 236 253" 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;"><rect id="books" x="0" y="0" width="235.74" height="252.97" style="fill:none;"/><path d="M77.61,252.704l0,-230.569l80.52,-0l-0,230.569l-80.52,0Zm59.686,-188.853l0,-20.883l-38.853,-0l0,20.883l38.853,0Zm0,128.926l0,-108.092l-38.853,-0l0,108.092l38.853,-0Zm-38.853,20.833l0,18.261l38.853,-0l0,-18.261l-38.853,0Zm-98.032,39.094l-0,-252.438l70.429,-0l-0,252.438l-70.429,0Zm49.596,-206.372l-0,-25.233l-28.763,-0l0,25.233l28.763,0Zm-0,142.369l-0,-121.536l-28.763,0l0,121.536l28.763,-0Zm-28.763,20.833l0,22.337c0,-0 28.763,-0 28.763,-0l-0,-22.337l-28.763,-0Zm143.656,43.17l-0,-252.438l70.429,-0l-0,252.438l-70.429,0Zm49.596,-206.372l-0,-25.233l-28.763,-0l0,25.233l28.763,0Zm-0,142.369l-0,-121.536l-28.763,0l0,121.536l28.763,-0Zm-28.763,20.833l0,22.337l28.763,-0l-0,-22.337l-28.763,-0Z"/></svg>
--- a/public/learningjam2024/favicon-16x16.png
+++ b/public/learningjam2024/favicon-16x16.png
--- a/public/learningjam2024/favicon-32x32.png
+++ b/public/learningjam2024/favicon-32x32.png
--- a/public/learningjam2024/lightbulb.svg
+++ b/public/learningjam2024/lightbulb.svg
@ -1 +0,0 @@
-<?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 336 233" 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;"><rect id="lightbulb" x="0" y="0" width="335.159" height="232.656" style="fill:none;"/><path d="M197.613,202.015c0,16.576 -13.457,30.034 -30.034,30.034c-16.576,-0 -30.034,-13.458 -30.034,-30.034l60.068,-0Zm0.06,-9.97l-60.206,-0c-3.155,-16.04 -5.152,-23.793 -32.39,-57.373c-10.513,-12.96 -16.178,-29.812 -16.178,-47.773c0,-43.425 35.256,-78.68 78.68,-78.68c43.425,-0 78.68,34.8 78.68,78.224c0,17.961 -5.665,34.814 -16.177,47.774c-27.238,33.58 -29.254,41.788 -32.409,57.828Zm-16.343,-20.834c3.88,-11.276 11.569,-24.225 32.572,-50.118c7.611,-9.383 11.524,-21.647 11.524,-34.65c-0,-31.893 -25.954,-57.391 -57.847,-57.391c-31.926,0 -57.846,25.92 -57.846,57.847c-0,13.003 3.913,25.266 11.524,34.649c20.946,25.823 28.639,38.556 32.521,49.663l27.552,0Zm-160.921,-151.684c-4.694,-3.321 -5.808,-9.827 -2.488,-14.52c3.321,-4.693 9.827,-5.808 14.52,-2.488l31.239,22.101c4.694,3.321 5.808,9.827 2.488,14.52c-3.32,4.693 -9.827,5.808 -14.52,2.488l-31.239,-22.101Zm12.032,153.97c-4.693,3.32 -11.199,2.205 -14.52,-2.488c-3.32,-4.693 -2.206,-11.199 2.488,-14.52l31.239,-22.101c4.693,-3.32 11.2,-2.205 14.52,2.488c3.32,4.693 2.206,11.199 -2.488,14.52l-31.239,22.101Zm-21.856,-74.77c-5.749,-0 -10.416,-4.668 -10.416,-10.417c-0,-5.749 4.667,-10.417 10.416,-10.417l38.267,0c5.749,0 10.417,4.668 10.417,10.417c-0,5.749 -4.668,10.417 -10.417,10.417l-38.267,-0Zm292.133,-95.906c4.693,-3.32 11.199,-2.205 14.519,2.488c3.321,4.693 2.206,11.199 -2.487,14.52l-31.239,22.101c-4.694,3.32 -11.2,2.206 -14.52,-2.488c-3.321,-4.693 -2.206,-11.199 2.487,-14.52l31.24,-22.101Zm12.032,153.97c4.693,3.321 5.808,9.827 2.487,14.52c-3.32,4.694 -9.826,5.808 -14.519,2.488l-31.24,-22.101c-4.693,-3.321 -5.808,-9.827 -2.487,-14.52c3.32,-4.693 9.826,-5.808 14.52,-2.488l31.239,22.101Zm9.823,-78.595c5.75,-0 10.417,4.667 10.417,10.416c0,5.749 -4.667,10.417 -10.417,10.417l-38.266,-0c-5.75,-0 -10.417,-4.668 -10.417,-10.417c-0,-5.749 4.667,-10.416 10.417,-10.416l38.266,-0Z"/></svg>
--- a/public/learningjam2024/logo.svg
+++ b/public/learningjam2024/logo.svg
--- a/public/learningjam2024/presentation.svg
+++ b/public/learningjam2024/presentation.svg
@ -1 +0,0 @@
-<?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 301 229" 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;"><rect id="presentation" x="-0" y="0" width="300.716" height="228.578" style="fill:none;"/><path d="M124.979,14.95l175.159,0l0,152.429l-137.896,0c-1.49,-7.262 -3.898,-14.19 -7.097,-20.659l124.334,-0l-0,-111.11l-143.514,-0c-2.302,-7.632 -6.074,-14.628 -10.986,-20.66Zm-119.77,196.191c-2.997,-8.252 -4.631,-17.155 -4.631,-26.437c0,-42.797 34.745,-77.542 77.541,-77.542c42.796,0 77.541,34.745 77.541,77.542c0,9.282 -1.634,18.185 -4.631,26.437c-22.091,10.548 -46.816,16.455 -72.91,16.455c-26.094,0 -50.819,-5.907 -72.91,-16.455Zm15.522,-13.612c17.693,7.296 37.075,11.317 57.388,11.317c20.314,0 39.695,-4.021 57.389,-11.317c0.919,-4.129 1.402,-8.421 1.402,-12.825c0,-32.448 -26.343,-58.792 -58.791,-58.792c-32.448,0 -58.791,26.344 -58.791,58.792c0,4.404 0.484,8.696 1.403,12.825Zm57.388,-196.547c28.741,-0 52.075,23.334 52.075,52.074c-0,28.741 -23.334,52.075 -52.075,52.075c-28.74,-0 -52.074,-23.334 -52.074,-52.075c-0,-28.74 23.334,-52.074 52.074,-52.074Zm0,18.75c-18.392,-0 -33.324,14.932 -33.324,33.324c-0,18.392 14.932,33.325 33.324,33.325c18.392,-0 33.325,-14.933 33.325,-33.325c-0,-18.392 -14.933,-33.324 -33.325,-33.324Z"/></svg>
--- a/public/style.css
+++ b/public/style.css
--- a/public/style.old.css
+++ b/public/style.old.css
--- a/src/buildscss/buildscss.go
+++ b/src/buildscss/buildscss.go
@ -1,18 +1,6 @@
 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"
-)
+/*

 var compressed bool

@ -93,3 +81,5 @@ func compile(inpath, outpath string, theme string, style int) error {

 	return compiler.Run()
 }
+
+*/
--- a/src/discord/gateway.go
+++ b/src/discord/gateway.go
@ -23,34 +23,6 @@ import (
 	"github.com/jpillora/backoff"
 )

-type BotEvent struct {
-	Timestamp time.Time
-	Name      string
-	Extra     string
-}
-
-var botEvents = make([]BotEvent, 0, 1000)
-var botEventsMutex = sync.Mutex{}
-
-func RecordBotEvent(name, extra string) {
-	botEventsMutex.Lock()
-	defer botEventsMutex.Unlock()
-	if len(botEvents) > 1000 {
-		botEvents = botEvents[len(botEvents)-500:]
-	}
-	botEvents = append(botEvents, BotEvent{
-		Timestamp: time.Now(),
-		Name:      name,
-		Extra:     extra,
-	})
-}
-
-func GetBotEvents() []BotEvent {
-	botEventsMutex.Lock()
-	defer botEventsMutex.Unlock()
-	return botEvents[:]
-}
-
 func RunDiscordBot(ctx context.Context, dbConn *pgxpool.Pool) jobs.Job {
 	log := logging.ExtractLogger(ctx).With().Str("module", "discord").Logger()
 	ctx = logging.AttachLoggerToContext(&log, ctx)
@ -84,11 +56,6 @@ func RunDiscordBot(ctx context.Context, dbConn *pgxpool.Pool) jobs.Job {
 				log.Info().Msg("Connecting to the Discord gateway")
 				bot := newBotInstance(dbConn)
 				err := bot.Run(ctx)
-				disconnectMessage := ""
-				if err != nil {
-					disconnectMessage = err.Error()
-				}
-				RecordBotEvent("Disconnected", disconnectMessage)
 				if err != nil {
 					dur := boff.Duration()
 					log.Error().
@ -134,8 +101,6 @@ type botInstance struct {
 	conn   *websocket.Conn
 	dbConn *pgxpool.Pool

-	resuming bool
-
 	heartbeatIntervalMs int
 	forceHeartbeat      chan struct{}

@ -228,7 +193,6 @@ func (bot *botInstance) Run(ctx context.Context) (err error) {
 			logging.ExtractLogger(ctx).Info().Msg("Discord asked us to reconnect to the gateway")
 			return nil
 		case OpcodeInvalidSession:
-			RecordBotEvent("Failed to resume - invalid session", "")
 			// We tried to resume but the session was invalid.
 			// Delete the session and reconnect from scratch again.
 			_, err := bot.dbConn.Exec(ctx, `DELETE FROM discord_session`)
@ -300,11 +264,8 @@ func (bot *botInstance) connect(ctx context.Context) error {
 		}
 	}

-	RecordBotEvent("Connected", "")
 	if shouldResume {
-		RecordBotEvent("Resuming with session ID", session.ID)
 		// Reconnect to the previous session
-		bot.resuming = true
 		err := bot.sendGatewayMessage(ctx, GatewayMessage{
 			Opcode: OpcodeResume,
 			Data: Resume{
@ -579,20 +540,11 @@ func (bot *botInstance) processEventMsg(ctx context.Context, msg *GatewayMessage
 		panic(fmt.Sprintf("processEventMsg must only be used on Dispatch messages (opcode %d). Validate this before you call this function.", OpcodeDispatch))
 	}

-	if bot.resuming {
-		name := ""
-		if msg.EventName != nil {
-			name = *msg.EventName
-		}
-		RecordBotEvent("Got event while resuming", name)
-	}
 	switch *msg.EventName {
 	case "RESUMED":
 		// Nothing to do, but at least we can log something
 		logging.ExtractLogger(ctx).Info().Msg("Finished resuming gateway session")

-		bot.resuming = false
-		RecordBotEvent("Done resuming", "")
 		bot.createApplicationCommands(ctx)
 	case "MESSAGE_CREATE":
 		newMessage := *MessageFromMap(msg.Data, "")
--- a/src/discord/history.go
+++ b/src/discord/history.go
@ -185,7 +185,6 @@ func Scrape(ctx context.Context, dbConn *pgxpool.Pool, channelID string, earlies
 				return true
 			}

-			msg.Backfilled = true
 			err := HandleIncomingMessage(ctx, dbConn, &msg, createSnippets)

 			if err != nil {
--- a/src/discord/message_handling.go
+++ b/src/discord/message_handling.go
@ -27,11 +27,6 @@ import (
 	"github.com/google/uuid"
 )

-var autostoreChannels = []string{
-	config.Config.Discord.ShowcaseChannelID,
-	// TODO(asaf): Add jam channel
-}
-
 func HandleIncomingMessage(ctx context.Context, dbConn db.ConnOrTx, msg *Message, createSnippets bool) error {
 	deleted := false
 	var err error
@ -58,10 +53,6 @@ func HandleIncomingMessage(ctx context.Context, dbConn db.ConnOrTx, msg *Message
 		err = HandleInternedMessage(ctx, dbConn, msg, deleted, createSnippets)
 	}

-	if !deleted && err == nil {
-		err = FreyaMode(ctx, dbConn, msg)
-	}
-
 	return err
 }

@ -74,7 +65,17 @@ func CleanUpShowcase(ctx context.Context, dbConn db.ConnOrTx, msg *Message) (boo
 			return deleted, nil
 		}

-		if !messageShouldBeStored(msg) {
+		hasGoodContent := true
+		if msg.OriginalHasFields("content") && !messageHasLinks(msg.Content) {
+			hasGoodContent = false
+		}
+
+		hasGoodAttachments := true
+		if msg.OriginalHasFields("attachments") && len(msg.Attachments) == 0 {
+			hasGoodAttachments = false
+		}
+
+		if !hasGoodContent && !hasGoodAttachments {
 			err := DeleteMessage(ctx, msg.ChannelID, msg.ID)
 			if err != nil {
 				return deleted, oops.New(err, "failed to delete message")
@ -90,7 +91,7 @@ func CleanUpShowcase(ctx context.Context, dbConn db.ConnOrTx, msg *Message) (boo
 				err = SendMessages(ctx, dbConn, MessageToSend{
 					ChannelID: channel.ID,
 					Req: CreateMessageRequest{
-						Content: "Posts in #project-showcase are required to have either an image/video or a link, or start with `!til`. Discuss showcase content in #projects.",
+						Content: "Posts in #project-showcase are required to have either an image/video or a link. Discuss showcase content in #projects.",
 					},
 				})
 				if err != nil {
@ -145,70 +146,6 @@ func CleanUpLibrary(ctx context.Context, dbConn db.ConnOrTx, msg *Message) (bool
 	return deleted, nil
 }

-func FreyaMode(ctx context.Context, dbConn db.ConnOrTx, msg *Message) error {
-	if msg.Author.IsBot {
-		return nil
-	}
-	if msg.ChannelID == config.Config.Discord.ShowcaseChannelID || msg.ChannelID == config.Config.Discord.LibraryChannelID {
-		return nil
-	}
-
-	twitteryUrls := []string{
-		"https://twitter.com",
-		"https://x.com",
-		"https://vxtwitter.com",
-		"https://fxtwitter.com",
-	}
-	isTwittery := false
-	for _, url := range twitteryUrls {
-		if strings.Contains(msg.Content, url) {
-			isTwittery = true
-		}
-	}
-	if !isTwittery {
-		return nil
-	}
-
-	// FREYA MODE ENGAGED
-	approvedTweets := []string{
-		"https://vxtwitter.com/FreyaHolmer/status/1757836988495847568",
-		"https://vxtwitter.com/FreyaHolmer/status/1752441092501361103",
-		"https://vxtwitter.com/FreyaHolmer/status/1753813557966217268",
-		"https://vxtwitter.com/FreyaHolmer/status/1746228932188295579",
-		"https://vxtwitter.com/FreyaHolmer/status/1732687685850894799",
-		"https://vxtwitter.com/FreyaHolmer/status/1761487879178736048",
-		"https://vxtwitter.com/FreyaHolmer/status/1733820461492863442",
-		"https://vxtwitter.com/FreyaHolmer/status/1732845451701871101",
-		"https://vxtwitter.com/FreyaHolmer/status/1765680355657359585",
-		"https://vxtwitter.com/FreyaHolmer/status/1784678195997852129",
-		"https://vxtwitter.com/FreyaHolmer/status/1741468609044508831",
-		"https://vxtwitter.com/FreyaHolmer/status/1759306434053870012",
-		"https://vxtwitter.com/FreyaHolmer/status/1754929898492162178",
-		"https://vxtwitter.com/FreyaHolmer/status/1782498313511534822",
-		"https://vxtwitter.com/FreyaHolmer/status/1623737764041695232",
-		"https://vxtwitter.com/FreyaHolmer/status/1718979996125925494",
-		"https://vxtwitter.com/FreyaHolmer/status/1675945798448607248",
-		"https://vxtwitter.com/FreyaHolmer/status/1662229911375953922",
-		"https://vxtwitter.com/FreyaHolmer/status/1652235944752185345",
-		"https://vxtwitter.com/FreyaHolmer/status/1386408507218427905",
-		"https://vxtwitter.com/FreyaHolmer/status/1436696408506212353",
-		"https://vxtwitter.com/FreyaHolmer/status/1444755552777670657",
-		"https://vxtwitter.com/FreyaHolmer/status/1232826293902888960",
-	}
-	tweet := approvedTweets[rand.Intn(len(approvedTweets))]
-	err := SendMessages(ctx, dbConn, MessageToSend{
-		ChannelID: msg.ChannelID,
-		Req: CreateMessageRequest{
-			Content: fmt.Sprintf("No. Only Freya is allowed to tweet. %s", tweet),
-		},
-	})
-	if err != nil {
-		return oops.New(err, "failed to send Freya tweet")
-	}
-
-	return nil
-}
-
 func ShareToMatrix(ctx context.Context, msg *Message) error {
 	if msg.Flags&MessageFlagCrossposted == 0 {
 		return nil
@ -301,7 +238,7 @@ func ShareToMatrix(ctx context.Context, msg *Message) error {
 }

 func MaybeInternMessage(ctx context.Context, dbConn db.ConnOrTx, msg *Message) error {
-	if messageShouldBeStored(msg) {
+	if msg.ChannelID == config.Config.Discord.ShowcaseChannelID {
 		err := InternMessage(ctx, dbConn, msg)
 		if errors.Is(err, errNotEnoughInfo) {
 			logging.ExtractLogger(ctx).Warn().
@ -353,8 +290,8 @@ func InternMessage(

 		_, err = dbConn.Exec(ctx,
 			`
-			INSERT INTO discord_message (id, channel_id, guild_id, url, user_id, sent_at, snippet_created, backfilled)
-			VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+			INSERT INTO discord_message (id, channel_id, guild_id, url, user_id, sent_at, snippet_created)
+			VALUES ($1, $2, $3, $4, $5, $6, $7)
 			`,
 			msg.ID,
 			msg.ChannelID,
@ -363,7 +300,6 @@ func InternMessage(
 			msg.Author.ID,
 			msg.Time(),
 			false,
-			msg.Backfilled,
 		)
 		if err != nil {
 			return oops.New(err, "failed to save new discord message")
@ -405,7 +341,7 @@ func FetchInternedMessage(ctx context.Context, dbConn db.ConnOrTx, msgId string)
 // 1. Saves/updates content
 // 2. Saves/updates snippet
 // 3. Deletes content/snippet
-func HandleInternedMessage(ctx context.Context, dbConn db.ConnOrTx, msg *Message, removeInternedMessage bool, createSnippet bool) error {
+func HandleInternedMessage(ctx context.Context, dbConn db.ConnOrTx, msg *Message, deleted bool, createSnippet bool) error {
 	tx, err := dbConn.Begin(ctx)
 	if err != nil {
 		return oops.New(err, "failed to start transaction")
@ -416,11 +352,7 @@ func HandleInternedMessage(ctx context.Context, dbConn db.ConnOrTx, msg *Message
 	if err != nil && !errors.Is(err, db.NotFound) {
 		return err
 	} else if err == nil {
-		if !removeInternedMessage {
-			removeInternedMessage = !messageShouldBeStored(msg)
-		}
-
-		if !removeInternedMessage {
+		if !deleted {
 			err = SaveMessageContents(ctx, tx, interned, msg)
 			if err != nil {
 				return err
@ -853,7 +785,7 @@ func HandleSnippetForInternedMessage(ctx context.Context, dbConn db.ConnOrTx, in

 	if interned.MessageContent == nil {
 		// NOTE(asaf): Can't have a snippet without content
-		// NOTE(asaf): Messages that only have an attachment also have a content struct with an empty content string
+		// NOTE(asaf): Messages that only have an attachment also have blank content
 		// TODO(asaf): Do we need to delete existing snippets in this case??? Not entirely sure how to trigger this through discord
 		return nil
 	}
@ -903,42 +835,43 @@ func HandleSnippetForInternedMessage(ctx context.Context, dbConn db.ConnOrTx, in
 		if shouldCreate {
 			// Get an asset ID or URL to make a snippet from
 			assetId, url, err := getSnippetAssetOrUrl(ctx, tx, &interned.Message)
+			if assetId != nil || url != nil {
+				contentMarkdown := interned.MessageContent.LastContent
+				contentHTML := parsing.ParseMarkdown(contentMarkdown, parsing.DiscordMarkdown)

-			contentMarkdown := interned.MessageContent.LastContent
-			contentHTML := parsing.ParseMarkdown(contentMarkdown, parsing.DiscordMarkdown)
+				_, err = tx.Exec(ctx,
+					`
+					INSERT INTO snippet (url, "when", description, _description_html, asset_id, discord_message_id, owner_id)
+					VALUES ($1, $2, $3, $4, $5, $6, $7)
+					`,
+					url,
+					interned.Message.SentAt,
+					contentMarkdown,
+					contentHTML,
+					assetId,
+					interned.Message.ID,
+					interned.HMNUser.ID,
+				)
+				if err != nil {
+					return oops.New(err, "failed to create snippet from attachment")
+				}

-			_, err = tx.Exec(ctx,
-				`
-				INSERT INTO snippet (url, "when", description, _description_html, asset_id, discord_message_id, owner_id)
-				VALUES ($1, $2, $3, $4, $5, $6, $7)
-				`,
-				url,
-				interned.Message.SentAt,
-				contentMarkdown,
-				contentHTML,
-				assetId,
-				interned.Message.ID,
-				interned.HMNUser.ID,
-			)
-			if err != nil {
-				return oops.New(err, "failed to create snippet from attachment")
-			}
+				existingSnippet, err = FetchSnippetForMessage(ctx, tx, interned.Message.ID)
+				if err != nil {
+					return oops.New(err, "failed to fetch newly-created snippet")
+				}

-			existingSnippet, err = FetchSnippetForMessage(ctx, tx, interned.Message.ID)
-			if err != nil {
-				return oops.New(err, "failed to fetch newly-created snippet")
-			}
-
-			_, err = tx.Exec(ctx,
-				`
-				UPDATE discord_message
-				SET snippet_created = TRUE
-				WHERE id = $1
-				`,
-				interned.Message.ID,
-			)
-			if err != nil {
-				return oops.New(err, "failed to mark message as having snippet")
+				_, err = tx.Exec(ctx,
+					`
+					UPDATE discord_message
+					SET snippet_created = TRUE
+					WHERE id = $1
+					`,
+					interned.Message.ID,
+				)
+				if err != nil {
+					return oops.New(err, "failed to mark message as having snippet")
+				}
 			}
 		}
 	}
@ -1080,36 +1013,3 @@ func messageHasLinks(content string) bool {

 	return false
 }
-
-func messageShouldBeStored(msg *Message) bool {
-	if msg == nil {
-		return false
-	}
-
-	if strings.HasPrefix(strings.ToLower(strings.TrimSpace(msg.Content)), "!til") {
-		return true
-	}
-
-	autostore := false
-	for _, cid := range autostoreChannels {
-		if msg.ChannelID == cid {
-			autostore = true
-			break
-		}
-	}
-	if autostore {
-		hasGoodContent := true
-		if msg.OriginalHasFields("content") && !messageHasLinks(msg.Content) {
-			hasGoodContent = false
-		}
-
-		hasGoodAttachments := true
-		if msg.OriginalHasFields("attachments") && len(msg.Attachments) == 0 {
-			hasGoodAttachments = false
-		}
-
-		return hasGoodContent || hasGoodAttachments
-	}
-
-	return false
-}
--- a/src/discord/payloads.go
+++ b/src/discord/payloads.go
@ -275,7 +275,6 @@ type Message struct {
 	Embeds      []Embed      `json:"embeds"`

 	originalMap map[string]interface{}
-	Backfilled  bool
 }

 func (m *Message) JumpURL() string {
--- a/src/hmndata/jams.go
+++ b/src/hmndata/jams.go
@ -62,17 +62,6 @@ var WRJ2023 = Jam{
 	UrlSlug: "2023",
 }

-var LJ2024 = Jam{
-	Event: Event{
-		StartTime: time.Date(2024, 3, 15, 17, 0, 0, 0, time.UTC),
-		EndTime:   time.Date(2024, 3, 25, 0, 0, 0, 0, time.UTC),
-	},
-	Name:    "Learning Jam 2024",
-	Slug:    "LJ2024",
-	UrlSlug: "learning-2024",
-}
-
-// Conferences
 var HMS2022 = Event{
 	StartTime: time.Date(2022, 11, 16, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
 	EndTime:   time.Date(2022, 11, 18, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
@ -88,17 +77,7 @@ var HMBoston2023 = Event{
 	EndTime:   time.Date(2023, 8, 4, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
 }

-var HMS2024 = Event{
-	StartTime: time.Date(2024, 11, 20, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
-	EndTime:   time.Date(2024, 11, 22, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
-}
-
-var HMBoston2024 = Event{
-	StartTime: time.Date(2024, 8, 9, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
-	EndTime:   time.Date(2024, 8, 10, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
-}
-
-var AllJams = []Jam{WRJ2021, WRJ2022, VJ2023, WRJ2023, LJ2024}
+var AllJams = []Jam{WRJ2021, WRJ2022, VJ2023, WRJ2023}

 func CurrentJam() *Jam {
 	now := time.Now()
--- a/src/hmnurl/hmnurl_test.go
+++ b/src/hmnurl/hmnurl_test.go
@ -143,6 +143,7 @@ func TestFeed(t *testing.T) {

 func TestProjectIndex(t *testing.T) {
 	AssertRegexMatch(t, BuildProjectIndex(1, ""), RegexProjectIndex, nil)
+	AssertRegexMatch(t, BuildProjectIndex(2, ""), RegexProjectIndex, map[string]string{"page": "2"})
 	AssertRegexMatch(t, BuildProjectIndex(1, "test"), RegexProjectIndex, map[string]string{"category": "test"})
 	AssertRegexMatch(t, BuildProjectIndex(2, "test"), RegexProjectIndex, map[string]string{"page": "2", "category": "test"})
 	assert.Panics(t, func() { BuildProjectIndex(0, "") })
@ -426,16 +427,6 @@ func TestJamFeed2023(t *testing.T) {
 	AssertSubdomain(t, BuildJamFeed2023(), "")
 }

-func TestJamIndex2024_Learning(t *testing.T) {
-	AssertRegexMatch(t, BuildJamIndex2024_Learning(), RegexJamIndex2024_Learning, nil)
-	AssertSubdomain(t, BuildJamIndex2024_Learning(), "")
-}
-
-func TestJamFeed2024_Learning(t *testing.T) {
-	AssertRegexMatch(t, BuildJamFeed2024_Learning(), RegexJamFeed2024_Learning, nil)
-	AssertSubdomain(t, BuildJamFeed2024_Learning(), "")
-}
-
 func TestTimeMachine(t *testing.T) {
 	AssertRegexMatch(t, BuildTimeMachine(), RegexTimeMachine, nil)
 	AssertSubdomain(t, BuildTimeMachine(), "")
@ -463,8 +454,8 @@ func TestTimeMachineFormDone(t *testing.T) {
 }

 func TestNewsletterSignup(t *testing.T) {
-	AssertRegexMatch(t, BuildAPINewsletterSignup(), RegexNewsletterSignup, nil)
-	AssertSubdomain(t, BuildAPINewsletterSignup(), "")
+	AssertRegexMatch(t, BuildNewsletterSignup(), RegexNewsletterSignup, nil)
+	AssertSubdomain(t, BuildNewsletterSignup(), "")
 }

 func TestProjectNewJam(t *testing.T) {
--- a/src/hmnurl/urls.go
+++ b/src/hmnurl/urls.go
@ -49,6 +49,13 @@ func BuildWhenIsIt() string {
 	return Url("/whenisit", nil)
 }

+var RegexNewsletterSignup = regexp.MustCompile("^/newsletter$")
+
+func BuildNewsletterSignup() string {
+	defer CatchPanic()
+	return Url("/newsletter", nil)
+}
+
 var RegexJamsIndex = regexp.MustCompile("^/jams$")

 func BuildJamsIndex() string {
@ -119,34 +126,6 @@ func BuildJamRecap2023_Visibility() string {
 	return Url("/jam/visibility-2023/recap", nil)
 }

-var RegexJamIndex2024_Learning = regexp.MustCompile("^/jam/learning-2024$")
-
-func BuildJamIndex2024_Learning() string {
-	defer CatchPanic()
-	return Url("/jam/learning-2024", nil)
-}
-
-var RegexJamFeed2024_Learning = regexp.MustCompile("^/jam/learning-2024/feed$")
-
-func BuildJamFeed2024_Learning() string {
-	defer CatchPanic()
-	return Url("/jam/learning-2024/feed", nil)
-}
-
-var RegexJamGuidelines2024_Learning = regexp.MustCompile("^/jam/learning-2024/guidelines$")
-
-func BuildJamGuidelines2024_Learning() string {
-	defer CatchPanic()
-	return Url("/jam/learning-2024/guidelines", nil)
-}
-
-var RegexJamSaveTheDate = regexp.MustCompile("^/jam/upcoming$")
-
-func BuildJamSaveTheDate() string {
-	defer CatchPanic()
-	return Url("/jam/upcoming", nil)
-}
-
 func BuildJamIndexAny(slug string) string {
 	defer CatchPanic()
 	return Url(fmt.Sprintf("/jam/%s", slug), nil)
@ -354,24 +333,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
 */
@ -656,6 +617,12 @@ func BuildEducationRerender() string {
 	return Url("/education/rerender", nil)
 }

+/*
+ * Style test
+ */
+
+var RegexStyleTest = regexp.MustCompile(`^/debug/styles$`)
+
 /*
 * Forums
 */
@ -929,12 +896,6 @@ func BuildDiscordShowcaseBacklog() string {
 	return Url("/discord_showcase_backlog", nil)
 }

-var RegexDiscordBotDebugPage = regexp.MustCompile("^/discord_bot_debug$")
-
-func BuildDiscordBotDebugPage() string {
-	return Url("/discord_bot_debug", nil)
-}
-
 /*
 * API
 */
@ -945,12 +906,6 @@ func BuildAPICheckUsername() string {
 	return Url("/api/check_username", nil)
 }

-var RegexAPINewsletterSignup = regexp.MustCompile("^/api/newsletter_signup$")
-
-func BuildAPINewsletterSignup() string {
-	return Url("/api/newsletter_signup", nil)
-}
-
 /*
 * Twitch stuff
 */
--- a/src/migration/migrations/2024-03-28T184107Z_AddBackfillToDiscordMessage.go
+++ b/src/migration/migrations/2024-03-28T184107Z_AddBackfillToDiscordMessage.go
@ -1,47 +0,0 @@
-package migrations
-
-import (
-	"context"
-	"time"
-
-	"git.handmade.network/hmn/hmn/src/migration/types"
-	"github.com/jackc/pgx/v5"
-)
-
-func init() {
-	registerMigration(AddBackfillToDiscordMessage{})
-}
-
-type AddBackfillToDiscordMessage struct{}
-
-func (m AddBackfillToDiscordMessage) Version() types.MigrationVersion {
-	return types.MigrationVersion(time.Date(2024, 3, 28, 18, 41, 7, 0, time.UTC))
-}
-
-func (m AddBackfillToDiscordMessage) Name() string {
-	return "AddBackfillToDiscordMessage"
-}
-
-func (m AddBackfillToDiscordMessage) Description() string {
-	return "Add a backfill flag to discord messages"
-}
-
-func (m AddBackfillToDiscordMessage) Up(ctx context.Context, tx pgx.Tx) error {
-	_, err := tx.Exec(ctx,
-		`
-		ALTER TABLE discord_message
-		ADD COLUMN backfilled BOOLEAN NOT NULL default FALSE;
-		`,
-	)
-	return err
-}
-
-func (m AddBackfillToDiscordMessage) Down(ctx context.Context, tx pgx.Tx) error {
-	_, err := tx.Exec(ctx,
-		`
-		ALTER TABLE discord_message
-		DROP COLUMN backfilled;
-		`,
-	)
-	return err
-}
--- a/src/migration/migrations/2024-05-07T013432Z_newsletter.go
+++ b/src/migration/migrations/2024-05-07T013432Z_newsletter.go
@ -1,47 +0,0 @@
-package migrations
-
-import (
-	"context"
-	"time"
-
-	"git.handmade.network/hmn/hmn/src/migration/types"
-	"github.com/jackc/pgx/v5"
-)
-
-func init() {
-	registerMigration(newsletter{})
-}
-
-type newsletter struct{}
-
-func (m newsletter) Version() types.MigrationVersion {
-	return types.MigrationVersion(time.Date(2024, 5, 7, 1, 34, 32, 0, time.UTC))
-}
-
-func (m newsletter) Name() string {
-	return "newsletter"
-}
-
-func (m newsletter) Description() string {
-	return "Adds the newsletter signup"
-}
-
-func (m newsletter) Up(ctx context.Context, tx pgx.Tx) error {
-	_, err := tx.Exec(ctx,
-		`
-		CREATE TABLE newsletter_emails (
-			email VARCHAR(255) NOT NULL PRIMARY KEY
-		);
-		`,
-	)
-	return err
-}
-
-func (m newsletter) Down(ctx context.Context, tx pgx.Tx) error {
-	_, err := tx.Exec(ctx,
-		`
-		DROP TABLE newsletter_emails;
-		`,
-	)
-	return err
-}
--- a/src/rawdata/scss/_admin.scss
+++ b/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;
-}
--- a/src/rawdata/scss/_authors.scss
+++ b/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;
-    }
-  }
-}
--- a/src/rawdata/scss/_content.scss
+++ b/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;
-  }
-}
--- a/src/rawdata/scss/_core.scss
+++ b/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;
-  }
-}
--- a/src/rawdata/scss/_editor.scss
+++ b/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%;
-      }
-    }
-  }
-}
--- a/src/rawdata/scss/_episodes.scss
+++ b/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;
-}
--- a/src/rawdata/scss/_forum.scss
+++ b/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);
-  }
-}
--- a/src/rawdata/scss/_irc.scss
+++ b/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;
-    }
-  }
-}
-
--- a/src/rawdata/scss/_landing.scss
+++ b/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 :)
-      }
-    }
-  }
-}
--- a/src/rawdata/scss/_library.scss
+++ b/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;
-}
--- a/src/rawdata/scss/_notices.scss
+++ b/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);
-}
--- a/src/rawdata/scss/_profile.scss
+++ b/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;
-}
--- a/src/rawdata/scss/_progress_bar.scss
+++ b/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%;
-}
-
--- a/src/rawdata/scss/_projects.scss
+++ b/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%;
-}
--- a/src/rawdata/scss/_showcase.scss
+++ b/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));
-  }
-}
--- a/src/rawdata/scss/_streams.scss
+++ b/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%;
-      }
-    }
-  }
-}
--- a/src/rawdata/scss/_timeline.scss
+++ b/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);
-        }
-    }
-}
--- a/src/rawdata/scss/_carousel.scss
+++ b/src/rawdata/scss/_carousel.scss
@ -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(--dimmest-color);
    }

    &.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);
      }
    }
  }
-}
-
+}
--- a/src/rawdata/scss/content.css
+++ b/src/rawdata/scss/content.css
@ -0,0 +1,170 @@
+.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 {
+    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(--dimmest-color);
+  }
+
+  code {
+    background-color: var(--dim-background);
+    border-radius: var(--border-radius-2);
+
+    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(--dim-background);
+    border-radius: var(--border-radius-2);
+
+    padding: 0.7em;
+    overflow-x: auto;
+  }
+
+  blockquote {
+    border-color: var(--dimmest-color);
+    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;
+    }
+  }
+}
--- a/src/rawdata/scss/core.css
+++ b/src/rawdata/scss/core.css
@ -0,0 +1,662 @@
+/* Bare minimum styles */
+
+* {
+    /* It's aggressive, but we like it aggressive */
+    box-sizing: border-box;
+}
+
+br {
+    /* why, IE... */
+    border-style: none;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--color);
+    font-family: "Fira Sans", 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;
+    }
+}
+
+b,
+strong {
+    font-weight: 500;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    margin: 0;
+    line-height: 1;
+    font-weight: 500;
+}
+
+code,
+pre,
+.mono {
+    font-family: "Fira Mono", monospace;
+}
+
+/* Utility */
+
+.bg--main {
+    background-color: var(--main-background-color);
+}
+
+.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--dim {
+    border-color: var(--dim-color);
+}
+
+.b--dimmer {
+    border-color: var(--dimmer-color);
+}
+
+.b--dimmest {
+    border-color: var(--dimmest-color);
+}
+
+.b--theme {
+    border-color: var(--theme-color);
+}
+
+.b--theme-dim {
+    border-color: var(--theme-color-dim);
+}
+
+.b--theme-dimmer {
+    border-color: var(--theme-color-dimmer);
+}
+
+.b--theme-dimmest {
+    border-color: var(--theme-color-dimmest);
+}
+
+.b--theme-dark {
+    border-color: var(--theme-color-dark);
+}
+
+.b--theme-light {
+    border-color: var(--theme-color-light);
+}
+
+.bg--dim {
+    background-color: var(--dim-background);
+}
+
+.bg--content {
+    background-color: var(--content-background);
+}
+
+.bg--card {
+    background-color: var(--card-background);
+}
+
+.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;
+    }
+}
+
+.c--dim {
+    color: var(--dim-color);
+}
+
+.c--theme-dim {
+    color: var(--theme-color-dim);
+}
+
+.c--dimmer {
+    color: var(--dimmer-color);
+}
+
+.c--theme-dimmer {
+    color: var(--theme-color-dimmer);
+}
+
+.c--dimmest {
+    color: var(--dimmest-color);
+}
+
+.c--theme-dimmest {
+    color: var(--theme-color-dimmest);
+}
+
+.f8 {
+    font-size: 0.65rem;
+}
+
+.mw-site {
+    max-width: 80rem;
+}
+
+.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;
+}
+
+@media screen and (min-width: 35em) {
+    .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;
+    }
+
+    .bg--dim-ns {
+        background-color: var(--dim-background);
+    }
+}
+
+@media screen and (min-width: 35em) and (max-width: 60em) {
+    .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;
+    }
+
+    .bg--dim-m {
+        background-color: var(--dim-background);
+    }
+}
+
+@media screen and (min-width: 60em) {
+    .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;
+    }
+
+    .bg--dim-l {
+        background-color: var(--dim-background);
+    }
+}
+
+.svgicon {
+    svg {
+        fill: currentColor;
+        stroke: currentColor;
+        width: 1em;
+        height: 1em;
+    }
+
+    &:not(.svgicon-nofix) svg {
+        transform: translate(0px, 0.1em);
+    }
+}
+
+.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(--dimmest-color);
+
+    @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);
+}
--- a/src/rawdata/scss/editor.css
+++ b/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);
+    }
+  }
+}
--- a/src/rawdata/scss/_education.scss
+++ b/src/rawdata/scss/_education.scss
@ -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(--dimmest-color);
        left: -1.5rem;
-        top: 1rem - $height;
+        top: calc(1rem - var(--height));
        border-bottom-left-radius: 0.5rem;
    }
 }
@ -37,4 +37,4 @@
    .note {
        color: red;
    }
-}
+}
--- a/src/rawdata/scss/forum.css
+++ b/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);
+  }
+}
--- a/src/rawdata/scss/_header.scss
+++ b/src/rawdata/scss/_header.scss
@ -1,30 +1,30 @@
 header {
-  $logo-height: px2rem(60px);
+  --logo-height: 3.75rem;

  .hmn-logo {
-    height: $logo-height;
+    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 #{$breakpoint-not-small} {
-        width: px2rem(180px);
+      @media screen and (min-width: 35em) {
+        width: 11.25rem;
      }
    }

    &.small {
-      @media #{$breakpoint-not-small} {
-        width: $logo-height;
+      @media screen and (min-width: 35em) {
+        width: var(--logo-height);
        padding: 0.8rem;
        text-align: justify;
-		text-align-last: justify;
+        text-align-last: justify;
        text-justify: inter-character;
        flex-direction: column;
        font-size: 1rem;
@ -35,18 +35,20 @@ header {
  }

  .items {
-    position: relative; // will be used on mobile, when .root-item is not relative
+    position: relative;
+    /* will be used on mobile, when .root-item is not relative */
  }

  .root-item {
-    @media #{$breakpoint-not-small} {
+    @media screen and (min-width: 35em) {
      & {
-        position: relative; // makes submenus align to this item instead of the screen
-        height: $logo-height;
+        position: relative;
+        /* makes submenus align to this item instead of the screen */
+        height: var(--logo-height);
      }
    }

-    &:not(:hover):not(.clicked) > .submenu {
+    &:not(:hover):not(.clicked)>.submenu {
      display: none;
    }

@ -54,9 +56,7 @@ header {
      transform: rotate(180deg);
    }

-    > a {
-      @extend .pa2, .ph3-l;
-
+    >a {
      display: flex;
      justify-content: center;
      align-items: center;
@ -71,15 +71,12 @@ header {

  &:not(.clicked) .root-item:not(:hover),
  &.clicked .root-item:not(.clicked) {
-    > .submenu {
+    >.submenu {
      display: none;
    }
  }

  .submenu {
-    @extend .bw1;
-    @include usevar(background-color, content-background);
-
    display: flex;
    flex-direction: column;
    position: absolute;
@ -90,7 +87,7 @@ header {
    border-top-style: solid;
    border-bottom-style: solid;

-    @media #{$breakpoint-not-small} {
+    @media screen and (min-width: 35em) {
      & {
        border-top-style: none;
        border-left-style: solid;
@ -100,51 +97,18 @@ header {
      }
    }

-    > a {
-      @extend .pa2, .ph3-l;
-
+    >a {
      display: block;
      white-space: nowrap;
      z-index: 1;
      font-weight: bold;
      text-align: center;

-      @media #{$breakpoint-not-small} {
+      @media screen and (min-width: 35em) {
        & {
          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;
-    }
-  }
-}
+}
--- a/src/rawdata/scss/_icons.scss
+++ b/src/rawdata/scss/_icons.scss
@ -1,6 +1,6 @@
@font-face {
  font-family: icons;
-  src: url("/public/icons.ttf?v=4");
+  src: url("icons.ttf?v=4");
 }

 span.icon {
@ -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";
+}
--- a/src/rawdata/scss/icons.ttf
+++ b/src/rawdata/scss/icons.ttf
--- a/src/rawdata/scss/notices.css
+++ b/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);
+}
--- a/src/rawdata/scss/progress_bar.css
+++ b/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%;
+}
--- a/src/rawdata/scss/projects.css
+++ b/src/rawdata/scss/projects.css
@ -0,0 +1,99 @@
+.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);
+  border-color: var(--project-card-border-color);
+
+  transition: box-shadow 0.2s, background-color 0.2s;
+
+  .slideshow & {
+    margin-top: 8px;
+  }
+
+  &:hover {
+    background-color: var(--card-background-hover);
+
+    &>.title {
+      text-decoration: underline;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .details {
+    /* Background color given by theme */
+    transition: background-color 0.2s;
+  }
+
+  .badges:empty {
+    display: none;
+  }
+
+  .badge {
+    color: white;
+    border-radius: 5px;
+  }
+}
--- a/src/rawdata/scss/showcase.css
+++ b/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));
+}
--- a/src/rawdata/scss/style.css
+++ b/src/rawdata/scss/style.css
@ -0,0 +1,17 @@
+@import "tachyons.min.css";
+
+@import "vars.css";
+@import "core.css";
+
+@import "carousel.css";
+@import "content.css";
+@import "editor.css";
+@import "education.css";
+@import "forum.css";
+@import "header.css";
+@import "icons.css";
+@import "notices.css";
+@import "progress_bar.css";
+@import "projects.css";
+@import "showcase.css";
+@import "timeline.css";
--- a/src/rawdata/scss/style.scss
+++ b/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';
--- a/src/rawdata/scss/tachyons-vars.css
+++ b/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)';
+}
--- a/src/rawdata/scss/tachyons.min.css
+++ b/src/rawdata/scss/tachyons.min.css
--- a/src/rawdata/scss/themes/dark/_variables.scss
+++ b/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,
--- a/src/rawdata/scss/themes/light/_variables.scss
+++ b/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,
--- a/src/rawdata/scss/timeline.css
+++ b/src/rawdata/scss/timeline.css
@ -0,0 +1,54 @@
+.avatar-icon {
+    object-fit: cover;
+    border-radius: 100%;
+    overflow: hidden;
+    object-fit: cover;
+    background-color: var(--dimmest-color);
+
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 2px solid;
+    border-color: var(--theme-color);
+    flex-shrink: 0;
+
+    &.big {
+        width: 3rem;
+        height: 3rem;
+
+        @media screen and (min-width: 35em) {
+            width: 3.875rem;
+            height: 3.875rem;
+        }
+    }
+}
+
+.timeline-item {
+    background-color: var(--card-background);
+    --fade-color: var(--card-background);
+    color: var(--main-color);
+
+    .timeline-content-box {
+        &.timeline-item-bg {
+            background-color: var(--timeline-content-background);
+        }
+
+        >* {
+            display: block;
+            max-width: 100%;
+            max-height: 80vh;
+        }
+    }
+}
+
+.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);
+        }
+    }
+}
--- a/src/rawdata/scss/vars.css
+++ b/src/rawdata/scss/vars.css
@ -0,0 +1,91 @@
+/*
+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: #cc3b95;
+    --red: #c61d24;
+
+    --dim-color: #333;
+    --dimmer-color: #999;
+    --dimmest-color: #bbb;
+
+    /* Default theme colors in case the project.css is busted */
+    --theme-color: #666;
+    --theme-color-dim: #aaa;
+    --theme-color-dimmer: #bbb;
+    --theme-color-dimmest: #ccc;
+
+    --theme-color-dark: #666;
+    --theme-color-light: #666;
+
+    --main-background-color: #f8f8f8;
+    --main-background-color-transparent: rgba(#f8f8f8, 0);
+
+    --card-background: #e8e8e8;
+    --card-background-hover: #f0f0f0;
+
+    --dim-background: #f0f0f0;
+    --dim-background-transparent: rgba(#f0f0f0, 0);
+
+    --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;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #202020;
+        --color: #eee;
+        --link-color: #cc3b95;
+
+        --dim-color: #bbb;
+        --dimmer-color: #999;
+        --dimmest-color: #777;
+
+        --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-hover: #333;
+
+        --dim-background: #252525;
+        --dim-background-transparent: rgba(#252525, 0);
+
+        --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;
+    }
+}
--- a/src/templates/mapping.go
+++ b/src/templates/mapping.go
@ -103,9 +103,6 @@ func ProjectToTemplate(
 func ProjectAndStuffToTemplate(p *hmndata.ProjectAndStuff, url string, theme string) Project {
 	res := ProjectToTemplate(&p.Project, url)
 	res.Logo = ProjectLogoUrl(&p.Project, p.LogoLightAsset, p.LogoDarkAsset, theme)
-	for _, o := range p.Owners {
-		res.Owners = append(res.Owners, UserToTemplate(o, theme))
-	}
 	return res
 }

--- a/src/templates/src/about.html
+++ b/src/templates/src/about.html
@ -2,7 +2,7 @@

 {{ define "content" }}
 <div class="post-content">
-	<div class="mw7 ph3 ph0-ns margin-center">
+	<div class="mw7 ph3 ph0-ns m--center">
 		<h3>
 			We're trying to put programming back on the right track.
 		</h3>
@ -16,7 +16,7 @@
 			The Handmade Network's activities are funded by the <a href="{{ .FoundationUrl }}">Handmade Software Foundation</a>, a (soon-to-be) 501(c)(3) nonprofit corporation.
 		</p> -->
 		<p>
-			We can teach programmers how things actually work. We can teach users to expect better. We can build the best software you've ever seen. <a href="{{ .RolesUrl }}"><b>Join us.</b></a>
+			We can teach programmers how things actually work. We can teach users to expect better. We can build the best software you've ever seen. <b>Join us.</b>
 		</p>
 	</div>

@ -69,32 +69,9 @@
 		<div class="flex flex-column flex-row-ns g3">
 			<div class="flex-fair pa3 bg--dim br3">
 				<h3>Martin Fouilleul</h3>
-				<h4>[Secret Project] Lead</h4>
-				<p>Martin is a PhD student at <a href="https://www.ircam.fr/">Ircam</a>, researching programming languages and models for distributed temporal interactions in music and performing arts software. He is also a former sound engineer and computer music designer.</p>
-				<p>Right now he is working behind the scenes on a secret Handmade Network project, to be revealed at a later date.</p>
-			</div>
-			<div class="flex-fair pa3 bg--dim br3">
-				<h3>???</h3>
-				<h4>Education Lead</h4>
-				<p>
-					<strong>This could be you!</strong> Education is one of our flagship initiatives, and we are looking for someone to lead it. If you are excited about programming education and want to help out, please <a href="{{ .EducationLeadUrl }}">learn more and get in touch!</a>
-				</p>
-			</div>
-		</div>
-		<div class="flex flex-column flex-row-ns g3 mt3">
-			<div class="flex-fair pa3 bg--dim br3">
-				<h3>???</h3>
-				<h4>Advocacy Lead</h4>
-				<p>
-					<strong>This could be you!</strong> We want to go out into the world and advocate for better software and better programming practices. We need a strong communicator who can lead this for us. If this excites you, please <a href="{{ .AdvocacyLeadUrl }}">learn more and get in touch!</a>
-				</p>
-			</div>
-			<div class="flex-fair pa3 bg--dim br3">
-				<h3>???</h3>
-				<h4>Design Lead</h4>
-				<p>
-					<strong>This could be you!</strong> Building software for people means designing software for people. We are looking for someone with visual and UX design skills to design website features, event art, livestreaming assets, educational graphics, and more. If any of this sounds interesting to you, <a href="{{ .DesignLeadUrl }}">learn more and get in touch!</a>
-				</p>
+				<h4>Orca Lead</h4>
+				<p>Martin is a systems programmer, researcher, and PhD with experience in programming languages and models for distributed temporal interactions in music and performing arts software. He is also a former sound engineer and computer music designer.</p>
+				<p>He is the project lead on <a href="https://orca-app.dev/">Orca</a>, a new platform for WebAssembly applications outside the browser.</p>
 			</div>
 		</div>
 	</div>
--- a/src/templates/src/blog_index.html
+++ b/src/templates/src/blog_index.html
@ -4,7 +4,7 @@
 <div class="optionbar">
    <div class="options">
        {{ if .CanCreatePost }}
-            <a class="button" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
+            <a class="option" href="{{ .NewPostUrl }}"><span class="big pr1">+</span> Create Post</a>
        {{ end }}
    </div>
    <div class="options">
--- a/src/templates/src/blog_post.html
+++ b/src/templates/src/blog_post.html
@ -1,7 +1,7 @@
 {{ template "base.html" . }}

 {{ define "content" }}
-<div class="mw7 margin-center tl post ph3 ph0-ns">
+<div class="mw7 m--center tl post ph3 ph0-ns">
    <h1>{{ .Thread.Title }}</h1>
    {{ with .MainPost }}
        <div class="flex justify-between items-center mt2 mb3">
--- a/src/templates/src/blog_post_delete.html
+++ b/src/templates/src/blog_post_delete.html
@ -1,7 +1,7 @@
 {{ template "base.html" . }}

 {{ define "content" }}
-<div class="mw7 margin-center">
+<div class="mw7 m--center">
    <h3 class="mb3">Are you sure you want to delete this post?</h3>
    {{ template "forum_post_standalone.html" .Post }}
    <form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">
--- a/src/templates/src/communication_guidelines.html
+++ b/src/templates/src/communication_guidelines.html
@ -1,7 +1,7 @@
 {{ template "base.html" . }}

 {{ define "content" }}
-<div class="center-layout mw7 mv3 ph3 ph0-ns post-content">
+<div class="m--center mw7 mv3 ph3 ph0-ns post-content">
 	<h1>Handmade Guide to Community Interaction</h1>
 	<h2>Our Philosophy</h2>
 	<p>The Handmade community strives to create an environment conducive to innovation, education, and constructive discussion. To that end, we expect members of the community to respect the following set of principles to maintain civil discourse and create an inclusive environment.</p>
--- a/src/templates/src/conferences.html
+++ b/src/templates/src/conferences.html
@ -2,7 +2,7 @@

 {{ define "content" }}
 {{ $bannerclass := "overflow-hidden br2 mt2 h4 h5-ns cover bg-center" }}
-<div class="center-layout mw7 ph3 ph0-ns post-content flex flex-column g3">
+<div class="m--center mw7 ph3 ph0-ns post-content flex flex-column g3">
 	<div class="fronke">
 		<a href="https://handmadehero.org/conference">
 			<h2>HandmadeCon</h2>
--- a/src/templates/src/discord_bot_debug.html
+++ b/src/templates/src/discord_bot_debug.html
@ -1,22 +0,0 @@
-{{ template "base.html" . }}
-
-{{ define "content" }}
-	<table>
-	<thead>
-		<tr>
-			<td>Timestamp</td>
-			<td>Name</td>
-			<td>Extras</td>
-		</tr>
-	</thead>
-	<tbody>
-		{{ range .BotEvents }}
-			<tr>
-				<td>{{ rfc3339 .Timestamp }}</td>
-				<td>{{ .Name }}</td>
-				<td>{{ .Extra }}</td>
-			</tr>
-		{{ end }}
-	</tbody>
-	</table>
-{{ end }}
--- a/src/templates/src/editor.html
+++ b/src/templates/src/editor.html
@ -29,28 +29,6 @@
            {{ if .CanEditPostTitle }}
                <input id="title" class="b w-100 mb1" name="title" type="text" placeholder="Post title..." value="{{ .PostTitle }}" />
            {{ end }}
-            {{/* TODO: Reintroduce the toolbar in a way that makes sense for Markdown */}}
-            {{/*
-            <div class="toolbar" id="toolbar">
-                <input type="button" id="bold" value="B" />
-                <input type="button" id="italic" value="I" /> 
-                <input type="button" id="underline" value="U" /> 
-                <input type="button" id="monospace" value="monospace" /> 
-                <input type="button" id="url" value="url" /> 
-                <input type="button" id="img" value="img" /> 
-                <input type="button" id="code" value="code" /> 
-                <input type="button" id="quote_simple" value="quote (anon)" /> 
-                <input type="button" id="quote_member" value="quote (member)" /> 
-                <input type="button" id="spoiler" value="spoiler" /> 
-                <input type="button" id="lalign" value="Left" /> 
-                <input type="button" id="calign" value="Center" /> 
-                <input type="button" id="ralign" value="Right" />
-                <input type="button" id="ulist" value="ul" />
-                <input type="button" id="olist" value="ol" />
-                <input type="button" id="litem" value="li" />
-                <input type="button" id="youtube" value="youtube" />
-            </div>
-            */}}
            <textarea id="editor" class="w-100 h6 minh-6 pa2 mono lh-copy" name="body">{{ .EditInitialContents }}</textarea>

            <div class="flex justify-end items-center mt2">
--- a/src/templates/src/education_article_delete.html
+++ b/src/templates/src/education_article_delete.html
@ -1,7 +1,7 @@
 {{ template "base.html" . }}

 {{ define "content" }}
-<div class="mw7 margin-center">
+<div class="mw7 m--center">
    <h3 class="mb3">Are you sure you want to delete this article?</h3>
    <div class="bg--dim pa3 br3 tl post-content">
        <h1>{{ .Article.Title }}</h1>
--- a/src/templates/src/episode_list.html
+++ b/src/templates/src/episode_list.html
@ -1,39 +1,6 @@
 {{ template "base.html" . }}

 {{ define "extrahead" }}
-<style type="text/css">
-    .queryContainer {
-        width: 80%;
-        margin: 15px auto 20px auto;
-        display: flex;
-        flex-direction: horizontal;
-    }
-
-    .queryContainer input {
-        height:3em;
-    }
-
-    .queryContainer #query {
-        flex-grow: 1;
-    }
-
-    .queryContainer #submit_button {
-        flex-grow: 0;
-        flex-shrink: 0;
-        padding:0px 10px;
-        vertical-align:middle;
-        margin:0px;
-    }
-    #annotationContainer {
-        left: -10px;
-        margin: 0px;
-        margin-left: -20px;
-        padding: 0px;
-        width: 100%;
-        height: 100%;
-        border: 0px transparent none;
-    }
-</style>
 <link rel="stylesheet" type="text/css" href="{{ static "annotations/cinera.css" }}">
 <link rel="stylesheet" type="text/css" href="{{ static (strjoin "annotations/cinera__" .Project.Subdomain ".css") }}">
 <link rel="stylesheet" type="text/css" href="{{ static "annotations/cinera_topics.css" }}">
--- a/src/templates/src/forum_post_delete.html
+++ b/src/templates/src/forum_post_delete.html
@ -1,7 +1,7 @@
 {{ template "base.html" . }}

 {{ define "content" }}
-<div class="mw7 margin-center">
+<div class="mw7 m--center">
    <h3 class="mb3">Are you sure you want to delete this post?</h3>
    {{ template "forum_post_standalone.html" .Post }}
    <form action="{{ .SubmitUrl }}" method="POST" class="pv3 flex justify-end">
--- a/src/templates/src/foundation.html
+++ b/src/templates/src/foundation.html
@ -1,7 +1,7 @@
 {{ template "base.html" . }}

 {{ define "content" }}
-<div class="post-content mw7 ph3 ph0-ns margin-center">
+<div class="post-content mw7 ph3 ph0-ns m--center">
    <h1>Handmade Software Foundation</h1>
    <!-- <div> -->
 </div>
--- a/src/templates/src/include/footer.html
+++ b/src/templates/src/include/footer.html
@ -6,29 +6,26 @@
        {{ $footerClasses := "ma0 pa0 dib-ns" }}
        <li class="{{ $footerClasses }}">
            <a href="{{ .Footer.HomepageUrl }}">Main Page</a>
+            <span class="c--dimmer dn di-ns"> / </span>
        </li>
        <li class="{{ $footerClasses }}">
            <a href="{{ .Footer.ManifestoUrl }}">Manifesto</a>
+            <span class="c--dimmer dn di-ns"> / </span>
        </li>
        <li class="{{ $footerClasses }}">
            <a href="{{ .Footer.AboutUrl }}">About</a>
-        </li>
-        <li class="{{ $footerClasses }}">
-            <a href="{{ .Footer.RolesUrl }}">Roles</a>
+            <span class="c--dimmer dn di-ns"> / </span>
        </li>
        <li class="{{ $footerClasses }}">
            <a href="{{ .Footer.ProjectIndexUrl }}">Projects</a>
+            <span class="c--dimmer dn di-ns"> / </span>
        </li>
        <li class="{{ $footerClasses }}">
            <a href="{{ .Footer.CommunicationGuidelinesUrl }}">Communication Guidelines</a>
+            <span class="c--dimmer dn di-ns"> / </span>
        </li>
        <li class="{{ $footerClasses }}">
            <a href="{{ .Footer.ContactUrl }}">Contact</a>
        </li>
    </ul>
-	<form onsubmit="this.querySelector('input[name=q]').value = this.querySelector('#searchstring').value + ' site:handmade.network';" class="ma0 mt3 bg--card pa1 br2 dib" method="GET" action="{{ .Footer.SearchActionUrl }}" target="_blank">
-		<input type="hidden" name="q" />
-		<input class="site-search bn lite pa2 fira" type="text" id="searchstring" value="" placeholder="Search with DuckDuckGo" size="18" />
-		<input id="search_button_homepage" type="submit" value="Go"/>
-	</form>
 </footer>
--- a/src/templates/src/include/header.html
+++ b/src/templates/src/include/header.html
@ -1,43 +1,21 @@
 <header id="site-header" class="mb3 bb bw1 b--theme-dark">
-    <a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
-    <div class="user-options flex justify-center justify-end-ns relative">
+    <a href="#content-start" class="sr sr-focusable" id="content-jump">Jump to Content</a>
+    <div class="flex justify-center justify-end-ns relative">
        {{ if .User }}
            {{ if .User.IsStaff }}
-                <a class="admin-panel pa2" href="{{ .Header.AdminUrl }}"><span class="icon-settings"> Admin</span></a>
+                <a class="pa2" href="{{ .Header.AdminUrl }}"><span class="icon-settings"> Admin</span></a>
            {{ end }}
            <div>
                <a class="dib pv2 pl2" href="{{ .Header.UserProfileUrl }}">{{ .User.Username }}</a>
                <a class="dib pv2 pr2" href="{{ .Header.UserSettingsUrl }}">(settings)</a>
            </div>
-            <a class="logout pa2" href="{{ .Header.LogoutActionUrl }}"><span class="icon-logout"></span> Log Out</a>
+            <a class="pa2" href="{{ .Header.LogoutActionUrl }}"><span class="icon-logout"></span> Log Out</a>
        {{ else }}
-            <a class="register pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
-            <a class="login pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
-            <div id="login-popup" class="pa3 bt bb ba-ns bw1 b--theme-dark">
-                <form action="{{ .Header.LoginActionUrl }}" method="post" class="ma0 flex flex-column">
-                    <input type="text" name="username" class="w-100" value="" placeholder="Username" />
-                    <input type="password" name="password" class="w-100 mt1" value="" placeholder="Password" />
-                    <a class="db mt1" href="{{ .Header.ForgotPasswordUrl }}">Forgot your password?</a>
-                    <input type="hidden" name="redirect" value="{{ $.CurrentUrl }}">
-                    <div class="mt2">
-                        <input type="submit" value="Log In" class="w-100" />
-                    </div>
-                    <div class="mt3 tc">
-                        <div class="b mb1">Third-party login</div>
-                        <div class="flex flex-column g1">
-                            <a href="{{ .Header.LoginWithDiscordUrl }}" class="db br2 overflow-hidden flex" title="Log in with Discord">
-                                <img
-                                    src="{{ static "discord-login.svg" }}"
-                                    alt="Log in with Discord"
-                                >
-                            </a>
-                        </div>
-                    </div>
-                </form>
-            </div>
+            <a class="pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
+            <a class="pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
        {{ end }}
    </div>
-	<div class="menu-bar flex flex-column flex-row-ns justify-between w-100 {{ if .IsProjectPage }}project{{ end }}">
+	<div class="flex flex-column flex-row-ns justify-between w-100 {{ if .IsProjectPage }}project{{ end }}">
        <div class="flex flex-column flex-row-ns items-center w-100">
            {{ $itemsClass := "items self-stretch flex items-center justify-center justify-start-ns ml2-ns ml3-l" }}
            {{ if .Header.Project }}
@ -79,30 +57,30 @@
                </a>
                <div class="{{ $itemsClass }}">
                    <div class="root-item">
-                        <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
+                        <a class="pa2 ph3-l" href="{{ .Header.ProjectIndexUrl }}">Projects</a>
                    </div>
                    <div class="root-item">
-                        <a aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
+                        <a class="pa2 ph3-l" aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
                          Events <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
                        </a>
-                        <div class="submenu b--theme-dark" id="events-submenu">
-                            <a href="{{ .Header.JamsUrl }}">Jams</a>
-                            <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
-                            <a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
-                            <a href="{{ .Header.PodcastUrl }}">Podcast</a>
-                            <a href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
-							{{/*<a href="{{ .Header.CalendarUrl }}">Calendar</a>*/}}
+                        <div class="submenu bw1 b--theme-dark bg--main" id="events-submenu">
+                            <a class="pa2 ph3-l" href="{{ .Header.JamsUrl }}">Jams</a>
+                            <a class="pa2 ph3-l" href="{{ .Header.ConferencesUrl }}">Conferences</a>
+                            <a class="pa2 ph3-l" href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
+                            <a class="pa2 ph3-l" href="{{ .Header.PodcastUrl }}">Podcast</a>
+                            <a class="pa2 ph3-l" href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
+							<a class="pa2 ph3-l" href="{{ .Header.CalendarUrl }}">Calendar</a>
                        </div>
                    </div>
                    <div class="root-item">
-                        <a href="{{ .Header.ForumsUrl }}">Forums</a>
+                        <a class="pa2 ph3-l" href="{{ .Header.ForumsUrl }}">Forums</a>
                    </div>
                    <div class="root-item">
-                        <a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
+                        <a class="pa2 ph3-l" aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
                          Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
                        </a>
-                        <div class="submenu b--theme-dark" id="resource-submenu">
-                            <a href="{{ .Header.EducationUrl }}">Education</a>
+                        <div class="submenu bw1 b--theme-dark bg--main" id="resource-submenu">
+                            <a class="pa2 ph3-l" href="{{ .Header.EducationUrl }}">Education</a>
                        </div>
                    </div>
                </div>
@ -171,32 +149,5 @@
            }); 
          }
        }
-
-        // set up login form
-        {
-            const loginPopup = document.getElementById("login-popup");
-            const loginLink = document.getElementById("login-link");
-
-            if (loginPopup !== null) {
-                loginLink.onclick = (e) => { 
-                    e.preventDefault();
-                    loginPopup.classList.toggle("open");
-                }
-            }
-
-			const dtf = new Intl.DateTimeFormat([], {
-				dateStyle: "full",
-				timeStyle: "short",
-			});
-
-            for (const time of document.querySelectorAll('time')) {
-                const d = new Date(Date.parse(time.dateTime));
-				if (time.getAttribute("data-type") == "content") {
-					time.textContent = dtf.format(d);
-				} else {
-					time.title = dtf.format(d);
-				}
-            }
-        }
    });
 </script>
--- a/src/templates/src/include/jam_2024_lj_bannerbig.html
+++ b/src/templates/src/include/jam_2024_lj_bannerbig.html
@ -1,23 +0,0 @@
-<div class="mw7 margin-center link--white">
-    <div class="flex flex-column pv4 tc">
-		<img class="jam-logo margin-center" src="{{ static "learningjam2024/logo.svg" }}">
-		<div class="margin-center mt3 mt4-ns">
-			<a class="jam-title db mb3" href="{{ .JamUrl }}">Learning Jam</a>
-			<div class="flex flex-column flex-row-ns justify-between lh-solid g3 g0-ns">
-				<div>
-					<div class="fw7 f3 mb1">Learn</div>
-					<div class="fw3 f4">March 15-17, 2024</div>
-				</div>
-				<div>
-					<div class="fw7 f3 mb1">Share</div>
-					<div class="fw3 f4">March 22-24, 2024</div>
-				</div>
-			</div>
-		</div>
-		{{ if gt .DaysUntilEnd 0 }}
-			<div class="flex g3 justify-center mt4">
-				<a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a>
-			</div>
-		{{ end }}
-	</div>
-</div>
--- a/src/templates/src/include/jam_2024_lj_bannersmall.html
+++ b/src/templates/src/include/jam_2024_lj_bannersmall.html
@ -1,19 +0,0 @@
-<div class="mw7 margin-center link--white">
-    <div class="flex flex-column flex-row-ns justify-center items-center pv4 g3 tc tl-ns">
-		<img class="jam-logo-small" src="{{ static "learningjam2024/logo.svg" }}">
-        <div class="flex flex-column justify-between">
-            <div>
-                <a class="jam-title db small" href="{{ .JamUrl }}">Learning Jam</a>
-                <div class="fw6 f5 mb3">March 15 - 24, 2024</div>
-            </div>
-            <div class="flex items-center g2">
-                {{ if and (not .SubmittedProjectUrl) (gt .DaysUntilEnd 0) }}
-                    <a href="{{ .NewProjectUrl }}" class="btn--jam">Create your project</a>
-                {{ else }}
-                    <a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a>
-                {{ end }}    
-                <a href="{{ .GuidelinesUrl }}" class="flex items-baseline pa2">Guidelines <div class="dib svgicon f8 ml1">{{ svg "chevron-right" }}</div></a>
-            </div>
-        </div>
-	</div>
-</div>
--- a/src/templates/src/include/jam_2024_lj_description.html
+++ b/src/templates/src/include/jam_2024_lj_description.html
@ -1,14 +0,0 @@
-<div class="ph3 pv4 bb b--rich-gray">
-	<h2 class="dib c--theme-gradient-light">What is a Learning Jam?</h2>
-	<div class="post-content">
-		<p>
-			The <b class="c--theme-gradient-light">Learning Jam</b> is an opportunity for you to learn something new.
-		</p>
-		<p>
-			Unlike traditional game jams, and unlike our previous programming jams, the goal of the <b class="c--theme-gradient-light">Learning Jam</b> is <em>knowledge</em>. It's an opportunity to throw yourself at a topic and learn everything you can about it—and then, to turn around and share that knowledge with others.
-		</p>
-		<p>
-			The jam takes place over <b>two weekends</b>. On the first weekend, you'll learn as much as you can about your topic of choice. On the second, you'll share what you learned in whatever form you like—writeup, video, Minecraft mod, whatever.
-		</p>
-	</div>
-</div>
--- a/src/templates/src/include/jam_2024_lj_feeditems.html
+++ b/src/templates/src/include/jam_2024_lj_feeditems.html
@ -1,41 +0,0 @@
-{{ range . }}
-    <div class="flex flex-column g3 bg--rich-gray pa3">
-        <div class="flex flex-row g3 items-start">
-            {{ if .OwnerAvatarUrl }}
-                <a class="flex flex-shrink-0 br-100 square items-center justify-center overflow-hidden" href="{{ .OwnerUrl }}">
-                    <img class="user-avatar w2-5" src="{{ .OwnerAvatarUrl }}" />
-                </a>
-            {{ end }}
-            <div class="flex flex-column">
-                <div class="">
-                    <a title="{{ (index .Projects 0).Blurb }}" href="{{ (index .Projects 0).Url }}" class="link--white fw6">{{ (index .Projects 0).Name }}</a>
-                    by
-                    <a href="{{ .OwnerUrl }}" class="link--white fw6">{{ .OwnerName }}</a>
-                    <span class="f7 c--gray nowrap">{{ timehtml (relativedate .Date) .Date }}</span>
-                </div>
-                <div>{{ trim .Description }}</div>
-            </div>
-        </div>
-        {{ range .EmbedMedia }}
-            <div class="flex flex-column {{ if eq .Type mediaembed }}wide-screen{{ end }} justify-stretch iframe-fill">
-                {{ if eq .Type mediaimage }}
-                    <img src="{{ .AssetUrl }}">
-                {{ else if eq .Type mediavideo }}
-                    {{ if .ThumbnailUrl }}
-                        <video src="{{ .AssetUrl }}" poster="{{ .ThumbnailUrl }}" preload="none" controls>
-                    {{ else }}
-                        <video src="{{ .AssetUrl }}" preload="metadata" controls>
-                    {{ end }}
-                {{ else if eq .Type mediaaudio }}
-                    <audio src="{{ .AssetUrl }}" controls>
-                {{ else if eq .Type mediaembed }}
-                    {{ .EmbedHTML }}
-                {{ else }}
-                    <div class="">
-                        <a href="{{ .AssetUrl }}" target="_blank">💾{{ .Filename }} ({{ filesize .FileSize }})</a>
-                    </div>
-                {{ end }}
-            </div>
-        {{ end }}
-    </div>
-{{ end }}
--- a/src/templates/src/include/jam_2024_lj_guidelines.html
+++ b/src/templates/src/include/jam_2024_lj_guidelines.html
@ -1,100 +0,0 @@
-<style>
-	.lightbulb-icon {
-		--mask-url: url("{{ static "learningjam2024/lightbulb.svg" }}");
-	}
-	.books-icon {
-		--mask-url: url("{{ static "learningjam2024/books.svg" }}");
-	}
-	.presentation-icon {
-		--mask-url: url("{{ static "learningjam2024/presentation.svg" }}");
-	}
-</style>
-<div class="ph3 pv4 bb b--rich-gray">
-	<h2 class="dib c--theme-gradient-light">What is a Learning Jam?</h2>
-	<div class="post-content">
-		<p>
-			The <b class="c--theme-gradient-light">Learning Jam</b> is an opportunity for you to learn something new.
-		</p>
-		<p>
-			Unlike traditional game jams, and unlike our previous programming jams, the goal of the <b class="c--theme-gradient-light">Learning Jam</b> is <em>knowledge</em>. It's an opportunity to throw yourself at a topic and learn everything you can about it—and then, to turn around and share that knowledge with others.
-		</p>
-		<p>
-			The jam takes place over <b>two weekends</b>. On the first weekend, you'll learn as much as you can about your topic of choice. On the second, you'll share what you learned in whatever form you like—writeup, video, Minecraft mod, whatever.
-		</p>
-	</div>
-</div>
-<div class="ph3 pv4 bb b--rich-gray">
-	<h2 class="mb3 dib c--theme-gradient-light">How to participate</h2>
-	<div class="flex flex-column g2">
-		<div class="pa3 flex flex-column flex-row-ns g3 items-center bg--rich-gray">
-			<div class="flex-shrink-0 w4 flex justify-center items-center">
-				<div class="flex svg-mask lightbulb-icon bg--theme-gradient-light" style="width: 5.2rem">
-					<img class="invisible" src="{{ static "learningjam2024/lightbulb.svg" }}" />
-				</div>
-			</div>
-			<div class="post-content">
-				<h3 class="f4">Choose a topic.</h3>
-				<p>
-					Decide what you'll spend your weekend learning about. Maybe there's an area of programming you've been meaning to dig into, or maybe there's a specialization in your field that you've been curious about. Maybe you just need a reason to read papers for a weekend.
-				</p>
-				<p>
-					You're welcome to work in teams or work solo.
-				</p>
-			</div>
-		</div>
-		<div class="pa3 flex flex-column flex-row-ns g3 items-center bg--rich-gray">
-			<div class="flex-shrink-0 w4 flex justify-center items-center">
-				<div class="flex flex-shrink-0 svg-mask books-icon bg--theme-gradient-light" style="width: 3.6rem">
-					<img class="invisible" src="{{ static "learningjam2024/books.svg" }}" />
-				</div>
-			</div>
-			<div class="post-content">
-				<h3 class="f4">Mar 15-17: Learn!</h3>
-				<p>
-                    {{ if and (eq .DaysUntilStart 0) (not .SubmittedProjectUrl) }}
-                        <a href="{{ .NewProjectUrl }}">Create a Handmade Network project</a>
-                    {{ else }}
-				        Create a Handmade Network project
-                    {{ end }}
-                    to track your progress. Then go down the rabbit hole. Absorb as much information as you can in a weekend.
-				</p>
-				<p>
-					As you learn, we encourage you to share updates on Discord using the <b>!til</b> command. These updates will be published as part of your submission.
-				</p>
-			</div>
-		</div>
-		<div class="pa3 flex flex-column flex-row-ns g3 items-center bg--rich-gray">
-			<div class="flex-shrink-0 w4 flex justify-center items-center">
-				<div class="flex flex-shrink-0 svg-mask presentation-icon bg--theme-gradient-light" style="width: 5rem">
-					<img class="invisible" src="{{ static "learningjam2024/presentation.svg" }}" />
-				</div>
-			</div>
-			<div class="post-content">
-				<h3 class="f4">Mar 22-24: Share!</h3>
-				<p>
-					Share what you learned with the rest of the community. You can present the information in any form you like—whatever helps you communicate most effectively.
-				</p>
-				<p>
-					Your post doesn't have to be the authoritative resource on a subject. It doesn't even have to do much "teaching" at all. The point is just to share what you learned, what surprised you, what you found interesting, and where you want to go from here.
-				</p>
-				<p>
-					Your Handmade Network project is your final submission. Make sure the description gives adequate context, and either attach or link to your final presentation.
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
-<div class="ph3 pv4 bb b--rich-gray">
-	<h2 class="dib c--theme-gradient-light">Why?</h2>
-	<div class="post-content">
-		<p>
-			The Handmade Network's goal is to change the software industry by building back up from new foundations. But in order to do that, we need to understand those foundations.
-		</p>
-		<p>
-			Our other programming jams are great opportunities to try building new things. But what should those new things be? We want to give the community a chance to focus just on learning and research, to gather information and share it with others, to boost the entire community's knowledge on a topic.
-		</p>
-		<p>
-			We hope that the results of the <b class="c--theme-gradient-light">Learning Jam</b> inspire new ideas for the community to explore in the Visibility and Wheel Reinvention jams later in the year. There is so much bad software out in the world, and this is the first step toward reinventing it.
-		</p>
-	</div>
-</div>
--- a/src/templates/src/include/jam_2024_lj_projects.html
+++ b/src/templates/src/include/jam_2024_lj_projects.html
@ -1,35 +0,0 @@
-{{ if .Projects }}
-    <div class="flex flex-row flex-wrap g2 link--white">
-        {{ range .Projects }}
-            <div class="flex-basis-40-ns flex-grow-1 flex-shrink-1 bg--rich-gray pa3 flex flex-column g1">
-                {{ if gt (len .Owners) 1 }}
-                    <div class="flex g2">
-                        {{ range .Owners }}
-							<a title="{{ .Name }}" href="{{ .ProfileUrl }}" class="flex">
-                                <img src="{{ .AvatarUrl }}" class="user-avatar w2">
-                            </a>
-                        {{ end }}
-                    </div>
-                {{ else }}
-                    {{ range .Owners }}
-                        <a href="{{ .ProfileUrl }}" class="fw6 link--white flex g2 items-center">
-                            <img src="{{ .AvatarUrl }}" class="user-avatar w2">
-                            <div>
-                                {{ .Name }}
-                            </div>
-                        </a>
-                    {{ end }}
-                {{ end }}
-                <div class="f3 mt2">
-                    <a href="{{ .Url }}" class="fw6 db">{{ .Name }}</a>
-                </div>
-                <div class="flex-grow-1">{{ .Blurb }}</div>
-            </div>
-        {{ end }}
-        {{ if isodd (len .Projects) }}
-            <div class="flex-basis-40-ns flex-grow-1 flex-shrink-1"></div>
-        {{ end }}
-    </div>
-{{ else }}
-    No projects have been created yet. <a href="{{ .NewProjectUrl }}">Be the first!</a>
-{{ end }}
--- a/src/templates/src/include/notices.html
+++ b/src/templates/src/include/notices.html
@ -1,6 +1,6 @@
 <div>
 	{{ range . }}
-		<div class="notice notice-{{ .Class }} mb2">
+		<div class="notice notice-{{ .Class }} mb2 white ph3 pv2 br2-ns">
 			{{ .Content }}
 		</div>
 	{{ end }}
--- a/src/templates/src/include/pagination.html
+++ b/src/templates/src/include/pagination.html
@ -2,29 +2,29 @@
 {{ if gt .Total 1 }}
    <div class="pagination flex">
        {{ if gt .Current 1 }}
-            <a class="button" href="{{ .PreviousUrl }}">Prev</a>
+            <a class="option" href="{{ .PreviousUrl }}">Prev</a>
        {{ end }}
        {{ if gt .Current 1 }}
            {{ if gt .Current 2 }}
-                <a class="page button" href="{{ .FirstUrl }}">1</a>
+                <a class="page option" href="{{ .FirstUrl }}">1</a>
            {{ end }}
            {{ if gt .Current 3 }}
-                <a class="page button">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
+                <a class="page option">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
            {{ end }}
-            <a class="page button" href="{{ .PreviousUrl }}">{{ sub .Current 1 }}</a>
+            <a class="page option" href="{{ .PreviousUrl }}">{{ sub .Current 1 }}</a>
        {{ end }}
-        <a class="page button current">{{ .Current }}</a>
+        <a class="page option b">{{ .Current }}</a>
        {{ if lt .Current .Total }}
-            <a class="page button" href="{{ .NextUrl }}">{{ add .Current 1 }}</a>
+            <a class="page option" href="{{ .NextUrl }}">{{ add .Current 1 }}</a>
            {{ if lt .Current (sub .Total 2) }}
-                <a class="page button">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
+                <a class="page option">&nbsp;&nbsp;...&nbsp;&nbsp;</a>
            {{ end }}
            {{ if lt .Current (sub .Total 1) }}
-                <a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a>
+                <a class="page option" href="{{ .LastUrl }}">{{ .Total }}</a>
            {{ end }}
        {{ end }}
        {{ if lt .Current .Total }}
-            <a class="button" href="{{ .NextUrl }}">Next</a>
+            <a class="option" href="{{ .NextUrl }}">Next</a>
        {{ end }}
    </div>
 {{ end }}
--- a/src/templates/src/include/thread_list_item.html
+++ b/src/templates/src/include/thread_list_item.html
@ -4,7 +4,7 @@ This template is intended to display a single thread in the context of a forum,
 It should be called with ThreadListItem.
 */}}

-<div class="thread-list-item flex items-center ph3 pv2 {{ if .Unread }}unread{{ else }}read{{ end }} post-list-bg-odd {{ .Classes }}">
+<div class="thread-list-item flex items-center ph3 pv2 {{ if .Unread }}unread{{ else }}read{{ end }} background-even {{ .Classes }}">
    <img class="avatar-icon mr2" src="{{ .FirstUser.AvatarUrl }}">
    <div class="flex-grow-1 overflow-hidden">
        <div class="title nowrap truncate"><a href="{{ .Url }}">{{ .Title }}</a></div>
--- a/src/templates/src/jam_2021_wrj_index.html
+++ b/src/templates/src/jam_2021_wrj_index.html
@ -236,8 +236,8 @@
 </head>

 <body>
-    <div class="left white">
-        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
+    <div class="white">
+        <div class="mt4-ns mw8 m--center ph3-m ph4-l">
            {{ template "header.html" . }}
        </div>

@ -245,7 +245,7 @@
            <img id="logo" src="{{ static "wheeljam2021/logo.svg" }}">
            <h1 id="title">Wheel Reinvention Jam</h1>
            <h2 id="dates">September 27 - October 3, 2O21</h2>
-            <div id="tagline" class="center">
+            <div id="tagline" class="tc">
                A one-week jam to bring a fresh perspective to old ideas.
            </div>
            <div id="actions" class="flex justify-center">
@ -254,7 +254,7 @@
            </div>
        </div>

-        <div class="section mw8 margin-center ph3 ph4-l mv4">
+        <div class="section mw8 m--center ph3 ph4-l mv4">
            <p>
                The <strong>Wheel Reinvention Jam</strong> is a one-week-long jam where you create a replacement for a program that frustrates you.
            </p>
@ -267,16 +267,16 @@
        </div>

        <div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
-            <div class="section mw8 margin-center ph3 ph4-l">
+            <div class="section mw8 m--center ph3 ph4-l">
                <h2>Showcase</h2>
                <p>
                    These screenshots and videos were shared in #jam-showcase on our <a href="https://discord.gg/hmn" target="_blank">Discord</a>. Join us!
                </p>
-                <div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
+                <div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
            </div>
        </div>

-        <div class="section flex-fair mw8 margin-center ph3 ph4-l mv4">
+        <div class="section flex-fair mw8 m--center ph3 ph4-l mv4">
            <h2>Why reinvent the wheel?</h2>
            <p>
                How can you reinvent something that's never been invented?
@ -293,7 +293,7 @@
        </div>

        <div class="bg-black-20 pt4 pb3 pb4-ns">
-            <div class="section mw8 margin-center ph3 ph4-l">
+            <div class="section mw8 m--center ph3 ph4-l">
                <h2>Details</h2>
                <p>
                    The jam takes place from Monday, September 27 through Sunday, October 3. Here's how you can participate:
@ -344,7 +344,7 @@
            </div>
        </div>
        
-        <div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l mv4">
+        <div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l mv4">
            <div class="section flex-fair mb4 mb0-ns">
                <h2>Make it by hand.</h2>
                <p>
@ -368,7 +368,7 @@
            </div>
        </div>

-        <div class="mw8 margin-center ph3-m ph4-l">
+        <div class="mw8 m--center ph3-m ph4-l">
            {{ template "footer.html" . }}
        </div>
    </div>
--- a/src/templates/src/jam_2022_wrj_feed.html
+++ b/src/templates/src/jam_2022_wrj_feed.html
@ -15,13 +15,13 @@
    <div id="top-container" class="flex flex-column items-center ph3">
        <h1 id="title">Wheel Reinvention Jam</h1>
        <h2 id="dates">August 15 - 21, 2O22</h2>
-        <div id="tagline" class="center">
+        <div id="tagline" class="tc">
            A one-week jam to change the status quo.
        </div>
    </div>

    <div class="section bg-black-20 pt4 pb3 pb4-ns">
-        <div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
+        <div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
            <div class="flex-grow-1 overflow-hidden">
                {{ if eq .DaysUntilEnd 0 }}
                    <h3 class="mt0 mb3">Project updates</h3>
--- a/src/templates/src/jam_2022_wrj_index.html
+++ b/src/templates/src/jam_2022_wrj_index.html
@ -22,7 +22,7 @@
        <img id="logo" src="{{ static "wheeljam2022/logo.svg" }}">
        <h1 id="title">Wheel Reinvention Jam</h1>
        <h2 id="dates">August 15 - 21, 2O22</h2>
-        <div id="tagline" class="center">
+        <div id="tagline" class="tc">
            A one-week jam to change the status quo.
            {{ if gt .DaysUntilEnd 0 }}
                {{ if eq .DaysUntilStart 0 }}
@ -50,7 +50,7 @@
        </div>
    </div>

-    <div class="section mw8 margin-center ph3 ph4-l mv4">
+    <div class="section mw8 m--center ph3 ph4-l mv4">
        <p>
            The <strong>Wheel Reinvention Jam</strong> is a one-week-long jam where we turn a fresh eye to "solved problems".
        </p>
@ -67,7 +67,7 @@

    {{ if eq .DaysUntilEnd 0 }}
        <div class="section bg-black-20 pv4 overflow-hidden">
-            <div class="mw8 margin-center ph3 ph4-l">
+            <div class="mw8 m--center ph3 ph4-l">
                <h2>Submitted projects</h2>
                <div class="mt3 projects g3 back-to-normal">
                    {{ range .JamProjects }}
@ -81,7 +81,7 @@
        </div>
    {{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
        <div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
-            <div class="section mw8 margin-center ph3 ph4-l">
+            <div class="section mw8 m--center ph3 ph4-l">
                {{ if gt .DaysUntilEnd 0 }}
                    <h2>Recent updates</h2>
                    <p>
@ -93,7 +93,7 @@
                        These screenshots and videos were shared by jam participants in <b>#project-showcase</b> on our <a href="https://discord.gg/hmn" target="_blank">Discord</a> during the jam. Join us and chat about your favorites!
                    </p>
                {{ end }}
-                <div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
+                <div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
                <div class="actions flex justify-center">
                    <a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ShowcaseFeedUrl }}">See all</a>
                </div>
@ -205,7 +205,7 @@
        </script>
    {{ else }}
        <div class="section bg-black-20 pv4 overflow-hidden">
-            <div class="mw8 margin-center ph3 ph4-l">
+            <div class="mw8 m--center ph3 ph4-l">
                <h2>Last year's entries</h2>
                <p>
                    We had many incredible entries last year. Here are a few of our favorites:
@ -263,7 +263,7 @@
    {{ end }}

    <div class="pt4 pb3 pb4-ns">
-        <div class="section mw8 margin-center ph3 ph4-l">
+        <div class="section mw8 m--center ph3 ph4-l">
            <h2>How to participate</h2>
            <p>
                The jam takes place from Monday, August 15 through Sunday, August 21. Here's how you can participate:
@ -307,7 +307,7 @@
    </div>

    <div class="bg-black-20 pt4 pb3 pb4-ns">
-        <div class="section mw8 margin-center ph3 ph4-l">
+        <div class="section mw8 m--center ph3 ph4-l">
            <h2>Rules</h2>
            <ul>
                <li>Any tech is allowed, but we encourage you to use only use what you really need. If you want some lightweight templates to get you started, check out our <a href="https://github.com/HandmadeNetwork/jam_templates" target="_blank">app templates</a>.</li>
@ -338,7 +338,7 @@
    </div>
    
    <div class="pt4">
-        <div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l">
+        <div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l">
            <div class="section flex-fair mb4 mb0-ns">
                <h2>Make it by hand.</h2>
                <p>
--- a/src/templates/src/jam_2023_vj_feed.html
+++ b/src/templates/src/jam_2023_vj_feed.html
@ -13,11 +13,11 @@
 <div id="top-container" class="flex flex-column items-center ph3">
  <a href="{{ .JamUrl }}"><h1 id="title">Visibility Jam</h1></a>
  <h2 id="dates">April 14 - 16, 2O23</h2>
-  <div id="tagline" class="center">See things in a new way.</div>
+  <div id="tagline" class="tc">See things in a new way.</div>
 </div>

 <div class="section pt4 pb3 pb4-ns">
-  <div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
+  <div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
    <div class="flex-grow-1 overflow-hidden">
      {{ if eq .DaysUntilEnd 0 }}
      <h3 class="mt0 mb3">Project updates</h3>
--- a/src/templates/src/jam_2023_vj_index.html
+++ b/src/templates/src/jam_2023_vj_index.html
@ -21,7 +21,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
    <img id="logo" src="{{ static "visjam2023/logo.svg" }}">
    <h1 id="title">Visibility Jam</h1>
    <h2 id="dates">April 14 - 16, 2O23</h2>
-    <div id="tagline" class="center">
+    <div id="tagline" class="tc">
        See things in a new way.
        {{ if gt .DaysUntilEnd 0 }}
        {{ if eq .DaysUntilStart 0 }}
@ -72,7 +72,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
    </div>
    </div>

-    <div class="section mw8 margin-center ph3 ph4-l mv4">
+    <div class="section mw8 m--center ph3 ph4-l mv4">
    <p>
        Too many things in computing are <b>invisible</b>.
    </p>
@ -86,7 +86,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
 </div>

 <div class="section pv4">
-  <div class="mw8 margin-center ph3 ph4-l">
+  <div class="mw8 m--center ph3 ph4-l">
    <h2>Read the recap</h2>
    <p>Now that the jam is over, see which projects stood out. <a class="b" href="{{ .RecapUrl }}">Full post ➜</a></p>
  </div>
@ -94,7 +94,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}

 {{ if eq .DaysUntilEnd 0 }}
 <div class="section pv4 overflow-hidden">
-  <div class="mw8 margin-center ph3 ph4-l">
+  <div class="mw8 m--center ph3 ph4-l">
    <h2>Submitted projects</h2>
    <div class="mt3 projects g3 back-to-normal">
      {{ range .JamProjects }} {{ template "project_card.html" projectcarddata . "" }} {{ end }}
@ -110,7 +110,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
 </div>
 {{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
 <div id="showcase-outer-container" class="pt4 pb3 pb4-ns">
-  <div class="section mw8 margin-center ph3 ph4-l">
+  <div class="section mw8 m--center ph3 ph4-l">
    {{ if gt .DaysUntilEnd 0 }}
    <h2>Recent updates</h2>
    <p>
@ -129,7 +129,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
      jam. Join us and chat about your favorites!
    </p>
    {{ end }}
-    <div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
+    <div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
    <div class="actions flex justify-center">
      <a
        class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
@ -249,7 +249,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
 {{ end }}

 <div id="inspiration" class="pt4">
-  <div class="section mw8 margin-center ph3 ph4-l">
+  <div class="section mw8 m--center ph3 ph4-l">
    <h2>Inspiration</h2>
  </div>
  <div class="inspiration flex flex-column flex-wrap g3 ph3 ph4-l pt3 pt4-ns pb4 overflow-x-scroll">
@ -331,7 +331,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
 </style>

 <div class="pt4 pb3 pb4-ns">
-  <div class="section mw8 margin-center ph3 ph4-l">
+  <div class="section mw8 m--center ph3 ph4-l">
    <h2>How to participate</h2>
    <p>
      The jam takes place from Friday, April 14 through Sunday, April 16. Here's
@ -384,7 +384,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
 </div>

 <div class="pt4 pb3 pb4-ns">
-  <div class="section mw8 margin-center ph3 ph4-l">
+  <div class="section mw8 m--center ph3 ph4-l">
    <h2>Rules</h2>
    <ul>
      <li>Any tech is allowed.</li>
--- a/src/templates/src/jam_2023_vj_recap.html
+++ b/src/templates/src/jam_2023_vj_recap.html
@ -15,11 +15,11 @@
    <h1 id="title">Visibility Jam</h1>
  </a>
  <h2 id="dates">April 14 - 16, 2O23</h2>
-  <div id="tagline" class="center">See things in a new way.</div>
+  <div id="tagline" class="tc">See things in a new way.</div>
 </div>

 <div class="section pt4 pb3 pb4-ns">
-  <div class="mw8 margin-center ph3 ph4-l">
+  <div class="mw8 m--center ph3 ph4-l">
    <h2 class="mb2">Jam recap</h2>
    <div class="mb4 flex items-center">
      <div class="avatar-icon contain bg-center" style="background-image:url('{{ .Ben.AvatarUrl }}');"></div>
--- a/src/templates/src/jam_2023_wrj_feed.html
+++ b/src/templates/src/jam_2023_wrj_feed.html
@ -15,13 +15,13 @@
    <div id="top-container" class="flex flex-column items-center ph3">
        <h1 id="title">Wheel Reinvention Jam</h1>
        <h2 id="dates">September 25 - October 1, 2023</h2>
-        <div id="tagline" class="center">
+        <div id="tagline" class="tc">
            A one-week jam to change the status quo.
        </div>
    </div>

    <div class="section bg-black-20 pt4 pb3 pb4-ns">
-        <div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
+        <div class="mw8 m--center ph3 ph4-l flex flex-column flex-row-ns g3">
            <div class="flex-grow-1 overflow-hidden">
                {{ if eq .DaysUntilEnd 0 }}
                    <h3 class="mt0 mb3">Project updates</h3>
--- a/src/templates/src/jam_2023_wrj_index.html
+++ b/src/templates/src/jam_2023_wrj_index.html
@ -23,7 +23,7 @@
    </style>

 	{{ if .TwitchEmbedUrl }}
-	<div class="section mw8 margin-center ph3 ph4-l mv4" style="aspect-ratio: 16 / 9;">
+	<div class="section mw8 m--center ph3 ph4-l mv4" style="aspect-ratio: 16 / 9;">
 		<iframe src="{{ .TwitchEmbedUrl }}" allowfullscreen width="100%" height="100%"></iframe>
 	</div>
 	{{ end }}
@ -32,7 +32,7 @@
        <img id="logo" src="{{ static "wheeljam2023/logo.svg" }}">
        <h1 id="title">Wheel Reinvention Jam</h1>
        <h2 id="dates">September 25 - October 1, 2023</h2>
-        <div id="tagline" class="center">
+        <div id="tagline" class="tc">
            A one-week jam where you start from scratch.
            {{ if gt .DaysUntilEnd 0 }}
                {{ if eq .DaysUntilStart 0 }}
@ -60,7 +60,7 @@
        </div>
    </div>

-    <div class="section mw8 margin-center ph3 ph4-l mv4">
+    <div class="section mw8 m--center ph3 ph4-l mv4">
        <p>
            The <b>Wheel Reinvention Jam</b> is a one-week jam where we build software from&nbsp;scratch.
        </p>
@ -77,7 +77,7 @@

    {{ if eq .DaysUntilEnd 0 }}
        <div class="section bg-black-20-alternate pv4">
-            <div class="mw8 margin-center ph3 ph4-l">
+            <div class="mw8 m--center ph3 ph4-l">
                <h2>Recap show</h2>
                <p>Watch the livestream celebrating this year's submissions:</p>
                <div class="aspect-ratio aspect-ratio--16x9">
@ -86,7 +86,7 @@
            </div>
        </div>
        <div class="section bg-black-20-alternate pv4 overflow-hidden">
-            <div class="mw8 margin-center ph3 ph4-l">
+            <div class="mw8 m--center ph3 ph4-l">
                <h2>Submitted projects</h2>
                <div class="mt3 projects g3 back-to-normal">
                    {{ range .JamProjects }}
@ -100,7 +100,7 @@
        </div>
    {{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
        <div id="showcase-outer-container" class="bg-black-20-alternate pt4 pb3 pb4-ns">
-            <div class="section mw8 margin-center ph3 ph4-l">
+            <div class="section mw8 m--center ph3 ph4-l">
                {{ if gt .DaysUntilEnd 0 }}
                    <h2>Recent updates</h2>
                    <p>
@ -112,7 +112,7 @@
                        These screenshots and videos were shared by jam participants in <b>#project-showcase</b> on our <a href="https://discord.gg/hmn" target="_blank">Discord</a> during the jam. Join us and chat about your favorites!
                    </p>
                {{ end }}
-                <div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
+                <div id="showcase-container" class="mw8 m--center mh2 mh0-ns"></div>
                <div class="actions flex justify-center">
                    <a class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3" target="_blank" href="{{ .ShowcaseFeedUrl }}">See all</a>
                </div>
@ -224,7 +224,7 @@
        </script>
    {{ else }}
        <div class="section bg-black-20-alternate pv4 overflow-hidden">
-            <div class="mw8 margin-center ph3 ph4-l">
+            <div class="mw8 m--center ph3 ph4-l">
                <h2>Last year's entries</h2>
                <p>
                    We had 28 incredible entries <a href="https://handmade.network/jam/2022">last year</a>. Here are a few of our favorites:
@ -306,7 +306,7 @@
    {{ end }}

    <div class="bg-black-20-alternate pt4 pb3 pb4-ns">
-        <div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l">
+        <div class="flex-ns flex-row-ns mw8 m--center ph3 ph4-l">
            <div class="section flex-fair mb4 mb0-ns">
                <h2>Why reinvent the wheel?</h2>
                <p>
@ -340,7 +340,7 @@
    </div>

    <div class="bg-black-20-alternate pt4 pb3 pb4-ns">
-        <div class="section mw8 margin-center ph3 ph4-l">
+        <div class="section mw8 m--center ph3 ph4-l">
            <h2>How to participate</h2>
            <p>
                The jam takes place from Monday, September 25 through Sunday, October 1. Here's how you can participate:
@ -384,7 +384,7 @@
    </div>

    <div class="bg-black-20-alternate pv4">
-        <div class="section mw8 margin-center ph3 ph4-l">
+        <div class="section mw8 m--center ph3 ph4-l">
            <h2>Rules</h2>
            <ul>
                <li>Any tech is allowed. Popular tech choices in the community are <a href="https://www.raylib.com/">Raylib</a>, <a href="https://www.libsdl.org/">SDL</a>, <a href="https://github.com/ocornut/imgui">Dear ImGui</a>, and <a href="https://github.com/rxi/microui">microui</a>. Or if you're feeling ambitious, you can even use our new app platform, <a href="https://orca-app.dev/">Orca</a>!</li>
--- a/src/templates/src/jam_2024_lj_feed.html
+++ b/src/templates/src/jam_2024_lj_feed.html
@ -1,31 +0,0 @@
-{{ template "jam_2024_learning_base.html" . }}
-
-{{ define "content-top" }}
-	{{ template "jam_2024_lj_bannersmall.html" . }}
-{{ end }}
-
-{{ define "content" }}
-<div class="mw7 margin-center flex flex-column">
-	<div class="ph3 pv4 bb b--rich-gray">
-		<h2 class="c--theme-gradient-light mb3">Projects</h2>
-		{{ template "jam_2024_lj_projects.html" .Projects }}
-	</div>
-	{{ if .TimelineItems }}
-		<div class="ph3 pv4 bb b--rich-gray">
-			<h2 class="c--theme-gradient-light">All updates</h2>
-			<p>
-				See what community members are learning about their topics. You can share your own updates via your <a href="{{ or .SubmittedProjectUrl .NewProjectUrl }}">project page</a> or using the <b>!til</b> command on Discord.
-			</p>
-			<div class="flex flex-column g2 mt3">
-				{{ template "jam_2024_lj_feeditems.html" .TimelineItems }}
-			</div>
-		</div>
-	{{ end }}
-	<div>
-		<div class="mv5 h3 fill-current link--white">
-			<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
-		</div>
-	</div>
-</div>
-{{ end }}
-
--- a/src/templates/src/jam_2024_lj_guidelines_index.html
+++ b/src/templates/src/jam_2024_lj_guidelines_index.html
@ -1,16 +0,0 @@
-{{ template "jam_2024_learning_base.html" . }}
-
-{{ define "content-top" }}
-	{{ template "jam_2024_lj_bannersmall.html" . }}
-{{ end }}
-
-{{ define "content" }}
-<div class="mw7 margin-center flex flex-column">
-    {{ template "jam_2024_lj_guidelines.html" . }}
-	<div>
-		<div class="mv5 h3 fill-current link--white">
-			<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
-		</div>
-	</div>
-</div>
-{{ end }}
--- a/src/templates/src/jam_2024_lj_index.html
+++ b/src/templates/src/jam_2024_lj_index.html
@ -1,81 +0,0 @@
-{{ template "jam_2024_learning_base.html" . }}
-
-{{ define "content-top" }}
-	{{ if or (gt .DaysUntilStart 0) (eq .DaysUntilEnd 0) }}
-		{{ template "jam_2024_lj_bannerbig.html" . }}
-	{{ else }}
-		{{ template "jam_2024_lj_bannersmall.html" . }}
-	{{ end }}
-{{ end }}
-
-{{ define "content" }}
-<div class="mw7 margin-center flex flex-column">
-	{{ if gt .DaysUntilStart 0 }}
-		{{ template "before-jam" . }}
-	{{ else if gt .DaysUntilEnd 0 }}
-		{{ template "during-jam" . }}
-	{{ else }}
-		{{ template "after-jam" . }}
-	{{ end }}
-
-	<div>
-		<div class="mv5 h3 fill-current link--white">
-			<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
-		</div>
-	</div>
-</div>
-{{ end }}
-
-{{ define "before-jam" }}
-	{{ template "jam_2024_lj_guidelines.html" . }}
-{{ end }}
-
-{{ define "during-jam" }}
-	{{ if .Projects.Projects }}
-		{{ template "jam_2024_lj_description.html" . }}
-		{{ if .TimelineItems }}
-			<div class="ph3 pv4 bb b--rich-gray">
-				<h2 class="c--theme-gradient-light">Recent updates</h2>
-				<p>
-					See what community members are learning about their topics. You can share your own updates via your <a href="{{ or .SubmittedProjectUrl .NewProjectUrl }}">project page</a> or using the <b>!til</b> command on Discord.
-				</p>
-				<div class="flex flex-column g2 mt3">
-					{{ template "jam_2024_lj_feeditems.html" .TimelineItems }}
-					<a href="{{ .JamFeedUrl }}" class="link--white tc pa1">
-						See all updates<div class="dib svgicon f8 ml1">{{ svg "chevron-right" }}</div>
-					</a>
-				</div>
-			</div>
-		{{ end }}
-		<div class="ph3 pv4 bb b--rich-gray">
-			<h2 class="c--theme-gradient-light mb3">Projects</h2>
-			{{ template "jam_2024_lj_projects.html" .Projects }}
-		</div>
-	{{ else }}
-		{{ template "jam_2024_lj_guidelines.html" . }}
-	{{ end }}
-{{ end }}
-
-{{ define "after-jam" }}
-	{{ template "jam_2024_lj_description.html" . }}
-	<div class="ph3 pv4 bb b--rich-gray">
-		<h2 class="dib c--theme-gradient-light">Recap show</h2>
-		<p>
-			Watch the recap show celebrating all the submissions:
-		</p>
-		<div class="mt3" style="aspect-ratio: 16 / 9;">
-			<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/MCrt472DkxE?si=PGWFnM8rK4GqCjH7" title="HMN Learning Jam 2024 Recap Stream" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-		</div>
-	</div>
-	<div class="ph3 pv4 bb b--rich-gray">
-		<div class="flex justify-between items-baseline">
-			<h2 class="c--theme-gradient-light mb0">Submitted projects</h2>
-			<a href="{{ .JamFeedUrl }}" class="link--white tc">
-				See all updates<div class="dib svgicon f8 ml1">{{ svg "chevron-right" }}</div>
-			</a>
-		</div>
-		<div class="mt3">
-			{{ template "jam_2024_lj_projects.html" .Projects }}
-		</div>
-	</div>
-{{ end }}
--- a/src/templates/src/jam_save_the_date.html
+++ b/src/templates/src/jam_save_the_date.html
@ -1,333 +0,0 @@
-{{/*
-This is a copy-paste from base.html because we want to preserve the unique
-style of this page no matter what future changes we make to the base.
-*/}}
-<!DOCTYPE html>
-<html lang="en-US" {{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ static "favicon-16x16.png" }}">
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ static "favicon-32x32.png" }}">
-
-    {{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
-    {{ range .OpenGraphItems }}
-        {{ if .Property }}
-            <meta property="{{ .Property }}" content="{{ .Value }}" />
-        {{ else }}
-            <meta name="{{ .Name }}" content="{{ .Value }}" />
-        {{ end }}
-    {{ end }}
-    {{ if .Title }}
-        <title>{{ .Title }} | Handmade Network</title>
-    {{ else }}
-        <title>Handmade Network</title>
-    {{ end }}
-    <meta name="theme-color" content="#232426">
-
-    <!-- <script src="{{ static "js/templates.js" }}"></script> -->
-
-    <link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
-    <link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
-    <link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
-	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
-	<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
-
-	<style>
-		:root {
-			--theme-gradient-dark: linear-gradient(to bottom right, #232426, #BFB6BE);
-			--theme-gradient-light: linear-gradient(to bottom right, #8BD5FF, #5899FF);
-			--white: #fff;
-			--bg-button: rgba(255, 255, 255, 0);
-			--bg-button-hover: rgba(255, 255, 255, 0.1);
-			--charcoal: #2F2F2F;
-			--gray: #CBCBCB;
-			--rich-gray: #494949;
-
-			--spacing-0: 0;
-			--spacing-1: .25rem;
-			--spacing-2: .5rem;
-			--spacing-3: 1rem;
-			--spacing-4: 2rem;
-			--spacing-5: 4rem;
-			--spacing-6: 8rem;
-			--spacing-7: 16rem;
-			--border-radius-2: 0.25rem;
-
-			--link-color: white;
-		}
-
-		body {
-			font-family: "Inter", "Fira Sans", sans-serif;
-			font-size: 1rem; /* remove this override when base stylesheet is less dumb */
-		}
-
-		h1, h2, h3, h4, h5, h6 {
-			font-weight: 700;
-		}
-
-		.w2-5 {
-			width: 3rem;
-		}
-
-		.link--white {
-			--link-color: var(--white);
-		}
-
-		.post-content p {
-			/* stupid override, should be done by .post-content instead of .content */
-			margin: 0.6rem 0;
-		}
-
-		.bg--theme-gradient-dark {
-			background: var(--theme-gradient-dark);
-            /* background: linear-gradient(to bottom right, #333, #BBB); */
-		}
-
-		.bg--theme-gradient-light {
-			background: var(--theme-gradient-light);
-		}
-
-		.bg--charcoal {
-			background: var(--charcoal);
-		}
-
-		.bg--rich-gray {
-			background: var(--rich-gray);
-		}
-
-		.bg--gray {
-			background: var(--gray);
-		}
-
-		.b--charcoal {
-			border-color: var(--charcoal);
-		}
-
-		.b--rich-gray {
-			border-color: var(--rich-gray);
-		}
-
-		.c--theme-gradient-dark {
-			background: var(--theme-gradient-dark);
-			background-clip: text;
-			-webkit-background-clip: text;
-			color: transparent;
-		}
-
-		.c--theme-gradient-light {
-			background: var(--theme-gradient-light);
-			background-clip: text;
-			-webkit-background-clip: text;
-		}
-
-		.c--theme-gradient-light {
-			color: transparent;
-		}
-
-		.c--gray {
-			color: var(--gray);
-		}
-
-		.input--jam {
-			border: 1px solid var(--white);
-			border-radius: var(--border-radius-2) !important;
-			padding: var(--spacing-2) !important;
-		}
-
-		.btn--jam {
-			border: 1px solid var(--white);
-			border-radius: var(--border-radius-2);
-			padding: var(--spacing-2) var(--spacing-3);
-
-			background-color: var(--bg-button);
-		}
-
-		.btn--jam.small {
-			padding: var(--spacing-1) var(--spacing-2);
-		}
-
-		.btn--jam:hover {
-			background-color: var(--bg-button-hover);
-		}
-
-		.button-simple {
-			background: var(--bg-button);
-			border: 1px solid var(--white);
-		}
-
-		.button-simple:hover {
-			background: var(--bg-button-hover);
-		}
-
-		.c-white {
-			color: var(--white);
-		}
-
-		.invisible {
-			visibility: hidden;
-		}
-
-		.svg-mask {
-			mask: var(--mask-url);
-			-webkit-mask: var(--mask-url);
-		}
-
-		.fill-current {
-			fill: currentColor;
-		}
-
-		.square {
-			aspect-ratio: 1 / 1;
-		}
-
-		.wide-screen {
-			aspect-ratio: 16 / 9;
-		}
-
-		.iframe-fill iframe {
-			flex-grow: 1;
-		}
-
-		.hmn-logo {
-			font-family: 'MohaveHMN', sans-serif;
-			text-transform: uppercase;
-			font-size: 1.6rem;
-			padding: 0.2rem 0.8rem;
-		}
-
-		.header-nav {
-			padding-right: 0.6rem;
-		}
-
-		.user-avatar {
-			border-radius: 999px;
-			background-color: rgba(0, 0, 0, 0.4);
-		}
-
-		.user-avatar.header {
-			width: 1.8rem;
-		}
-
-		.jam-logo {
-			max-width: 18rem;
-		}
-
-		.jam-logo-small {
-			max-width: 8rem;
-		}
-
-		.jam-title {
-			font-size: 2.5rem;
-			font-weight: 700;
-			/* align the bounding box with the visible text */
-			margin-left: -0.06em;
-			margin-right: -0.03em;
-		}
-
-		.w-headline {
-			width: 20.3rem;
-		}
-
-		/* not small */
-		@media screen and (min-width: 35em) {
-			.w-headline {
-				width: 44.67rem;
-			}
-
-			.jam-title {
-				font-size: 5.53rem;
-			}
-		}
-	</style>
-</head>
-
-<body class="bg--theme-gradient-dark c-white flex flex-column">
-    <div class="bg-black-20 flex flex-row items-center link--white">
-        <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
-            Handmade
-        </a>
-        <div class="flex-grow-1 flex-shrink-1"></div>
-        <div class="header-nav flex flex-row items-center g3 lh-solid f6">
-            <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
-            <a href="{{ .Header.JamsUrl }}">Jams</a>
-            <a class="db" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
-                <img class="user-avatar header" src="{{ .UserAvatarUrl }}">
-            </a>
-        </div>
-    </div>
-    <div class="tc flex-grow-1 flex justify-center items-center-ns g5 pv5">
-		<div class="w-headline flex flex-column">
-			<div class="jam-title mb4 lh-solid">Handmade Jams</div>
-			<div class="flex flex-column flex-row-ns justify-between-ns g4 g0-ns lh-solid">
-				<div>
-					<div class="fw7 f3 f2-ns">Visibility Jam</div>
-					<div class="fw3 f4 mt1">July 19-21, 2024</div>
-					<div class="fw6 f5 pt3">
-						<a href="{{ .Visibility2023Url }}" class="db">
-							Last year's jam<div class="dib svgicon f8 ml1">{{ svg "chevron-right" }}</div>
-						</a>
-					</div>
-				</div>
-				<div>
-					<div class="fw7 f3 f2-ns">Wheel Reinvention Jam</div>
-					<div class="fw3 f4 mt1">September 23-29, 2024</div>
-					<div class="fw6 f5 pt3">
-						<a href="{{ .WRJ2023Url }}" class="db">
-							Last year's jam<div class="dib svgicon f8 ml1">{{ svg "chevron-right" }}</div>
-						</a>
-					</div>
-				</div>
-			</div>
-			<div class="tl tj-ns mt4 post-content">
-				<p>The Handmade community runs multiple programming jams every year. If you've participated in a game jam before, the idea is similar—an event where participants build something from scratch in a short period of time. Unlike a game jam, though, we don't declare winners (although we do celebrate our favorite results). <a class="fw6" href="{{ .JamsUrl }}">See all our prior jams here.</a></p>
-				<p>To participate in the next one, <a class="fw6" href="https://discord.gg/hmn">join our Discord</a>, or sign up for our mailing list:</p>
-			</div>
-			<form id="newsletter-form" class="mt4 flex flex-column g1">
-				<div class="flex g2 justify-center">
-					<input id="newsletter-email" type="email" class="input--jam flex-grow-1 flex-grow-0-ns" placeholder="me@example.com">
-					<button id="newsletter-button" class="btn--jam">Sign up</button>
-				</div>
-				<div id="newsletter-message" class="f7">
-					&nbsp;
-				</div>
-			</form>
-		</div>
-    </div>
-
-	<script>
-		const form = document.querySelector("#newsletter-form");
-		const emailField = document.querySelector("#newsletter-email");
-		const button = document.querySelector("#newsletter-button");
-		const message = document.querySelector("#newsletter-message");
-
-		form.addEventListener("submit", async e => {
-			e.preventDefault();
-			button.disabled = true;
-
-			try {
-				const res = await fetch("{{ .NewsletterSignupUrl }}", {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify({
-						"email": emailField.value,
-					}),
-				});
-				if (res.status >= 400) {
-					throw new Error("bad request");
-				}
-
-				message.innerText = "Signed up successfully!";
-			} catch (err) {
-				message.innerText = "There was an error signing up.";
-			}
-
-			button.disabled = false;
-		});
-	</script>
-</body>
-
-</html>
--- a/src/templates/src/jams_index.html
+++ b/src/templates/src/jams_index.html
@ -16,11 +16,6 @@
    <p>Since 2020, we have been running programming jams to encourage community members to explore new ideas and start projects. You can view all the past submissions and results here.</p>

    <div class="jam-grid g3">
-        <a href="{{ .LJ2024Url }}">
-            <div class="br2 overflow-hidden flex">
-                <img src="{{ static "learningjam2024/2024LJTwitterCard.png" }}">
-            </div>
-        </a>
        <a href="{{ .WRJ2023Url }}">
            <div class="br2 overflow-hidden flex">
                <img src="{{ static "wheeljam2023/TwitterCard.png" }}">
--- a/src/templates/src/landing.html
+++ b/src/templates/src/landing.html
@ -2,7 +2,32 @@

 {{ define "extrahead" }}
 <script src="{{ static "js/templates.js" }}"></script>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
+<style>
+	.landing-layout {
+		display: grid;
+		gap: var(--spacing-medium);	
+	}
+
+	.landing-layout > * {
+		overflow: hidden;
+	}
+	
+	@media screen and (min-width: 60em) {
+		.landing-layout {
+			grid-template-columns: 1fr;
+			grid-auto-columns: 1fr;
+		}
+			
+		.landing-layout > * {
+			grid-column: 1 / 2;
+		}
+			
+		.landing-layout > .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 :) */
+		}
+	}
+</style>
 {{ end }}

 {{ define "content" }}
@ -112,6 +137,74 @@
 </div>
 */}}

+<div class="mb3 ph3 ph0-ns">
+	<style>
+        #jam-banner {
+            background: linear-gradient(174deg, #23CE76, #299CE0);
+            color: white !important;
+            text-align: center;
+        }
+
+        #jam-banner h3 {
+            font-family: 'MohaveHMN', sans-serif;
+            font-weight: normal;
+            font-size: 2.2rem;
+            line-height: 0.8;
+            margin: 0;
+            text-transform: uppercase;
+        }
+
+        #jam-details {
+            font-family: 'MohaveHMN', sans-serif;
+            font-variant: small-caps;
+            font-size: 1.2rem;
+            line-height: 0.8;
+            margin-top: 0.6rem;
+            letter-spacing: 0.02rem;
+        }
+
+        #jam-learn-more {
+            font-size: 1rem;
+        }
+
+        @media screen and (min-width: 30rem) {
+            #jam-banner {
+                text-align: left;
+            }
+
+            #jam-title-container {
+                padding-top: 0.2rem;
+            }
+        }
+    </style>
+	<a id="jam-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="{{ .JamUrl }}">
+		<img class="h3" src="{{ static "wheeljam2023/logo.svg" }}">
+		<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
+			<h3 id="jam-title">Wheel Reinvention Jam</h3>
+			<div id="jam-details">
+				September 25 - October 1.
+				{{ if gt .JamDaysUntilEnd 0 }}
+					{{ if eq .JamDaysUntilStart 0 }}
+						<b>Happening now.</b>
+					{{ else if eq .JamDaysUntilStart 1 }}
+						<b>Starting tomorrow.</b>
+					{{ else }}
+						<b>In {{ .JamDaysUntilStart }} days.</b>
+					{{ end }}
+				{{ else }}
+					<b>See the results.</b>
+				{{ end }}
+			</div>
+		</div>
+		<div class="flex-grow-1"></div>
+		<div id="jam-learn-more">
+			Learn more
+			<div class="dib svgicon">{{ svg "chevron-right" }}</div>
+		</div>
+	</a>
+</div>
+
+{{/*
 <div class="mb3 ph3 ph0-ns">
 	<style>
        #cities-banner {
@ -189,7 +282,7 @@
 		<div id="cities-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
 			<h3 id="cities-title">Handmade cities</h3>
 			<div class="cities-details">
-				Boston - Aug 9-10 2024.
+				Boston - Aug 3-4 2023.
 				{{ if gt .HMBostonDaysUntilEnd 0 }}
 					{{ if eq .HMBostonDaysUntilStart 0 }}
 						<b>Happening now.</b>
@ -201,7 +294,7 @@
 				{{ end }}
 			</div>
      <div class="cities-details">
-				Seattle - Nov 20-22 2024.
+				Seattle - Nov 15-17 2023.
 				{{ if gt .HMSDaysUntilEnd 0 }}
 					{{ if eq .HMSDaysUntilStart 0 }}
 						<b>Happening now.</b>
@ -221,175 +314,6 @@
 		</div>
 	</a>
 </div>
-
-<div class="mb3 ph3 ph0-ns">
-	<style>
-        #jam-banner {
-            background: linear-gradient(to bottom right, #003c83, #019AD2);
-            color: white !important;
-            text-align: center;
-        }
-
-		#jam-banner .jam-logo {
-			height: 7.25rem;
-		}
-
-        #jam-banner h3 {
-            font-family: 'Inter', sans-serif;
-            font-weight: 700;
-            font-size: 2.31rem;
-            /* line-height: 0.8; */
-            margin: 0;
-        }
-
-		#jam-title-container {
-			line-height: 1.25;
-		}
-
-        #jam-details {
-            font-family: 'Inter', sans-serif;
-            font-size: 1.2rem;
-            /* line-height: 0.8; */
-            margin-top: 0.2rem;
-        }
-
-        #jam-learn-more {
-            font-size: 1rem;
-        }
-
-        @media screen and (min-width: 30rem) {
-            #jam-banner {
-                text-align: left;
-            }
-
-			#jam-banner h3 {
-				font-size: 2.2rem;
-			}
-
-			#jam-banner .jam-logo {
-				height: 5.25rem;
-			}
-        }
-    </style>
-	<a id="jam-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="{{ .JamUrl }}">
-		<img class="jam-logo" src="{{ static "learningjam2024/logo.svg" }}">
-		<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
-			<h3 id="jam-title">Learning Jam</h3>
-			<div id="jam-details">
-				<div class="db dn-ns">
-					<div>
-						March 15-17. March 22-24.
-					</div>
-					<div>
-						{{ if gt .JamDaysUntilEnd 0 }}
-							{{ if eq .JamDaysUntilStart 0 }}
-								<b>Happening now.</b>
-							{{ else if eq .JamDaysUntilStart 1 }}
-								<b>Starting tomorrow.</b>
-							{{ else }}
-								<b>In {{ .JamDaysUntilStart }} days.</b>
-							{{ end }}
-						{{ else }}
-							<b>See the results.</b>
-						{{ end }}
-					</div>
-				</div>
-				<div class="dn db-ns">
-					<div>
-						March 15-17.
-					</div>
-					<div>
-						March 22-24.
-						{{ if gt .JamDaysUntilEnd 0 }}
-							{{ if eq .JamDaysUntilStart 0 }}
-								<b>Happening now.</b>
-							{{ else if eq .JamDaysUntilStart 1 }}
-								<b>Starting tomorrow.</b>
-							{{ else }}
-								<b>In {{ .JamDaysUntilStart }} days.</b>
-							{{ end }}
-						{{ else }}
-							<b>See the results.</b>
-						{{ end }}
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="flex-grow-1"></div>
-		<div id="jam-learn-more">
-			Learn more
-			<div class="dib svgicon">{{ svg "chevron-right" }}</div>
-		</div>
-	</a>
-</div>
-
-{{/*
-<div class="mb3 ph3 ph0-ns">
-	<style>
-        #jam-banner {
-            background: linear-gradient(174deg, #23CE76, #299CE0);
-            color: white !important;
-            text-align: center;
-        }
-
-        #jam-banner h3 {
-            font-family: 'MohaveHMN', sans-serif;
-            font-weight: normal;
-            font-size: 2.2rem;
-            line-height: 0.8;
-            margin: 0;
-            text-transform: uppercase;
-        }
-
-        #jam-details {
-            font-family: 'MohaveHMN', sans-serif;
-            font-variant: small-caps;
-            font-size: 1.2rem;
-            line-height: 0.8;
-            margin-top: 0.6rem;
-            letter-spacing: 0.02rem;
-        }
-
-        #jam-learn-more {
-            font-size: 1rem;
-        }
-
-        @media screen and (min-width: 30rem) {
-            #jam-banner {
-                text-align: left;
-            }
-
-            #jam-title-container {
-                padding-top: 0.2rem;
-            }
-        }
-    </style>
-	<a id="jam-banner" class="pv3 ph3 ph4-l br3 flex flex-column flex-row-ns items-center" href="{{ .JamUrl }}">
-		<img class="h3" src="{{ static "wheeljam2023/logo.svg" }}">
-		<div id="jam-title-container" class="flex flex-column pl3-m pl4-l pv3 pv0-ns">
-			<h3 id="jam-title">Wheel Reinvention Jam</h3>
-			<div id="jam-details">
-				September 25 - October 1.
-				{{ if gt .JamDaysUntilEnd 0 }}
-					{{ if eq .JamDaysUntilStart 0 }}
-						<b>Happening now.</b>
-					{{ else if eq .JamDaysUntilStart 1 }}
-						<b>Starting tomorrow.</b>
-					{{ else }}
-						<b>In {{ .JamDaysUntilStart }} days.</b>
-					{{ end }}
-				{{ else }}
-					<b>See the results.</b>
-				{{ end }}
-			</div>
-		</div>
-		<div class="flex-grow-1"></div>
-		<div id="jam-learn-more">
-			Learn more
-			<div class="dib svgicon">{{ svg "chevron-right" }}</div>
-		</div>
-	</a>
-</div>
 */}}

 {{ if not .User }}
@ -451,7 +375,7 @@
 			<div id="welcome-logo" class="h4 mb3 mb4-ns">
 				{{ svg "hmn_circuit" }}
 			</div>
-			<div id="welcome-content" class="center-layout" style="max-width: 51rem">
+			<div id="welcome-content" class="m--center" style="max-width: 51rem">
 				<p class="b">We are working to correct the course of the software industry.</p>
 				<p>We are a community of low-level programmers with high-level goals. Originally inspired by Casey Muratori's <a href="https://handmadehero.org/" target="_blank">Handmade Hero</a>, we dig deep into our systems and learn how to do things from scratch. We're not satisfied by the latest popular language or the framework of the month. Instead we care about how computers <b>actually&nbsp;work.</b></p>
 				<p>Software quality is declining, and modern development practices are making it worse. We need to change course. <b>Help us get the software industry back on track.</b></p>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ben Visness	7e01dae78e	WIP cleanup styles dunno	2024-05-13 19:00:09 -05:00
Ben Visness	b1b97e760e	Port _projects.scss (deleting most of it!)	2024-05-13 18:47:07 -05:00
Ben Visness	38a2979f82	Port the content styles (easier than I thought!)	2024-05-13 18:33:15 -05:00
Ben Visness	379ad520de	Port education styles	2024-05-13 17:43:39 -05:00
Ben Visness	f9d3fc6c6b	Do all the easy stuff	2024-05-10 22:22:31 -05:00
Ben Visness	54008b0c81	Convert the header / nav styles	2024-05-10 20:22:20 -05:00
Ben Visness	9286e5701d	Wahoo more WIP haha	2024-04-29 18:41:00 -05:00
Ben Visness	3181805dd4	Finish cleaning up core.css for now (still a couple old things)	2024-04-29 17:40:24 -05:00
Ben Visness	b4f9d379f4	WIP I dunno why do I do this	2024-03-08 18:46:17 -06:00
Ben Visness	7215e83650	WIP	2024-02-06 19:52:41 -06:00
Ben Visness	f6691cee24	Start converting styles to plain CSS wow there is a lot of garbage in here	2024-02-04 20:55:46 -06:00
				`@ -1 +0,0 @@`
				<?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 236 253" 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;"><rect id="books" x="0" y="0" width="235.74" height="252.97" style="fill:none;"/><path d="M77.61,252.704l0,-230.569l80.52,-0l-0,230.569l-80.52,0Zm59.686,-188.853l0,-20.883l-38.853,-0l0,20.883l38.853,0Zm0,128.926l0,-108.092l-38.853,-0l0,108.092l38.853,-0Zm-38.853,20.833l0,18.261l38.853,-0l0,-18.261l-38.853,0Zm-98.032,39.094l-0,-252.438l70.429,-0l-0,252.438l-70.429,0Zm49.596,-206.372l-0,-25.233l-28.763,-0l0,25.233l28.763,0Zm-0,142.369l-0,-121.536l-28.763,0l0,121.536l28.763,-0Zm-28.763,20.833l0,22.337c0,-0 28.763,-0 28.763,-0l-0,-22.337l-28.763,-0Zm143.656,43.17l-0,-252.438l70.429,-0l-0,252.438l-70.429,0Zm49.596,-206.372l-0,-25.233l-28.763,-0l0,25.233l28.763,0Zm-0,142.369l-0,-121.536l-28.763,0l0,121.536l28.763,-0Zm-28.763,20.833l0,22.337l28.763,-0l-0,-22.337l-28.763,-0Z"/></svg>