diff options
Diffstat (limited to '')
| -rw-r--r-- | assets/css/default.scss | 339 | ||||
| -rw-r--r-- | assets/css/fonts.scss | 0 |
2 files changed, 167 insertions, 172 deletions
diff --git a/assets/css/default.scss b/assets/css/default.scss index 8a80322..8789f11 100644 --- a/assets/css/default.scss +++ b/assets/css/default.scss @@ -1,118 +1,141 @@ -$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); +// VARIABLES AND IMPORTS +// --------------------------------------------------------------------------- -@mixin for-phone-only { - @media (max-width: 700px) { +$clr-bg: oklch(22.49% 0.008 297.21); +$clr-fg: oklch(98.51% 0 0); +$clr-primary: oklch(82.67% 0.096 307.5); +$clr-secondary: oklch(from $clr-primary l c 240); // hue-shifted copy + +$gap: 1rem; +$max-width: 50rem; +$mobile: 980px; + +@import "syntax"; + +// MIXINS +// --------------------------------------------------------------------------- + +@mixin phone-only { + @media (max-width: $mobile) { @content; } } -:root { - font-size: 16px; // acts as a sort of scale because everything uses rem. +@mixin std-block { + display: block; + margin: 0; } -* { +// GLOBAL RESET & TYPOGRAPHY +// --------------------------------------------------------------------------- + +*, +*::before, +*::after { box-sizing: border-box; - transition: 0.1s ease-in-out; - /* outline: 1px solid rgba(255, 1, 0, 0.2); */ +} + +* { padding: 0; margin: 0; + transition: .1s ease-in-out; + font-family: "Atkinson Hyperlegible Next", sans-serif; + font-optical-sizing: auto; + text-transform: lowercase; +} + +html { + font-size: 16px; } +// 1rem base + body { display: flex; flex-direction: column; align-items: center; - $opacity: 25%; + gap: $gap; + padding: 5rem $gap $gap; + overflow-x: hidden; + color: $clr-fg; 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), + background: url("/images/noise.png"), + radial-gradient(circle at center, $clr-bg, 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; +// LAYOUT WRAPPER +// --------------------------------------------------------------------------- - &>* { - 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; +body>* { + // every top-level section + display: flex; + flex-direction: column; + gap: $gap; + width: 100%; + max-width: $max-width; + padding: 1.5rem 2.5rem; + background: $clr-bg; + outline: .2rem solid $clr-bg; + outline-offset: .2rem; +} + +@include phone-only { + body { + padding: 0; + gap: .2rem; + } + + body>* { + outline: 0; } } -// --- NAVIGATION BAR --- +// NAVIGATION +// --------------------------------------------------------------------------- + nav { - display: flex; - width: unset; - padding: 1rem; position: fixed; + transform: translateX(28rem); + display: flex; flex-direction: column; align-items: center; - gap: 1rem; - height: fit-content; - transform: translateX(28rem); + gap: $gap; + padding: 1rem 2rem; + width: 0rem; svg { - fill: $foreground-color; - $size: 2rem; - width: $size; - height: $size; + width: 2rem; + height: 2rem; + fill: $clr-fg; } a { - display: flex; writing-mode: vertical-rl; text-orientation: sideways; text-decoration: none; - justify-content: center; - color: $foreground-color; + color: $clr-fg; } hr { width: 100%; } - } - -@include for-phone-only { - body { - padding: 0rem; - gap: 0.2rem; - - &>* { - outline: 0; - } - } - +@include phone-only { nav { - position: inherit; + position: static; + transform: none; flex-direction: row; - transform: translateX(0rem) !important; - width: 100%; justify-content: space-between; + width: 100%; a { - - writing-mode: inherit; + writing-mode: horizontal-tb; } hr { @@ -121,158 +144,130 @@ nav { } } -// --- STANDARD ELEMENTS --- -a { - color: mediumpurple; - color: $primary-color; +// TYPOGRAPHIC ELEMENTS +// --------------------------------------------------------------------------- - &:hover { - filter: brightness(0.75); - } +p, +ul, +span { + font-size: 1.25rem; + text-align: justify; } -@mixin std-style { - display: block; - margin: 0; +h1, +h2, +h3, +h4, +h5, +h6 { + @include std-block; + padding-top: .5rem; + font-size: 1.75rem; } -p { - @include std-style; -} +// auto-generate heading prefixes +@for $i from 1 through 6 { + h#{$i}::before { + $hashes: ""; -ul { - display: flex; - flex-direction: column; - gap: 0.5rem; - list-style-type: none; - margin: 0; - padding: 0; + @for $_ from 1 through $i { + $hashes: $hashes + "#" + } - &>li:before { - content: "~"; - color: oklch(82.67% 0.087 180); - padding-left: 0.5rem; - padding-right: 0.25rem; + content: "#{$hashes} "; + color: oklch(82.67% .087 #{280 + ($i - 1) * 40}); } } -@for $i from 1 through 6 { - h#{$i} { - @include std-style; - padding-top: 0.5rem; - - &:before { - $hashes: ""; +// LISTS +// --------------------------------------------------------------------------- - @for $_ from 1 through $i { - $hashes: $hashes + "#"; - } +ul { + display: flex; + flex-direction: column; + gap: .5rem; + list-style: none; - content: "#{$hashes} "; - color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40}); - } + li::before { + content: "~"; + padding: 0 .25rem 0 .5rem; + color: oklch(82.67% .087 180); } } +// rainbow list items @for $i from 1 through 15 { - ul>li:nth-child(n+#{$i}):before { - color: oklch(82.67% 0.087 #{100 + ($i - 1) * 80}); + ul li:nth-child(n+#{$i})::before { + color: oklch(82.67% .087 #{100 + ($i - 1) * 80}); } } -img { - user-select: none; -} +// LINKS & MISC +// --------------------------------------------------------------------------- -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") -} +a { + color: $clr-primary; -* { - font-family: "Atkinson Hyperlegible Next", sans-serif; - font-optical-sizing: auto; - text-transform: lowercase; + &:hover { + filter: brightness(.75); + } } - -p, -ul, -span { - text-align: justify; - font-size: 1.25rem; +hr { + $c: oklch(from $clr-fg .45 c h); + background: $c; + border-color: $c; } -code {} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: 1.75rem; +img { + user-select: none; } address { - opacity: 0.5; + opacity: .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 + margin-top: -2.1lh; + margin-bottom: .5rem; } footer { gap: 0; -} -footer>* { - text-align: center; - font-size: 1rem; - opacity: 0.5; + >* { + text-align: center; + font-size: 1rem; + opacity: .5; + } } -// SYNTAX!!!!!!! +// CODE BLOCKS +// --------------------------------------------------------------------------- + div.sourceCode { - // prettier-ignore - background-image: - url("/images/noise.png"), - radial-gradient(circle at center center, oklch(22.49% 0.008 297.21), transparent), + padding: .2rem; + overflow: hidden; + font-family: "Atkinson Hyperlegible Mono", monospace; + background-color: black; + background: url("/images/noise.png"), + radial-gradient(circle at center, $clr-bg, 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; + outline: 0.2rem solid $clr-bg; + outline-offset: 0.2rem; + + >* { + background: $clr-bg; background-attachment: fixed; padding: 1.2rem; - overflow: scroll; + overflow: auto; + } + + * { + font-family: "Atkinson Hyperlegible Mono", monospace; + text-transform: none; } }
\ No newline at end of file diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss deleted file mode 100644 index e69de29..0000000 --- a/assets/css/fonts.scss +++ /dev/null |