summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
authorjamie <git@skilet.ro>2025-10-15 08:52:08 +0100
committerjamie <git@skilet.ro>2025-10-15 08:52:08 +0100
commit6d8a7df95f53ef33691f70759489bd7e961a9973 (patch)
tree89f94f7f6b4b625e5a87244f6e68314bbc0c9be7 /css
parent49b15415e3d48d6e80a21d644fc3762fecfba0f5 (diff)
refactor: some "small" changes
Diffstat (limited to 'css')
-rw-r--r--css/default.scss240
-rw-r--r--css/fonts.scss0
-rw-r--r--css/syntax.scss243
3 files changed, 0 insertions, 483 deletions
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
--- a/css/fonts.scss
+++ /dev/null
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;
-}