summaryrefslogtreecommitdiff
path: root/src/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'src/assets/css')
-rw-r--r--src/assets/css/default.scss276
-rw-r--r--src/assets/css/syntax.scss243
2 files changed, 519 insertions, 0 deletions
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;
+}
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-29 15:58:26 +0000