refactor: some "small" changes

1 files changed, 273 insertions, 0 deletions

diff --git a/assets/css/default.scss b/assets/css/default.scss
new file mode 100644
index 0000000..c3d6044
--- /dev/null
+++ b/assets/css/default.scss
@@ -0,0 +1,273 @@
+$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";
+
+@mixin for-phone-only {
+  @media (max-width: 499px) {
+    @content;
+  }
+}
+
+:root {
+  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, 1, 0, 0.2); */
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  $opacity: 25%;
+  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),
+    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;
+
+  &>* {
+    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;
+  }
+}
+
+// --- NAVIGATION BAR ---
+nav {
+  display: flex;
+  width: unset;
+  padding: 1rem;
+  position: fixed;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  height: fit-content;
+  transform: translateX(28rem);
+
+  svg {
+    fill: $foreground-color;
+    $size: 2rem;
+    width: $size;
+    height: $size;
+  }
+
+  a {
+    display: flex;
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+    text-decoration: none;
+    justify-content: center;
+    color: $foreground-color;
+  }
+
+  hr {
+    width: 100%;
+  }
+}
+
+@include for-phone-only {
+  position: inherit;
+  flex-direction: row;
+
+  hr {
+    display: none;
+  }
+}
+
+// --- STANDARD ELEMENTS ---
+a {
+  color: mediumpurple;
+  color: $primary-color;
+
+  &:hover {
+    filter: brightness(0.75);
+  }
+}
+
+@mixin std-style {
+  display: block;
+  margin: 0;
+}
+
+p {
+  @include std-style;
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &>li:before {
+    content: "~";
+    color: oklch(82.67% 0.087 180);
+    padding-left: 0.5rem;
+    padding-right: 0.25rem;
+  }
+}
+
+@for $i from 1 through 6 {
+  h#{$i} {
+    @include std-style;
+    padding-top: 0.5rem;
+
+    &:before {
+      $hashes: "";
+
+      @for $_ from 1 through $i {
+        $hashes: $hashes + "#";
+      }
+
+      content: "#{$hashes} ";
+      color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40});
+    }
+  }
+}
+
+@for $i from 1 through 15 {
+  ul>li:nth-child(n+#{$i}):before {
+    color: oklch(82.67% 0.087 #{100 + ($i - 1) * 80});
+  }
+}
+
+img {
+  user-select: none;
+
+  &:hover {
+    animation: spin 0.5s ease-in-out;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+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")
+}
+
+* {
+  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 {}
+
+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: scroll;
+  padding: 0.2rem;
+  overflow: hidden;
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+
+  &>* {
+    background-color: $background-color;
+    background-attachment: fixed;
+    padding: 1.2rem;
+    overflow: scroll;
+  }
+}
\ No newline at end of file