diff options
Diffstat (limited to 'assets/css/default.scss')
| -rw-r--r-- | assets/css/default.scss | 273 |
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 |