refactor: neaten up source tree

9 files changed, 540 insertions, 0 deletions

diff --git a/src/assets/css/default.scss b/src/assets/css/default.scss
new file mode 100644
index 0000000..8509dfb
--- /dev/null
+++ b/src/assets/css/default.scss
@@ -0,0 +1,276 @@
+// VARIABLES AND IMPORTS
+// ---------------------------------------------------------------------------
+
+$clr-bg: oklch(22.49% 0.008 297.21);
+$clr-fg: oklch(98.51% 0 0);
+$clr-primary: oklch(82.67% 0.096 307.5);
+$clr-secondary: oklch(from $clr-primary l c 240); // hue-shifted copy
+
+$gap: 1rem;
+$max-width: 50rem;
+$mobile: 980px;
+
+@import "syntax";
+
+// MIXINS
+// ---------------------------------------------------------------------------
+
+@mixin phone-only {
+  @media (max-width: $mobile) {
+    @content;
+  }
+}
+
+@mixin std-block {
+  display: block;
+  margin: 0;
+}
+
+// GLOBAL RESET & TYPOGRAPHY
+// ---------------------------------------------------------------------------
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  transition: 0.1s ease-in-out;
+  font-family: "Atkinson Hyperlegible Next", sans-serif;
+  font-optical-sizing: auto;
+  text-transform: lowercase;
+}
+
+html {
+  font-size: 16px;
+}
+
+// 1rem base
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $gap;
+  padding: 5rem $gap $gap;
+  overflow-x: hidden;
+  color: $clr-fg;
+  background-color: black;
+  background:
+    url("/assets/images/noise.png"),
+    radial-gradient(circle at center, $clr-bg, transparent),
+    radial-gradient(circle at bottom left, #27577d, transparent),
+    radial-gradient(circle at top right, #952ea4 0%, transparent),
+    radial-gradient(circle at center right, #6949a5 0%, transparent),
+    radial-gradient(circle at top center, #336ba0 0%, transparent);
+  background-attachment: fixed;
+}
+
+// LAYOUT WRAPPER
+// ---------------------------------------------------------------------------
+
+body > * {
+  // every top-level section
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+  width: 100%;
+  max-width: $max-width;
+  padding: 1.5rem 2.5rem;
+  background: $clr-bg;
+  outline: 0.2rem solid $clr-bg;
+  outline-offset: 0.2rem;
+}
+
+@include phone-only {
+  body {
+    padding: 0;
+    gap: 0.2rem;
+  }
+
+  body > * {
+    outline: 0;
+  }
+}
+
+// NAVIGATION
+// ---------------------------------------------------------------------------
+
+nav {
+  position: fixed;
+  transform: translateX(28rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $gap;
+  padding: 1rem 2rem;
+  width: 0rem;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+    fill: $clr-fg;
+  }
+
+  a {
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+    text-decoration: none;
+    color: $clr-fg;
+  }
+
+  hr {
+    width: 100%;
+  }
+}
+
+@include phone-only {
+  nav {
+    position: static;
+    transform: none;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    a {
+      writing-mode: horizontal-tb;
+    }
+
+    hr {
+      display: none;
+    }
+  }
+}
+
+// TYPOGRAPHIC ELEMENTS
+// ---------------------------------------------------------------------------
+
+p,
+ul,
+span {
+  font-size: 1.2rem;
+  text-align: justify;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include std-block;
+  padding-top: 0.5rem;
+  font-size: 1.75rem;
+}
+
+// auto-generate heading prefixes
+@for $i from 1 through 6 {
+  h#{$i}::before {
+    $hashes: "";
+
+    @for $_ from 1 through $i {
+      $hashes: $hashes + "#";
+    }
+
+    content: "#{$hashes} ";
+    color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40});
+  }
+}
+
+// LISTS
+// ---------------------------------------------------------------------------
+
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+
+  li::before {
+    content: "~";
+    padding: 0 0.25rem 0 0.5rem;
+    color: oklch(82.67% 0.087 180);
+  }
+}
+
+// rainbow list items
+@for $i from 1 through 15 {
+  ul li:nth-child(n + #{$i})::before {
+    color: oklch(82.67% 0.087 #{100 + ($i - 1) * 80});
+  }
+}
+
+// LINKS & MISC
+// ---------------------------------------------------------------------------
+
+a {
+  color: $clr-primary;
+
+  &:hover {
+    filter: brightness(0.75);
+  }
+}
+
+hr {
+  $c: oklch(from $clr-fg 0.45 c h);
+  background: $c;
+  border-color: $c;
+}
+
+img {
+  user-select: none;
+}
+
+address {
+  opacity: 0.5;
+  text-align: right;
+  margin-top: -2.1lh;
+  margin-bottom: 0.5rem;
+}
+
+footer {
+  gap: 0;
+
+  > * {
+    text-align: center;
+    font-size: 1rem;
+    opacity: 0.5;
+  }
+}
+
+// CODE BLOCKS
+// ---------------------------------------------------------------------------
+
+div.sourceCode {
+  padding: 0.2rem;
+  overflow: hidden;
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+  background-color: black;
+  background:
+    url("/images/noise.png"),
+    radial-gradient(circle at center, $clr-bg, transparent),
+    radial-gradient(circle at bottom left, #27577d, transparent),
+    radial-gradient(circle at top right, #952ea4 0%, transparent),
+    radial-gradient(circle at center right, #6949a5 0%, transparent),
+    radial-gradient(circle at top center, #336ba0 0%, transparent);
+  background-attachment: scroll;
+
+  outline: 0.2rem solid $clr-bg;
+  outline-offset: 0.2rem;
+
+  > * {
+    background: $clr-bg;
+    background-attachment: fixed;
+    padding: 1.2rem;
+    overflow: auto;
+  }
+
+  * {
+    font-family: "Atkinson Hyperlegible Mono", monospace;
+    text-transform: none;
+    font-size: 1.05rem;
+  }
+}
diff --git a/src/assets/css/syntax.scss b/src/assets/css/syntax.scss
new file mode 100644
index 0000000..42be310
--- /dev/null
+++ b/src/assets/css/syntax.scss
@@ -0,0 +1,243 @@
+a.sourceLine {
+  display: inline-block;
+  line-height: 1.25;
+}
+
+a.sourceLine {
+  pointer-events: none;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+a.sourceLine:empty {
+  height: 1.2em;
+}
+
+.sourceCode {
+  overflow: visible;
+}
+
+code.sourceCode {
+  white-space: pre;
+  position: relative;
+}
+
+div.sourceCode {
+  margin: 1em 0;
+}
+
+pre.sourceCode {
+  margin: 0;
+}
+
+@media screen {
+  div.sourceCode {
+    overflow: auto;
+  }
+}
+
+@media print {
+  code.sourceCode {
+    white-space: pre-wrap;
+  }
+
+  a.sourceLine {
+    text-indent: -1em;
+    padding-left: 1em;
+  }
+}
+
+pre.numberSource a.sourceLine {
+  position: relative;
+  left: -4em;
+}
+
+pre.numberSource a.sourceLine::before {
+  content: attr(title);
+  position: relative;
+  left: -1em;
+  text-align: right;
+  vertical-align: baseline;
+  border: none;
+  pointer-events: all;
+  display: inline-block;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding: 0 4px;
+  width: 4em;
+  color: #aaaaaa;
+}
+
+pre.numberSource {
+  margin-left: 3em;
+  border-left: 1px solid #aaaaaa;
+  padding-left: 4px;
+}
+
+div.sourceCode {
+}
+
+@media screen {
+  a.sourceLine::before {
+    text-decoration: underline;
+  }
+}
+
+code span.al {
+  color: #f85858;
+  font-weight: bold;
+}
+
+/* Alert */
+code span.an {
+  color: #3dddd8;
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* Annotation */
+code span.at {
+  color: #2ac68e;
+}
+
+/* Attribute */
+code span.bn {
+  color: #2ac68e;
+}
+
+/* BaseN */
+code span.bu {
+}
+
+/* BuiltIn */
+code span.cf {
+  color: #2ac68e;
+  font-weight: bold;
+}
+
+/* ControlFlow */
+code span.ch {
+  color: #008ce3;
+}
+
+/* Char */
+code span.cn {
+  color: #f85858;
+}
+
+/* Constant */
+code span.co {
+  color: #3dddd8;
+  font-style: italic;
+}
+
+/* Comment */
+code span.cv {
+  color: #3dddd8;
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* CommentVar */
+code span.do {
+  color: #f85858;
+  font-style: italic;
+}
+
+/* Documentation */
+code span.dt {
+  color: #f85858;
+}
+
+/* DataType */
+code span.dv {
+  color: #2ac68e;
+}
+
+/* DecVal */
+code span.er {
+  color: #f85858;
+  font-weight: bold;
+}
+
+/* Error */
+code span.ex {
+}
+
+/* Extension */
+code span.fl {
+  color: #40a070;
+}
+
+/* Float */
+code span.fu {
+  color: #008ce3;
+}
+
+/* Function */
+code span.im {
+}
+
+/* Import */
+code span.in {
+  color: #3dddd8;
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* Information */
+code span.kw {
+  color: #2ac68e;
+  font-weight: bold;
+}
+
+/* Keyword */
+code span.op {
+  color: #aaaaaa;
+}
+
+/* Operator */
+code span.ot {
+  color: #2ac68e;
+}
+
+/* Other */
+code span.pp {
+  color: #ff8a00;
+}
+
+/* Preprocessor */
+code span.sc {
+  color: #4070a0;
+}
+
+/* SpecialChar */
+code span.ss {
+  color: #008ce3;
+}
+
+/* SpecialString */
+code span.st {
+  color: #008ce3;
+}
+
+/* String */
+code span.va {
+  color: #008ce3;
+}
+
+/* Variable */
+code span.vs {
+  color: #008ce3;
+}
+
+/* VerbatimString */
+code span.wa {
+  color: #3dddd8;
+  font-weight: bold;
+  font-style: italic;
+}
diff --git a/src/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf b/src/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf
new file mode 100644
index 0000000..157d62e
--- /dev/null
+++ b/src/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf
diff --git a/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf b/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf
new file mode 100644
index 0000000..3fa771f
--- /dev/null
+++ b/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf
diff --git a/src/assets/images/converter.webp b/src/assets/images/converter.webp
new file mode 100644
index 0000000..36764fa
--- /dev/null
+++ b/src/assets/images/converter.webp
diff --git a/src/assets/images/erebus.webp b/src/assets/images/erebus.webp
new file mode 100644
index 0000000..510545e
--- /dev/null
+++ b/src/assets/images/erebus.webp
diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico
new file mode 100644
index 0000000..5000bb7
--- /dev/null
+++ b/src/assets/images/favicon.ico
diff --git a/src/assets/images/noise.png b/src/assets/images/noise.png
new file mode 100644
index 0000000..93c1ad7
--- /dev/null
+++ b/src/assets/images/noise.png
diff --git a/src/assets/images/nonbinary-flag.svg b/src/assets/images/nonbinary-flag.svg
new file mode 100644
index 0000000..5252870
--- /dev/null
+++ b/src/assets/images/nonbinary-flag.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="64px" height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">

+<style type="text/css">

+	.st0{fill:#FFF430;}

+	.st1{fill:#FFFFFF;}

+	.st2{fill:#9C59D1;}

+	.st3{fill:#99A8AE;}

+	.st4{fill:#6E8189;}

+</style>

+<path class="st0" d="M4,4.25c0,4.13,0,6.96,0,11.09c19.33,7.81,38.67-7.81,58,0c0-6.8,0-4.28,0-11.09C42.67-3.55,23.33,12.06,4,4.25

+	z"/>

+<path class="st1" d="M4,13.13c0,4.13,0,6.96,0,11.09c19.33,7.81,38.67-7.81,58,0c0-4.13,0-6.96,0-11.09

+	C42.67,5.32,23.33,20.94,4,13.13z"/>

+<path class="st2" d="M4,22c0,4.13,0,6.96,0,11.09c19.33,7.81,38.67-7.81,58,0c0-6.8,0-4.28,0-11.09C42.67,14.19,23.33,29.81,4,22z"

+	/>

+<path d="M4,30.87c0,3.17,0,5.8,0,8.87c19.33,7.81,38.67-7.81,58,0c0-8.6,0-0.66,0-8.87C42.67,23.06,23.33,38.68,4,30.87z"/>

+<path class="st3" d="M2,4.12V62l4,0V4.12C6,1.29,2,1.29,2,4.12z"/>

+<path class="st4" d="M2.99,2.27c0.57,0.32,1,0.91,1,1.82L4,61.97l2,0V4.09C6,2.18,4.18,1.6,2.99,2.27z"/>

+</svg>