style: neaten up css

2 files changed, 167 insertions, 172 deletions

diff --git a/assets/css/default.scss b/assets/css/default.scss
index 8a80322..8789f11 100644
--- a/assets/css/default.scss
+++ b/assets/css/default.scss
@@ -1,118 +1,141 @@
-$background-color: oklch(22.49% 0.008 297.21);
-$foreground-color: oklch(98.51% 0 0);
-$primary-color: oklch(82.67% 0.096 307.5);
-$secondary-color: oklch(from $primary-color l c 240);
+// VARIABLES AND IMPORTS
+// ---------------------------------------------------------------------------
 
-@mixin for-phone-only {
-  @media (max-width: 700px) {
+$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;
   }
 }
 
-:root {
-  font-size: 16px; // acts as a sort of scale because everything uses rem.
+@mixin std-block {
+  display: block;
+  margin: 0;
 }
 
-* {
+// GLOBAL RESET & TYPOGRAPHY
+// ---------------------------------------------------------------------------
+
+*,
+*::before,
+*::after {
   box-sizing: border-box;
-  transition: 0.1s ease-in-out;
-  /* outline: 1px solid rgba(255, 1, 0, 0.2); */
+}
+
+* {
   padding: 0;
   margin: 0;
+  transition: .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;
-  $opacity: 25%;
+  gap: $gap;
+  padding: 5rem $gap $gap;
+  overflow-x: hidden;
+  color: $clr-fg;
   background-color: black;
-  // prettier-ignore
-  background-image:
-    url("/images/noise.png"),
-    radial-gradient(circle at center center, oklch(22.49% 0.008 297.21), transparent),
+  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: fixed;
-  color: white;
-  color: $foreground-color;
-  $gaps: 1rem;
-  padding: $gaps;
-  padding-top: 5rem;
-  gap: $gaps;
+}
 
-  overflow-x: hidden;
+// LAYOUT WRAPPER
+// ---------------------------------------------------------------------------
 
-  &>* {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    background-color: $background-color;
-    width: 100%;
-    max-width: 50rem;
-    padding: 1.5rem 2.5rem;
-    outline: 0.2rem solid $background-color;
-    outline-offset: 0.2rem;
+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: .2rem solid $clr-bg;
+  outline-offset: .2rem;
+}
+
+@include phone-only {
+  body {
+    padding: 0;
+    gap: .2rem;
+  }
+
+  body>* {
+    outline: 0;
   }
 }
 
-// --- NAVIGATION BAR ---
+// NAVIGATION
+// ---------------------------------------------------------------------------
+
 nav {
-  display: flex;
-  width: unset;
-  padding: 1rem;
   position: fixed;
+  transform: translateX(28rem);
+  display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
-  height: fit-content;
-  transform: translateX(28rem);
+  gap: $gap;
+  padding: 1rem 2rem;
+  width: 0rem;
 
   svg {
-    fill: $foreground-color;
-    $size: 2rem;
-    width: $size;
-    height: $size;
+    width: 2rem;
+    height: 2rem;
+    fill: $clr-fg;
   }
 
   a {
-    display: flex;
     writing-mode: vertical-rl;
     text-orientation: sideways;
     text-decoration: none;
-    justify-content: center;
-    color: $foreground-color;
+    color: $clr-fg;
   }
 
   hr {
     width: 100%;
   }
-
 }
 
-
-@include for-phone-only {
-  body {
-    padding: 0rem;
-    gap: 0.2rem;
-
-    &>* {
-      outline: 0;
-    }
-  }
-
+@include phone-only {
   nav {
-    position: inherit;
+    position: static;
+    transform: none;
     flex-direction: row;
-    transform: translateX(0rem) !important;
-    width: 100%;
     justify-content: space-between;
+    width: 100%;
 
     a {
-
-      writing-mode: inherit;
+      writing-mode: horizontal-tb;
     }
 
     hr {
@@ -121,158 +144,130 @@ nav {
   }
 }
 
-// --- STANDARD ELEMENTS ---
-a {
-  color: mediumpurple;
-  color: $primary-color;
+// TYPOGRAPHIC ELEMENTS
+// ---------------------------------------------------------------------------
 
-  &:hover {
-    filter: brightness(0.75);
-  }
+p,
+ul,
+span {
+  font-size: 1.25rem;
+  text-align: justify;
 }
 
-@mixin std-style {
-  display: block;
-  margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include std-block;
+  padding-top: .5rem;
+  font-size: 1.75rem;
 }
 
-p {
-  @include std-style;
-}
+// auto-generate heading prefixes
+@for $i from 1 through 6 {
+  h#{$i}::before {
+    $hashes: "";
 
-ul {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+    @for $_ from 1 through $i {
+      $hashes: $hashes + "#"
+    }
 
-  &>li:before {
-    content: "~";
-    color: oklch(82.67% 0.087 180);
-    padding-left: 0.5rem;
-    padding-right: 0.25rem;
+    content: "#{$hashes} ";
+    color: oklch(82.67% .087 #{280 + ($i - 1) * 40});
   }
 }
 
-@for $i from 1 through 6 {
-  h#{$i} {
-    @include std-style;
-    padding-top: 0.5rem;
-
-    &:before {
-      $hashes: "";
+// LISTS
+// ---------------------------------------------------------------------------
 
-      @for $_ from 1 through $i {
-        $hashes: $hashes + "#";
-      }
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  list-style: none;
 
-      content: "#{$hashes} ";
-      color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40});
-    }
+  li::before {
+    content: "~";
+    padding: 0 .25rem 0 .5rem;
+    color: oklch(82.67% .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});
+  ul li:nth-child(n+#{$i})::before {
+    color: oklch(82.67% .087 #{100 + ($i - 1) * 80});
   }
 }
 
-img {
-  user-select: none;
-}
+// LINKS & MISC
+// ---------------------------------------------------------------------------
 
-hr {
-  $color: oklch(from $foreground-color 0.45 c h);
-  // Not a single platform can decide which way to set the color of a `hr`.
-  background-color: $color;
-  color: $color;
-  border-color: $color;
-}
-
-.playlist {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 15px;
-}
-
-// FONTS!!!!!!!!!!!!!!!!! TODO: split up
-@font-face {
-  font-family: "Atkinson Hyperlegible Next";
-  src: url("/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf")
-}
-
-
-@font-face {
-  font-family: "Atkinson Hyperlegible Mono";
-  src: url("/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf")
-}
+a {
+  color: $clr-primary;
 
-* {
-  font-family: "Atkinson Hyperlegible Next", sans-serif;
-  font-optical-sizing: auto;
-  text-transform: lowercase;
+  &:hover {
+    filter: brightness(.75);
+  }
 }
 
-
-p,
-ul,
-span {
-  text-align: justify;
-  font-size: 1.25rem;
+hr {
+  $c: oklch(from $clr-fg .45 c h);
+  background: $c;
+  border-color: $c;
 }
 
-code {}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 1.75rem;
+img {
+  user-select: none;
 }
 
 address {
-  opacity: 0.5;
+  opacity: .5;
   text-align: right;
-  width: auto;
-  margin-top: -2.1lh; // TODO: i can fix this when it becomes a problem :)
-  margin-bottom: 0.5rem; // SO HACKY
+  margin-top: -2.1lh;
+  margin-bottom: .5rem;
 }
 
 footer {
   gap: 0;
-}
 
-footer>* {
-  text-align: center;
-  font-size: 1rem;
-  opacity: 0.5;
+  >* {
+    text-align: center;
+    font-size: 1rem;
+    opacity: .5;
+  }
 }
 
-// SYNTAX!!!!!!!
+// CODE BLOCKS
+// ---------------------------------------------------------------------------
+
 div.sourceCode {
-  // prettier-ignore
-  background-image:
-    url("/images/noise.png"),
-    radial-gradient(circle at center center, oklch(22.49% 0.008 297.21), transparent),
+  padding: .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;
-  padding: 0.2rem;
-  overflow: hidden;
-  font-family: "Atkinson Hyperlegible Mono", monospace;
 
-  &>* {
-    background-color: $background-color;
+  outline: 0.2rem solid $clr-bg;
+  outline-offset: 0.2rem;
+
+  >* {
+    background: $clr-bg;
     background-attachment: fixed;
     padding: 1.2rem;
-    overflow: scroll;
+    overflow: auto;
+  }
+
+  * {
+    font-family: "Atkinson Hyperlegible Mono", monospace;
+    text-transform: none;
   }
 }
\ No newline at end of file
diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss
deleted file mode 100644
index e69de29..0000000
--- a/assets/css/fonts.scss
+++ /dev/null