From 49b15415e3d48d6e80a21d644fc3762fecfba0f5 Mon Sep 17 00:00:00 2001
From: jamie <git@skilet.ro>
Date: Tue, 14 Oct 2025 14:57:18 +0100
Subject: refactor: massive template rewrite

code is still a mess, but it looks a tad nicer now. still a LOT to do
---
 css/default.scss | 253 ++++++++++++++++++++++++-------------------------------
 css/fonts.scss   |   0
 css/syntax.css   | 245 -----------------------------------------------------
 css/syntax.scss  | 243 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 353 insertions(+), 388 deletions(-)
 create mode 100644 css/fonts.scss
 delete mode 100644 css/syntax.css
 create mode 100644 css/syntax.scss

(limited to 'css')

diff --git a/css/default.scss b/css/default.scss
index 642ca65..5fd653f 100644
--- a/css/default.scss
+++ b/css/default.scss
@@ -1,36 +1,25 @@
-@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
-
-@mixin for-phone-only {
-  @media (max-width: 499px) {
-    @content;
-  }
-}
-
-@mixin for-desktop-up {
-  @media (min-width: 1200px) {
-    @content;
-  }
-}
-
 $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);
 
+@import "syntax";
+
 :root {
-  font-size: 16px;
+  font-size: 16px; // acts as a sort of scale because everything uses rem.
 }
 
 * {
   box-sizing: border-box;
   transition: 0.1s ease-in-out;
-  // outline: 1px solid rgba(255, 0, 0, 0.2);
+  /* outline: 1px solid rgba(255, 1, 0, 0.2); */
+  padding: 0;
+  margin: 0;
 }
 
 body {
   display: flex;
   flex-direction: column;
-  font-family: "Space Grotesk", sans-serif;
   align-items: center;
   $opacity: 25%;
   background-color: black;
@@ -45,74 +34,23 @@ body {
   background-attachment: fixed;
   color: white;
   color: $foreground-color;
-  padding: 4rem 1rem 1rem 1rem;
-  margin: 0;
+  $gaps: 1rem;
+  padding: $gaps;
+  padding-top: 5rem;
+  gap: $gaps;
 
-  // Stops central content from shifting around when&if a scrollbar appears
-  width: 100vw;
   overflow-x: hidden;
 
-  @include for-phone-only {
-    padding: 0.25rem;
-    flex-direction: row;
-  }
-}
-
-content {
-  display: flex;
-  width: 100%;
-  max-width: 60rem;
-  flex-direction: row-reverse;
-
-  & > * {
-    background-color: $background-color;
-    outline: 2px solid $background-color;
-    outline-offset: 2px;
-
-    @include for-phone-only {
-      outline: 0px;
-    }
-  }
-
-  & > nav {
-    padding: 1.25rem 0.75rem;
-  }
-
-  & > article {
-    flex: auto;
-    padding: 1.25rem;
-    height: fit-content;
-  }
-
-  @include for-phone-only {
+  &>* {
+    display: flex;
     flex-direction: column;
-  }
-}
-
-footer {
-  position: fixed;
-  bottom: 0px;
-  opacity: 0.7;
-  font-size: 0.9rem;
-  padding: 0.5rem;
-  width: 100%;
-  text-align: right;
-  color: white;
-  mix-blend-mode: overlay;
-  pointer-events: none;
-
-  p {
-    padding: 0;
-    margin: 0;
-  }
-
-  a {
-    color: inherit;
-    pointer-events: all;
-  }
-
-  @include for-phone-only {
-    display: none;
+    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;
   }
 }
 
@@ -120,12 +58,14 @@ footer {
 // This whole navbar section needs refactoring, because I'm already confused by it
 nav {
   display: flex;
-  position: sticky;
-  top: 4rem;
+  width: unset;
+  padding: 1rem;
+  position: fixed;
+  top: 1rem; // TODO: actually have this floating next to the side like the old site
+  right: 1rem;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
-  margin-left: 1rem;
   height: fit-content;
 
   svg {
@@ -147,36 +87,6 @@ nav {
   hr {
     width: 100%;
   }
-
-  @include for-phone-only {
-    // TODO: i absolutely hate this: it feels extremely hacky.
-    top: 0.25rem;
-    margin-bottom: 0.4rem !important;
-    // end
-    z-index: 1;
-    margin: 0;
-    flex-direction: row;
-
-    a {
-      writing-mode: horizontal-tb;
-
-      &:first-child {
-        margin-right: auto;
-      }
-    }
-
-    span {
-      display: none;
-    }
-
-    hr {
-      display: none;
-    }
-
-    img {
-      display: none;
-    }
-  }
 }
 
 // --- STANDARD ELEMENTS ---
@@ -199,62 +109,48 @@ p {
 }
 
 ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   list-style-type: none;
   margin: 0;
   padding: 0;
 
-  & > li:before {
-    content: "-";
+  &>li:before {
+    content: "~";
     color: oklch(82.67% 0.087 180);
     padding-left: 0.5rem;
     padding-right: 0.25rem;
   }
 }
 
-h1 {
-  font-size: 1.25rem;
-}
-
 @for $i from 1 through 6 {
   h#{$i} {
     @include std-style;
     padding-top: 0.5rem;
-    font-size: 1rem;
 
     &:before {
-      $stars: "";
+      $hashes: "";
 
       @for $_ from 1 through $i {
-        $stars: $stars + "*";
+        $hashes: $hashes + "#";
       }
 
-      content: "#{$stars} ";
-      color: oklch(82.67% 0.087 #{280 + ($i - 1) * 20});
-      opacity: 0.75;
+      content: "#{$hashes} ";
+      color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40});
     }
   }
 }
 
-img {
-  user-select: none;
-  pointer-events: none;
-}
-
-code {
-  font-family: "Space Mono", monospace;
-
-  @include for-phone-only {
-    word-break: break-all;
+@for $i from 1 through 15 {
+  ul>li:nth-child(n+#{$i}):before {
+    color: oklch(82.67% 0.087 #{100 + ($i - 1) * 80});
   }
 }
 
-div.sourceCode {
-  padding: 1rem;
-}
-
-div.sourceCode,
-code {
-  background-color: oklch(from $background-color calc(l - 0.05) c h);
+img {
+  user-select: none;
+  pointer-events: none;
 }
 
 hr {
@@ -271,3 +167,74 @@ hr {
   align-items: center;
   gap: 15px;
 }
+
+// FONTS!!!!!!!!!!!!!!!!! TODO: split up
+@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap");
+
+* {
+  font-family: "Atkinson Hyperlegible Next", sans-serif;
+  font-optical-sizing: auto;
+  text-transform: lowercase;
+}
+
+
+p,
+ul,
+span {
+  text-align: justify;
+  font-size: 1.25rem;
+}
+
+code {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1.75rem;
+}
+
+address {
+  opacity: 0.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
+}
+
+footer {
+  gap: 0;
+}
+
+footer>* {
+  text-align: center;
+  font-size: 1rem;
+  opacity: 0.5;
+}
+
+// SYNTAX!!!!!!!
+div.sourceCode {
+  // prettier-ignore
+  background-image:
+    url("/images/noise.png"),
+    radial-gradient(circle at center center, oklch(22.49% 0.008 297.21), 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;
+  padding: 0.2rem;
+  overflow: hidden;
+
+  &>* {
+    background-color: $background-color;
+    background-attachment: fixed;
+    padding: 1.2rem;
+    overflow: scroll;
+  }
+}
\ No newline at end of file
diff --git a/css/fonts.scss b/css/fonts.scss
new file mode 100644
index 0000000..e69de29
diff --git a/css/syntax.css b/css/syntax.css
deleted file mode 100644
index 48e8146..0000000
--- a/css/syntax.css
+++ /dev/null
@@ -1,245 +0,0 @@
-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;
-}
-
-/* Warning */
diff --git a/css/syntax.scss b/css/syntax.scss
new file mode 100644
index 0000000..42be310
--- /dev/null
+++ b/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;
+}
-- 
cgit v1.3.1