diff options
Diffstat (limited to 'css/default.scss')
| -rw-r--r-- | css/default.scss | 240 |
1 files changed, 0 insertions, 240 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 |