created site

assets/css/_colors.scss

@@ -0,0 +1,26 @@
+$base: #1e1e2e;
+$text: #cdd6f4;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;

assets/css/_fonts.scss

@@ -0,0 +1,41 @@
+@font-face {
+    font-family: 'Gauge';
+    src: url('/assets/fonts/gauge/Gauge-Regular.woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Gauge';
+    src: url('/assets/fonts/gauge/Gauge-Heavy.woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Gauge';
+    src: url('/assets/fonts/gauge/Gauge-Oblique.woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'HK Grotesk';
+    src: url('/assets/fonts/hkgrotesk/HKGrotesk-Regular.woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'HK Grotesk';
+    src: url('/assets/fonts/hkgrotesk/HKGrotesk-Bold.woff2');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'HK Grotesk';
+    src: url('/assets/fonts/hkgrotesk/HKGrotesk-Italic.woff2');
+    font-weight: normal;
+    font-style: italic;
+}

assets/css/base.scss

@@ -0,0 +1,107 @@
+@use './colors.scss' as *;
+@use './fonts.scss' as *;
+
+$page-width: 800px;
+$page-padding: 2rem;
+
+body {
+    background-color: $base;
+    color: $text;
+    font-family: 'HK Grotesk';
+
+    font-size: medium;
+
+    min-height: 100vh;
+    min-width: 100vw;
+    max-width: 100vw;
+    margin: 0rem;
+    padding: 0rem;
+    position: absolute;
+    top: 0rem;
+}
+
+h1, h2 {
+    font-family: 'Gauge';
+}
+
+a {
+    color: $blue;
+}
+
+a:visited {
+    color: $lavender
+}
+
+a:hover {
+    color: $sky
+}
+
+main {
+    max-width: $page-width;
+    margin: 0 auto;
+    padding-inline: 2rem;
+
+    margin-bottom: 7rem;
+}
+
+h1 {
+    margin-bottom: 1rem;
+    font-size: xx-large;
+
+    text-align: center;
+    min-width: 100%;
+}
+
+h2 {
+    margin-top: 2rem;
+    margin-left: 2rem;
+    margin-bottom: 1rem;
+    font-size: x-large;
+}
+
+hr {
+    max-width: $page-width;
+    color: $green;
+}
+
+.button-row {
+    width: 100%;
+    text-align: center;
+}
+
+.button-88x31 {
+    image-rendering: pixelated;
+}
+
+.footer-wrap {
+    position: absolute;
+    bottom: 0rem;
+    margin: 0 auto 2rem;
+
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.footer {
+    text-align: center;
+    max-width: $page-width;
+    width: 100%;
+    padding-inline: $page-padding;
+}
+
+.finish {
+    text-align: center;
+    min-width: 100%;
+}
+
+.last-modified {
+    color: $subtext0;
+    font-size: small;
+}
+
+.halfsharp {
+    color: $mauve;
+    width: 0.5rem;
+    height: auto;
+}