From 3b76863b673e14bbb20d2fb81de727c72259b25e Mon Sep 17 00:00:00 2001 From: jamie Date: Thu, 23 Oct 2025 11:43:03 +0100 Subject: refactor: neaten up source tree --- src/assets/css/default.scss | 276 +++++++++++++++++++++ src/assets/css/syntax.scss | 243 ++++++++++++++++++ .../fonts/AtkinsonHyperlegibleMono-Regular.ttf | Bin 0 -> 34320 bytes .../fonts/AtkinsonHyperlegibleNext-Regular.ttf | Bin 0 -> 48064 bytes src/assets/images/converter.webp | Bin 0 -> 18080 bytes src/assets/images/erebus.webp | Bin 0 -> 17652 bytes src/assets/images/favicon.ico | Bin 0 -> 14098 bytes src/assets/images/noise.png | Bin 0 -> 26039 bytes src/assets/images/nonbinary-flag.svg | 21 ++ 9 files changed, 540 insertions(+) create mode 100644 src/assets/css/default.scss create mode 100644 src/assets/css/syntax.scss create mode 100644 src/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf create mode 100644 src/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf create mode 100644 src/assets/images/converter.webp create mode 100644 src/assets/images/erebus.webp create mode 100644 src/assets/images/favicon.ico create mode 100644 src/assets/images/noise.png create mode 100644 src/assets/images/nonbinary-flag.svg (limited to 'src/assets') diff --git a/src/assets/css/default.scss b/src/assets/css/default.scss new file mode 100644 index 0000000..8509dfb --- /dev/null +++ b/src/assets/css/default.scss @@ -0,0 +1,276 @@ +// VARIABLES AND IMPORTS +// --------------------------------------------------------------------------- + +$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; + } +} + +@mixin std-block { + display: block; + margin: 0; +} + +// GLOBAL RESET & TYPOGRAPHY +// --------------------------------------------------------------------------- + +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; + transition: 0.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; + gap: $gap; + padding: 5rem $gap $gap; + overflow-x: hidden; + color: $clr-fg; + background-color: black; + background: + url("/assets/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; +} + +// LAYOUT WRAPPER +// --------------------------------------------------------------------------- + +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: 0.2rem solid $clr-bg; + outline-offset: 0.2rem; +} + +@include phone-only { + body { + padding: 0; + gap: 0.2rem; + } + + body > * { + outline: 0; + } +} + +// NAVIGATION +// --------------------------------------------------------------------------- + +nav { + position: fixed; + transform: translateX(28rem); + display: flex; + flex-direction: column; + align-items: center; + gap: $gap; + padding: 1rem 2rem; + width: 0rem; + + svg { + width: 2rem; + height: 2rem; + fill: $clr-fg; + } + + a { + writing-mode: vertical-rl; + text-orientation: sideways; + text-decoration: none; + color: $clr-fg; + } + + hr { + width: 100%; + } +} + +@include phone-only { + nav { + position: static; + transform: none; + flex-direction: row; + justify-content: space-between; + width: 100%; + + a { + writing-mode: horizontal-tb; + } + + hr { + display: none; + } + } +} + +// TYPOGRAPHIC ELEMENTS +// --------------------------------------------------------------------------- + +p, +ul, +span { + font-size: 1.2rem; + text-align: justify; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + @include std-block; + padding-top: 0.5rem; + font-size: 1.75rem; +} + +// auto-generate heading prefixes +@for $i from 1 through 6 { + h#{$i}::before { + $hashes: ""; + + @for $_ from 1 through $i { + $hashes: $hashes + "#"; + } + + content: "#{$hashes} "; + color: oklch(82.67% 0.087 #{280 + ($i - 1) * 40}); + } +} + +// LISTS +// --------------------------------------------------------------------------- + +ul { + display: flex; + flex-direction: column; + gap: 0.5rem; + list-style: none; + + li::before { + content: "~"; + padding: 0 0.25rem 0 0.5rem; + color: oklch(82.67% 0.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}); + } +} + +// LINKS & MISC +// --------------------------------------------------------------------------- + +a { + color: $clr-primary; + + &:hover { + filter: brightness(0.75); + } +} + +hr { + $c: oklch(from $clr-fg 0.45 c h); + background: $c; + border-color: $c; +} + +img { + user-select: none; +} + +address { + opacity: 0.5; + text-align: right; + margin-top: -2.1lh; + margin-bottom: 0.5rem; +} + +footer { + gap: 0; + + > * { + text-align: center; + font-size: 1rem; + opacity: 0.5; + } +} + +// CODE BLOCKS +// --------------------------------------------------------------------------- + +div.sourceCode { + padding: 0.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; + + outline: 0.2rem solid $clr-bg; + outline-offset: 0.2rem; + + > * { + background: $clr-bg; + background-attachment: fixed; + padding: 1.2rem; + overflow: auto; + } + + * { + font-family: "Atkinson Hyperlegible Mono", monospace; + text-transform: none; + font-size: 1.05rem; + } +} diff --git a/src/assets/css/syntax.scss b/src/assets/css/syntax.scss new file mode 100644 index 0000000..42be310 --- /dev/null +++ b/src/assets/css/syntax.scss @@ -0,0 +1,243 @@ +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; +} diff --git a/src/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf b/src/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf new file mode 100644 index 0000000..157d62e Binary files /dev/null and b/src/assets/fonts/AtkinsonHyperlegibleMono-Regular.ttf differ diff --git a/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf b/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf new file mode 100644 index 0000000..3fa771f Binary files /dev/null and b/src/assets/fonts/AtkinsonHyperlegibleNext-Regular.ttf differ diff --git a/src/assets/images/converter.webp b/src/assets/images/converter.webp new file mode 100644 index 0000000..36764fa Binary files /dev/null and b/src/assets/images/converter.webp differ diff --git a/src/assets/images/erebus.webp b/src/assets/images/erebus.webp new file mode 100644 index 0000000..510545e Binary files /dev/null and b/src/assets/images/erebus.webp differ diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico new file mode 100644 index 0000000..5000bb7 Binary files /dev/null and b/src/assets/images/favicon.ico differ diff --git a/src/assets/images/noise.png b/src/assets/images/noise.png new file mode 100644 index 0000000..93c1ad7 Binary files /dev/null and b/src/assets/images/noise.png differ diff --git a/src/assets/images/nonbinary-flag.svg b/src/assets/images/nonbinary-flag.svg new file mode 100644 index 0000000..5252870 --- /dev/null +++ b/src/assets/images/nonbinary-flag.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + -- cgit v1.3.1