Mostly convert old styles to plain CSS

wow there is a lot of garbage in here

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

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()
 }
+
+*/

src/hmnurl/urls.go

@@ -347,24 +347,6 @@ func BuildConferences() string {
 	return Url("/conferences", nil)
 }
 
-/*
-* Volunteer/Staff Roles
- */
-
-var RegexStaffRolesIndex = regexp.MustCompile(`^/roles$`)
-
-func BuildStaffRolesIndex() string {
-	defer CatchPanic()
-	return Url("/roles", nil)
-}
-
-var RegexStaffRole = regexp.MustCompile(`^/roles/(?P<slug>[^/]+)$`)
-
-func BuildStaffRole(slug string) string {
-	defer CatchPanic()
-	return Url(fmt.Sprintf("/roles/%s", slug), nil)
-}
-
 /*
 * User
  */
@@ -649,6 +631,12 @@ func BuildEducationRerender() string {
 	return Url("/education/rerender", nil)
 }
 
+/*
+ * Style test
+ */
+
+var RegexStyleTest = regexp.MustCompile(`^/debug/styles$`)
+
 /*
 * Forums
  */

src/rawdata/scss/_admin.scss

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

src/rawdata/scss/_authors.scss

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

src/rawdata/scss/_content.scss

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

src/rawdata/scss/_core.scss

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

src/rawdata/scss/_editor.scss

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

src/rawdata/scss/_episodes.scss

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

src/rawdata/scss/_forum.scss

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

src/rawdata/scss/_irc.scss

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

src/rawdata/scss/_landing.scss

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

src/rawdata/scss/_library.scss

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

src/rawdata/scss/_notices.scss

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

src/rawdata/scss/_profile.scss

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

src/rawdata/scss/_progress_bar.scss

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

src/rawdata/scss/_projects.scss

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

src/rawdata/scss/_showcase.scss

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

src/rawdata/scss/_streams.scss

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

src/rawdata/scss/_timeline.scss

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

src/rawdata/scss/carousel.css

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

src/rawdata/scss/content.css

@@ -0,0 +1,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;
+    }
+  }
+}

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

src/rawdata/scss/editor.css

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

src/rawdata/scss/education.css

@@ -1,26 +1,26 @@
 .edu-course {
     &.highlight {
         border-left: 0.25rem solid black;
-        @include usevar(border-color, link-color);
+        border-color: var(--link-color);
-        @include usevar(background-color, theme-color-dimmest);
+        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;
     }
 }

src/rawdata/scss/forum.css

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

src/rawdata/scss/header.css

@@ -1,8 +1,8 @@
 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;
@@ -14,14 +14,14 @@ header {
     color: white !important;
 
     &.big {
-      @media #{$breakpoint-not-small} {
+      @media screen and (min-width: 35em) {
-        width: px2rem(180px);
+        width: 11.25rem;
       }
     }
 
     &.small {
-      @media #{$breakpoint-not-small} {
+      @media screen and (min-width: 35em) {
-        width: $logo-height;
+        width: var(--logo-height);
         padding: 0.8rem;
         text-align: justify;
         text-align-last: justify;
@@ -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
+        position: relative;
-        height: $logo-height;
+        /* 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 {
+    >a {
-      @extend .pa2, .ph3-l;
-
       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 {
+    >a {
-      @extend .pa2, .ph3-l;
-
       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;
-    }
-  }
 }

src/rawdata/scss/icons.css

@@ -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";
 }

src/rawdata/scss/notices.css

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

src/rawdata/scss/progress_bar.css

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

src/rawdata/scss/projects.css

@@ -0,0 +1,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;
+  }
+}

src/rawdata/scss/showcase.css

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

src/rawdata/scss/style.css

@@ -0,0 +1,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";

src/rawdata/scss/style.scss

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

src/rawdata/scss/tachyons-vars.css

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

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

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

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

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

src/rawdata/scss/timeline.css

@@ -0,0 +1,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);
+        }
+    }
+}

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

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>
+				<h4>Orca 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>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>Right now he is working behind the scenes on a secret Handmade Network project, to be revealed at a later date.</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 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>
 			</div>
 		</div>
 	</div>

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">

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">

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">

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>

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>

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">

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>

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" }}">

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">

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>

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>
+            <span class="c--dimmer dn di-ns"> / </span>
-        <li class="{{ $footerClasses }}">
-            <a href="{{ .Footer.RolesUrl }}">Roles</a>
         </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>

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>
+    <a href="#content-start" class="sr sr-focusable" id="content-jump">Jump to Content</a>
-    <div class="user-options flex justify-center justify-end-ns relative">
+    <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="pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
-            <a class="login pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
+            <a class="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>
         {{ 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">
+                        <div class="submenu bw1 b--theme-dark bg--main" id="events-submenu">
-                            <a href="{{ .Header.JamsUrl }}">Jams</a>
+                            <a class="pa2 ph3-l" href="{{ .Header.JamsUrl }}">Jams</a>
-                            <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
+                            <a class="pa2 ph3-l" href="{{ .Header.ConferencesUrl }}">Conferences</a>
-                            <a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
+                            <a class="pa2 ph3-l" href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
-                            <a href="{{ .Header.PodcastUrl }}">Podcast</a>
+                            <a class="pa2 ph3-l" href="{{ .Header.PodcastUrl }}">Podcast</a>
-                            <a href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
+                            <a class="pa2 ph3-l" href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
-							{{/*<a href="{{ .Header.CalendarUrl }}">Calendar</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">
+                        <div class="submenu bw1 b--theme-dark bg--main" id="resource-submenu">
-                            <a href="{{ .Header.EducationUrl }}">Education</a>
+                            <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>

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 }}

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 }}

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>

src/templates/src/jam_2021_wrj_index.html

@@ -236,8 +236,8 @@
 </head>
 
 <body>
-    <div class="left white">
+    <div class="white">
-        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
+        <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>

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>

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>

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>

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>

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>

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>

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>

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" }}
@@ -451,7 +476,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>

src/templates/src/layouts/base.html

@@ -42,7 +42,6 @@
         }
     </style>
 
-    <link rel="stylesheet" href="{{ statictheme .Theme "theme.css" }}" />
     <link rel="stylesheet" href="{{ .ProjectCSSUrl }}" />
     <link rel="apple-touch-icon" sizes="400x400" href="{{ static "logo.png" }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ static "favicon-16x16.png" }}">
@@ -73,7 +72,7 @@
 </head>
 
 <body class="{{ join " " .BodyClasses }}">
-    <div class="content mw-site ph3-m ph4-l">
+    <div class="bg--main m--center mw-site ph3-m ph4-l">
         {{ template "header.html" . }}
 		{{ template "notices.html" .Notices }}
         {{ with .Breadcrumbs }}

src/templates/src/layouts/jam_2023_visibility_base.html

@@ -346,8 +346,8 @@
 </head>
 
 <body>
-    <div class="left white">
+    <div class="white">
-        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
+        <div class="mt4-ns mw8 m--center ph3-m ph4-l">
             {{ template "header.html" . }}
         </div>
 
@@ -355,7 +355,7 @@
             {{ block "content" . }}{{ end }}
         </div>
 
-        <div class="mw8 margin-center ph3-m ph4-l">
+        <div class="mw8 m--center ph3-m ph4-l">
             {{ template "footer.html" . }}
         </div>
     </div>

src/templates/src/layouts/landing_page.html

@@ -1,54 +0,0 @@
-{{/*
-    This is a copy-paste from base.html because we want to preserve the unique
-    style of landing pages if we change base.html in the future.
-*/}}
-<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
-<html lang="en-US">
-<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 "visjam2023/favicon-16x16.png" }}">
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ static "visjam2023/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="#346ba6">
-
-    <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 rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
-
-</head>
-
-<body>
-    <div class="left white">
-        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
-            {{ template "header.html" . }}
-        </div>
-
-        <div class="jam-sections">
-            {{ block "content" . }}{{ end }}
-        </div>
-
-        <div class="mw8 margin-center ph3-m ph4-l">
-            {{ template "footer.html" . }}
-        </div>
-    </div>
-</body>
-
-</html>

src/templates/src/layouts/role_base.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>{{ .Role.Name }}</h1>
     {{ block "role content" . }}{{ end }}
     

src/templates/src/layouts/staticpage.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>{{ block "title" . }}Handmade Network{{ end }}</title>
-</head>
-
-<body>
-    {{ block "content" . }}{{ end }}
-    {{ template "footer.html" . }}
-</body>
-
-</html>

src/templates/src/layouts/timemachine_base.html

@@ -197,13 +197,13 @@
 </head>
 
 <body>
-  <div class="left white">
+  <div class="white">
-    <div class="mt4-ns mw7 margin-center ph3-ns">
+    <div class="mt4-ns mw7 m--center ph3-ns">
       {{ template "header.html" . }}
     </div>
 
     <div class="jam-sections">
-      <div class="center-layout content mw7 ph3 flex flex-column g3">
+      <div class="m--center content mw7 ph3 flex flex-column g3">
         {{ with .Breadcrumbs }}
           <div class="mt2 tc tl-ns ph2 ph0-ns">
             {{ range $i, $e := . -}}
@@ -217,7 +217,7 @@
       </div>
       {{ block "content" . }}{{ end }}
 
-      <div class="mw8 margin-center ph3-ns">
+      <div class="mw8 m--center ph3-ns">
         {{ template "footer.html" . }}
       </div>
     </div>

src/templates/src/layouts/wheeljam_2022_base.html

@@ -339,14 +339,14 @@
 </head>
 
 <body>
-    <div class="left white">
+    <div class="white">
-        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
+        <div class="mt4-ns mw8 m--center ph3-m ph4-l">
             {{ template "header.html" . }}
         </div>
 
         {{ block "content" . }}{{ end }}
 
-        <div class="mw8 margin-center ph3-m ph4-l">
+        <div class="mw8 m--center ph3-m ph4-l">
             {{ template "footer.html" . }}
         </div>
     </div>

src/templates/src/layouts/wheeljam_2023_base.html

@@ -342,14 +342,14 @@
 </head>
 
 <body>
-    <div class="left white">
+    <div class="white">
-        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
+        <div class="mt4-ns mw8 m--center ph3-m ph4-l">
             {{ template "header.html" . }}
         </div>
 
         {{ block "content" . }}{{ end }}
 
-        <div class="mw8 margin-center ph3-m ph4-l">
+        <div class="mw8 m--center ph3-m ph4-l">
             {{ template "footer.html" . }}
         </div>
     </div>

src/templates/src/manifesto.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">
 	<h2>Computers are amazing.</h2>
 	<p>Computing has changed our lives for the better. Computers allow us to learn, connect with each other, and express ourselves in amazing new ways. And every year our devices get more powerful, less expensive, and more accessible - computers today can do things we hardly dreamed of twenty years ago.</p>
 

src/templates/src/podcast_index.html

@@ -27,8 +27,8 @@
 						<img class="br3" src="{{ .ImageUrl }}">
 					</div>
 					<div class="ph3-ns w-100 overflow-hidden">
-						<a href="{{ .Url }}"><h3 class="f4">Episode {{ .EpisodeNumber }}: {{ .Title }}</h3></a>
+						<a href="{{ .Url }}"><h3 class="f4 mb3">Episode {{ .EpisodeNumber }}: {{ .Title }}</h3></a>
-						<div class="p-spaced">{{ .DescriptionHtml }}</div>
+						<div class="post-content">{{ .DescriptionHtml }}</div>
 					</div>
 				</li>
 			{{ end }}

src/templates/src/project.css

@@ -1,141 +1,39 @@
 {{ $c := hex2color .Color }}
 
-{{/* Theme "dim" colors tend more toward the background value (lighter or darker) */}}
-{{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }}
-{{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }}
-{{ $themeDimmest := eq .Theme "dark" | ternary (lightness 0.2 $c) (lightness 0.85 $c) | color2css }}
-
-{{/* Theme "dark" and "light" colors are always darker or lighter in value, regardless of theme. */}}
-{{ $themeDark := eq .Theme "dark" | ternary (lightness 0.30 $c) (lightness 0.35 $c) | color2css }}
-{{ $themeLight := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.55 $c) | color2css }}
-
-{{ $linkColor := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.35 $c) | color2css }}
-{{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }}
-
 :root {
     --theme-color: {{ $c | color2css }};
-    --theme-color-dim: {{ $themeDim }};
-    --theme-color-dimmer: {{ $themeDimmer }};
-    --theme-color-dimmest: {{ $themeDimmest }};
 
-    --theme-color-dark: {{ $themeDark }};
+    --theme-color-dim: {{ lightness 0.75 $c | color2css }};
-    --theme-color-light: {{ $themeLight }};
+    --theme-color-dimmer: {{ lightness 0.8 $c | color2css }};
+    --theme-color-dimmest: {{ lightness 0.85 $c | color2css }};
 
-    --link-color: {{ $linkColor }};
+    --theme-color-dark: {{ lightness 0.35 $c | color2css }};
-    --link-hover-color: {{ $linkHoverColor }};
+    --theme-color-light: {{ lightness 0.55 $c | color2css }};
 
-    --input-lite-border: {{ $linkColor }};
+    --link-color: {{ lightness 0.35 $c | color2css }};
+    --link-hover-color: {{ lightness 0.45 $c | color2css }};
+
+    --background-even-background: {{ lightness 0.95 $c | color2css }};
+
+    --input-lite-border: var(--link-color);
 }
 
-.accent {
+@media (prefers-color-scheme: dark) {
-    background-color: {{ $themeDim }};
+    :root {
-    background-color: var(--theme-dim);
+        --theme-color-dim: {{ lightness 0.35 $c | color2css }};
-}
+        --theme-color-dimmer: {{ lightness 0.3 $c | color2css }};
-.user-bar {
+        --theme-color-dimmest: {{ lightness 0.2 $c | color2css }};
-    border-bottom-color: {{ $themeDim }};
+    
-    border-bottom-color: var(--theme-dim);
+        --theme-color-dark: {{ lightness 0.30 $c | color2css }};
-}
+        --theme-color-light: {{ lightness 0.55 $c | color2css }};
-header .content-title .subtitle {
+    
-    border-top-color: {{ $themeDim }};
+        --link-color: {{ lightness 0.55 $c | color2css }};
-    border-top-color: var(--theme-dim);
+        --link-hover-color: {{ lightness 0.65 $c | color2css }};
+
+        --background-even-background: {{ lightness 0.15 $c | color2css }};
+    }
 }
 
-a, .thread:before, button, .button, input[type=button] { 
-    color: {{ $linkColor }};
-    color: var(--link-color);
-}
-
-.submit, input[type=submit] {
-    color: white;
-}
-
-a.submit:hover, .submit:hover, input[type=submit]:hover {
-    color: white;
-}
-
-a:hover, button:hover, .button:hover, input[type=button]:hover { 
-    color: {{ $linkHoverColor }};
-    color: var(--link-hover-color);
-}
 .unread .avatar-icon {
-    border: 2px solid {{ $linkColor }};
     border: 2px solid var(--link-color);
 }
-
-.post-list-bg-odd:nth-of-type(odd) {
-    background-color: {{ .PostBgColor }};
-}
-
-.bg-theme {
-    background-color: {{ $c | color2css }};
-    background-color: var(--theme-color);
-}
-
-.bg-theme-dim {
-    background-color: {{ $themeDim }};
-    background-color: var(--theme-color-dim);
-}
-
-.bg-theme-dimmer {
-    background-color: {{ $themeDimmer }};
-    background-color: var(--theme-color-dimmer);
-}
-
-.bg-theme-dimmest {
-    background-color: {{ $themeDimmest }};
-    background-color: var(--theme-color-dimmest);
-}
-
-.bg-theme-dark {
-    background-color: {{ $themeDark }};
-    background-color: var(--theme-color-dark);
-}
-
-.bg-theme-light {
-    background-color: {{ $themeLight }};
-    background-color: var(--theme-color-light);
-}
-
-.b--theme {
-    border-color: {{ $c | color2css }};
-    border-color: var(--theme-color);
-}
-
-.b--theme-dim {
-    border-color: {{ $themeDim }};
-    border-color: var(--theme-color-dim);
-}
-
-.b--theme-dimmer {
-    border-color: {{ $themeDimmer }};
-    border-color: var(--theme-color-dimmer);
-}
-
-.b--theme-dimmest {
-    border-color: {{ $themeDimmest }};
-    border-color: var(--theme-color-dimmest);
-}
-
-.b--theme-dark {
-    border-color: {{ $themeDark }};
-    border-color: var(--theme-color-dark);
-}
-
-.b--theme-light {
-    border-color: {{ $themeLight }};
-    border-color: var(--theme-color-light);
-}
-
-:root {
-    --background-even-background: {{ .PostBgColor }};
-}
-
-/* Assets */
-
-.half.light {
-    background-image:url("{{ statictheme "light" "accent_top_a.svg" }}");
-}
-
-.half.dark {
-    background-image:url("{{ statictheme "dark" "accent_top_a.svg" }}");
-}

src/templates/src/project_homepage.html

@@ -28,7 +28,7 @@
 				{{ range $i, $owner := .Owners }}
 					<div class="flex mb3 items-center">
 						<img class="avatar-icon mr2" src="{{ $owner.AvatarUrl }}" />
-						<a class="user-link" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
+						<a class="rel" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
 					</div>
 				{{ end }}
 			</div>

src/templates/src/project_index.html

@@ -7,7 +7,7 @@
 {{ define "all_projects" }}
 	<div>
 		{{ with .OfficialProjects }}
-			<div class="carousel-container project-carousel mw-100 mv2 mv3-ns margin-center dn db-ns">
+			<div class="carousel-container project-carousel mw-100 mv2 mv3-ns m--center dn db-ns">
 				<div class="carousel pa3 h5 overflow-hidden bg--dim br2-ns">
 					{{ range $index, $project := . }}
 						<div class="carousel-item flex pv3 pl3 w-100 h-100 bg--dim items-center {{ if eq $index 0 }}active{{ end }}">
@@ -110,7 +110,7 @@
 			</div>
 		{{ end }}
 
-		<div class="projectlist pa3 grid grid-1 grid-2-ns g3">
+		<div class="pa3 grid grid-1 grid-2-ns g3">
 			{{ range .PageProjects }}
 				{{ template "project_card.html" projectcarddata . "" }}
 			{{ end }}

src/templates/src/style_test.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+
+<head>
+    <title>Style test</title>
+    <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 rel="stylesheet" type="text/css" href="{{ static "style.build.css" }}" /> 
+</head>
+
+<body class="ma3">
+    <h1>Base style test</h1>
+
+    <p>
+        This page demonstrates the baseline styles for the HMN website.
+    </p>
+    <p>
+        These styles intentionally do not affect layout, only text appearance, colors, etc. We do this because mixing layout and themeing in CSS is a bad idea. Modifying "layout" properties like margin and padding in your base styles makes it hard to ever use those tags across your site, and leads to lots of <code>padding: 0 !important;</code> overrides across your site.
+    </p>
+    <p>
+        This does not produce good-looking longform text, like you want in forum posts or articles. This is the purpose of the <code>.post-content</code> class, which opts into layout properties that are good for textual content.
+    </p>
+
+    <h2>Text &amp; links</h2>
+    Text outside paragraphs looks like this.
+    <p>
+        Text can be <strong>strong</strong> and <b>bold</b>, <em>emphasized</em> and <i>italic</i>.
+    </p>
+    <p>
+        The <a href="https://handmade.network/">Handmade Network</a> started as a simple forum site for fans of <a href="https://handmadehero.org/" class="external">Handmade Hero</a>.
+    </p>
+
+    <h2>Lists</h2>
+    <p>
+        Lists are really not used outside of <code>post-content</code>, but we can at least ensure that the bullets render the way we want.
+    </p>
+    <ol>
+        <li>Ordered lists use numbers, obviously.</li>
+        <li>What else would they do?</li>
+        <li>It is the only sensible option.</li>
+    </ol>
+    <p>
+        The layout of lists obviously looks kind of bad, but again, we are not worried about that here. Better to leave the styles alone so we can more easily disable them in contexts like navigation.
+    </p>
+    <ul>
+        <li>Unordered lists use bullets.</li>
+        <li>The bullets need to look ok.</li>
+        <li>It is important that things look ok.</li>
+    </ul>
+
+    <h2>Monospace</h2>
+    <p>
+        This is a website for programmers, after all.
+    </p>
+    <p>
+        Inline code in a paragraph looks like <code>printf("Hello, world!");</code>.
+    </p>
+    <p>
+        A block of code looks like:
+    </p>
+    <code><pre>#include &lt;stdio.h&gt;
+
+int main() {
+    printf("Hello, world!\n");
+}
+</pre></code>
+    <p>
+        The same block of code in a paragraph looks different. Browsers are fun.
+    </p>
+    <p><code><pre>#include &lt;stdio.h&gt;
+
+int main() {
+    printf("Hello, world!\n");
+}
+</pre></code></p>
+
+
+    <h1>post-content test</h1>
+
+    <p>The <code>post-content</code> class yields styles that look nice for textual content.</p>
+
+    <div class="post-content pa3 ba b--theme-dim">
+        <h1>Heading 1</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <ol>
+            <li>List items without paragraphs.</li>
+            <li>
+                <p>List items with paragraphs.</p>
+                <p>These should also look reasonable.</p>
+            </li>
+            <li>And back to no paragraphs.</li>
+        </ol>
+
+        <h2>Heading 2</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <ul>
+            <li>List items without paragraphs.</li>
+            <li>
+                <p>List items with paragraphs.</p>
+                <p>These should also look reasonable.</p>
+            </li>
+            <li>And back to no paragraphs.</li>
+        </ul>
+    </div>
+</body>

src/templates/src/timemachine.html

@@ -2,7 +2,7 @@
 
 {{ define "content" }}
 
-<div class="center-layout content mw7 ph3 flex flex-column g3">
+<div class="m--center content mw7 ph3 flex flex-column g3">
   <div>
     <div class="mv5 flex justify-center">
       <img

src/templates/src/timemachine_submissions.html

@@ -5,7 +5,7 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="center-layout content mw7 ph3 flex flex-column g3">
+<div class="m--center content mw7 ph3 flex flex-column g3">
   <div>
     <div class="mv4 mv5-ns flex justify-center">
       <div class="frame mw6">

src/templates/src/timemachine_submit.html

@@ -8,8 +8,8 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="center-layout content mw7 ph3 flex flex-column g3">
+<div class="m--center content mw7 ph3 flex flex-column g3">
-  <div class="frame mv3 mv4-ns mw6 margin-center">
+  <div class="frame mv3 mv4-ns mw6 m--center">
     {{ template "frame title" "Submit A Video" }}
     <form class="post-content" action="" method="POST">
       {{ csrftoken .Session }}

src/templates/src/timemachine_thanks.html

@@ -8,7 +8,7 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="center-layout content mw7 ph3 flex flex-column g3">
+<div class="m--center content mw7 ph3 flex flex-column g3">
   <div class="mv5 flex justify-center">
     <div class="frame mw6">
       {{ template "frame title" "Submission Complete" }}

src/templates/src/user_profile.html

@@ -32,7 +32,7 @@
 {{ define "content" }}
 <div class="flex flex-column flex-row-l">
 	<div class="
-		sidebar flex-shrink-0 self-start-l
+		flex-shrink-0 self-start-l
 		flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
 		mw5-l mh3 ml0-ns mb3 overflow-hidden
 	">

src/templates/types.go

@@ -80,7 +80,6 @@ type Footer struct {
 	CodeOfConductUrl           string
 	CommunicationGuidelinesUrl string
 	ProjectIndexUrl            string
-	RolesUrl                   string
 	ContactUrl                 string
 	SearchActionUrl            string
 }

src/website/base_data.go

@@ -89,7 +89,6 @@ func getBaseData(c *RequestContext, title string, breadcrumbs []templates.Breadc
 			ManifestoUrl:               hmnurl.BuildManifesto(),
 			CommunicationGuidelinesUrl: hmnurl.BuildCommunicationGuidelines(),
 			ProjectIndexUrl:            hmnurl.BuildProjectIndex(1, ""),
-			RolesUrl:                   hmnurl.BuildStaffRolesIndex(),
 			ContactUrl:                 hmnurl.BuildContactPage(),
 			SearchActionUrl:            "https://duckduckgo.com",
 		},

src/website/debug.go

@@ -0,0 +1,7 @@
+package website
+
+func StyleTest(c *RequestContext) ResponseData {
+	var res ResponseData
+	res.MustWriteTemplate("style_test.html", nil, c.Perf)
+	return res
+}

src/website/projects.go

@@ -25,7 +25,6 @@ import (
 	"git.handmade.network/hmn/hmn/src/utils"
 	"github.com/google/uuid"
 	"github.com/jackc/pgx/v5"
-	"github.com/teacat/noire"
 )
 
 const maxPersonalProjects = 10
@@ -39,26 +38,12 @@ func ProjectCSS(c *RequestContext) ResponseData {
 
 	baseData := getBaseData(c, "", nil)
 
-	bgColor := noire.NewHex(color)
-	h, s, l := bgColor.HSL()
-	if baseData.Theme == "dark" {
-		l = 15
-	} else {
-		l = 95
-	}
-	if s > 20 {
-		s = 20
-	}
-	bgColor = noire.NewHSL(h, s, l)
-
 	templateData := struct {
 		templates.BaseData
 		Color string
-		PostBgColor string
 	}{
 		BaseData: baseData,
 		Color:    color,
-		PostBgColor: bgColor.HTML(),
 	}
 
 	var res ResponseData

src/website/roles.go

@@ -1,107 +0,0 @@
-package website
-
-import (
-	"net/http"
-
-	"git.handmade.network/hmn/hmn/src/hmnurl"
-	"git.handmade.network/hmn/hmn/src/templates"
-)
-
-type Role struct {
-	Slug        string
-	Name        string
-	Description string
-	Template    string
-	Url         string // weird and redundant
-
-	RedirectSlug string
-}
-
-var roles = []Role{
-	{
-		Slug:        "education",
-		Name:        "Education Lead",
-		Description: "Lead our flagship education initiative and make sure we're putting out a steady stream of content.",
-		Template:    "role_education.html",
-		Url:         hmnurl.BuildStaffRole("education"),
-	},
-	{
-		Slug:        "advocacy",
-		Name:        "Advocacy Lead",
-		Description: "Put the Handmade ethos into the world by advocating for better software and better programming practices.",
-		Template:    "role_advocacy.html",
-		Url:         hmnurl.BuildStaffRole("advocacy"),
-	},
-	{
-		Slug:        "design",
-		Name:        "Design Lead",
-		Description: "Set the visual direction for everything we do. Make key art, design website features, and more.",
-		Template:    "role_design.html",
-		Url:         hmnurl.BuildStaffRole("design"),
-	},
-}
-
-const StaffRolesIndexName = "Roles"
-
-func StaffRolesIndex(c *RequestContext) ResponseData {
-	type TemplateData struct {
-		templates.BaseData
-		Roles []Role
-	}
-
-	var res ResponseData
-	res.MustWriteTemplate("roles.html", TemplateData{
-		BaseData: getBaseDataAutocrumb(c, StaffRolesIndexName),
-		Roles:    roles,
-	}, c.Perf)
-	return res
-}
-
-func StaffRole(c *RequestContext) ResponseData {
-	type TemplateData struct {
-		templates.BaseData
-		Role       Role
-		OtherRoles []Role
-	}
-
-	slug := c.PathParams["slug"]
-	role, ok := getRole(slug)
-	if !ok {
-		return FourOhFour(c) // TODO: Volunteering-specific 404
-	}
-
-	if role.RedirectSlug != "" {
-		return c.Redirect(hmnurl.BuildStaffRole(role.RedirectSlug), http.StatusSeeOther)
-	}
-
-	var otherRoles []Role
-	for _, otherRole := range roles {
-		if otherRole.Slug == role.Slug {
-			continue
-		}
-		otherRoles = append(otherRoles, otherRole)
-		if len(otherRoles) >= 3 {
-			break
-		}
-	}
-
-	var res ResponseData
-	res.MustWriteTemplate(role.Template, TemplateData{
-		BaseData: getBaseData(c, role.Name, []templates.Breadcrumb{
-			{Name: StaffRolesIndexName, Url: hmnurl.BuildStaffRolesIndex()},
-			{Name: role.Name, Url: ""},
-		}),
-		Role:       role,
-		OtherRoles: otherRoles,
-	}, c.Perf)
-	return res
-}
-
-func getRole(slug string) (Role, bool) {
-	for _, role := range roles {
-		if role.Slug == slug {
-			return role, true
-		}
-	}
-	return Role{}, false
-}

src/website/routes.go

@@ -83,9 +83,6 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
 	hmnOnly.GET(hmnurl.RegexCalendarIndex, CalendarIndex)
 	hmnOnly.GET(hmnurl.RegexCalendarICal, CalendarICal)
 
-	hmnOnly.GET(hmnurl.RegexStaffRolesIndex, StaffRolesIndex)
-	hmnOnly.GET(hmnurl.RegexStaffRole, StaffRole)
-
 	hmnOnly.GET(hmnurl.RegexOldHome, Index)
 
 	hmnOnly.POST(hmnurl.RegexLoginAction, securityTimerMiddleware(time.Millisecond*100, Login))
@@ -157,6 +154,8 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
 	hmnOnly.GET(hmnurl.RegexEducationArticleDelete, educationAuthorsOnly(EducationArticleDelete))
 	hmnOnly.POST(hmnurl.RegexEducationArticleDelete, educationAuthorsOnly(csrfMiddleware(EducationArticleDeleteSubmit)))
 
+	hmnOnly.GET(hmnurl.RegexStyleTest, StyleTest)
+
 	hmnOnly.POST(hmnurl.RegexAPICheckUsername, csrfMiddleware(APICheckUsername))
 	hmnOnly.POST(hmnurl.RegexAPINewsletterSignup, APINewsletterSignup)
 

src/website/staticpages.go

@@ -28,20 +28,12 @@ func About(c *RequestContext) ResponseData {
 	type TemplateData struct {
 		templates.BaseData
 		FoundationUrl string
-		RolesUrl         string
-		EducationLeadUrl string
-		AdvocacyLeadUrl  string
-		DesignLeadUrl    string
 	}
 
 	var res ResponseData
 	res.MustWriteTemplate("about.html", TemplateData{
 		BaseData:      getBaseDataAutocrumb(c, "About"),
 		FoundationUrl: hmnurl.BuildFoundation(),
-		RolesUrl:         hmnurl.BuildStaffRolesIndex(),
-		EducationLeadUrl: hmnurl.BuildStaffRole("education"),
-		AdvocacyLeadUrl:  hmnurl.BuildStaffRole("advocacy"),
-		DesignLeadUrl:    hmnurl.BuildStaffRole("design"),
 	}, c.Perf)
 	return res
 }

todo-styles.md

@@ -0,0 +1,45 @@
+# Styling TODO
+
+## How to build
+
+```
+esbuild src\rawdata\scss\style.css --bundle --loader:.ttf=file --outdir=public --target=chrome109,firefox109,safari12
+
+nodemon --exec "esbuild src\rawdata\scss\style.css --bundle --loader:.ttf=file --outdir=public --target=chrome109,firefox109,safari12" src\rawdata\scss\style.css --ignore public
+```
+
+## TODO
+
+- [ ] Fix spacing of podcast episodes (used to use p-spaced)
+- [x] Audit uses of tables across the site to see where we might actually need to apply table-layout: fixed and border-collapse: collapse
+    - There are zero tables on the site except one used for Asaf's debugging.
+- [ ] Recover <hr> styles and use them only in post-content
+- [ ] Audit and fix all uses of:
+    - [ ] big
+    - [ ] title
+    - [x] clear
+    - [x] full
+    - [ ] hidden
+    - [x] empty (?!)
+    - [x] column
+    - [ ] content
+    - [ ] description
+- [ ] Re-evaluate form styles
+    - [ ] theme-color-light is used only for buttons
+- [x] center-layout vs. margin-center
+- [ ] Make sure old projects look ok (background images are gone)
+- [ ] Audit or delete whenisit
+- optionbar fixes
+    - [ ] Remove "external" styles (width, padding, etc.)
+    - [ ] Fix options (no more "buttons")
+    - [ ] Convert all buttons to links
+    - [ ] Generally audit visuals
+    - [ ] Find that thing and kill it?
+- [ ] Probably remove uses of .tab
+- [ ] everything in _content.scss, ugh
+- [ ] Reduce saturation of --background-even-background
+- [ ] Update blog styles to not use `post` and other garbage
+    - [ ] Remove from forum.css
+- [ ] Remove all uses of .content-block
+- [ ] Figure out what's up with the projects on the jam pages
+- [ ] Determine if we actually need .project-carousel, or if our general carousel styles (?) are sufficient