From 6d8a7df95f53ef33691f70759489bd7e961a9973 Mon Sep 17 00:00:00 2001 From: jamie Date: Wed, 15 Oct 2025 08:52:08 +0100 Subject: refactor: some "small" changes --- css/default.scss | 240 ------------------------------------------------------ css/fonts.scss | 0 css/syntax.scss | 243 ------------------------------------------------------- 3 files changed, 483 deletions(-) delete mode 100644 css/default.scss delete mode 100644 css/fonts.scss delete mode 100644 css/syntax.scss (limited to 'css') diff --git a/css/default.scss b/css/default.scss deleted file mode 100644 index 5fd653f..0000000 --- a/css/default.scss +++ /dev/null @@ -1,240 +0,0 @@ -$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; // 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 --- -// This whole navbar section needs refactoring, because I'm already confused by it -nav { - display: flex; - 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; - height: fit-content; - - 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%; - } -} - -// --- 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; - pointer-events: none; -} - -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 -@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 deleted file mode 100644 index e69de29..0000000 diff --git a/css/syntax.scss b/css/syntax.scss deleted file mode 100644 index 42be310..0000000 --- a/css/syntax.scss +++ /dev/null @@ -1,243 +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; -} -- cgit v1.3.1