commit e1eb83c73c66263ecd19144268dfb3413efb6bc4
Author: erin <git@ewin.moe>
Date: Mon Jul 17 23:29:32 2023 -0400
this sure do be a website
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cf5c076
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+# webring.umbreon.online static files
+
+the webring.umbreon.online homepage
+
+i use sass because i don't hate myself. `npx sass --watch
+style.sass:out/style.css`. after that just copy over the `out` folder to the
+site's webroot
diff --git a/fontsource/README.md b/fontsource/README.md
new file mode 100644
index 0000000..64b86c4
--- /dev/null
+++ b/fontsource/README.md
@@ -0,0 +1,5 @@
+These are the sources of the fonts used on this site. To edit, import the `.txt`
+files in this directory into
+[BitFontMaker2](https://www.pentacom.jp/pentacom/bitfontmaker2). The fonts are
+mostly reproduced from the character select sequence, though some additional
+diacritic glyphs were added.
diff --git a/fontsource/SOADialogue_20230717.txt b/fontsource/SOADialogue_20230717.txt
new file mode 100644
index 0000000..1437bf1
--- /dev/null
+++ b/fontsource/SOADialogue_20230717.txt
@@ -0,0 +1 @@
+{"33":[0,0,0,4,4,4,4,4,4,0,4,4,0,0,0,0],"34":[0,0,0,108,108,72,36,0,0,0,0,0,0,0,0,0],"37":[0,0,0,0,32,44,28,16,8,56,52,4,0,0,0,0],"39":[0,0,0,12,12,8,4,0,0,0,0,0,0,0,0,0],"40":[0,0,0,16,8,4,4,4,4,4,8,16,0,0,0,0],"41":[0,0,0,4,8,16,16,16,16,16,8,4,0,0,0,0],"42":[0,0,0,0,16,84,56,84,16,0,0,0,0,0,0,0],"43":[0,0,0,0,16,16,16,124,16,16,16,0,0,0,0,0],"44":[0,0,0,0,0,0,0,0,0,12,12,8,4,0,0,0],"45":[0,0,0,0,0,0,0,124,0,0,0,0,0,0,0,0],"46":[0,0,0,0,0,0,0,0,0,0,12,12,0,0,0,0],"47":[0,0,0,0,32,32,16,16,8,8,4,4,0,0,0,0],"48":[0,0,0,16,40,68,68,68,68,68,40,16,0,0,0,0],"49":[0,0,0,8,12,8,8,8,8,8,8,28,0,0,0,0],"50":[0,0,0,56,68,64,64,56,4,4,4,124,0,0,0,0],"51":[0,0,0,56,68,64,64,48,64,64,68,56,0,0,0,0],"52":[0,0,0,48,40,40,36,36,36,124,32,32,0,0,0,0],"53":[0,0,0,124,4,4,4,60,64,64,68,56,0,0,0,0],"54":[0,0,0,56,68,4,4,60,68,68,68,56,0,0,0,0],"55":[0,0,0,124,64,64,32,16,16,16,16,16,0,0,0,0],"56":[0,0,0,56,68,68,68,56,68,68,68,56,0,0,0,0],"57":[0,0,0,56,68,68,68,120,64,64,68,56,0,0,0,0],"58":[0,0,0,0,0,12,12,0,0,12,12,0,0,0,0,0],"59":[0,0,0,0,0,12,12,0,0,12,12,8,4,0,0,0],"60":[0,0,0,0,32,16,8,4,4,8,16,32,0,0,0,0],"61":[0,0,0,0,0,0,0,124,0,124,0,0,0,0,0,0],"62":[0,0,0,0,4,8,16,32,32,16,8,4,0,0,0,0],"63":[0,0,0,56,68,68,32,16,16,0,16,16,0,0,0,0],"64":[0,0,0,56,68,116,44,44,44,124,68,56,0,0,0,0],"65":[0,0,0,56,68,68,68,124,68,68,68,68,0,0,0,0],"66":[0,0,0,60,68,68,68,60,68,68,68,60,0,0,0,0],"67":[0,0,0,56,68,68,4,4,4,68,68,56,0,0,0,0],"68":[0,0,0,28,36,68,68,68,68,68,36,28,0,0,0,0],"69":[0,0,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"70":[0,0,0,124,4,4,4,60,4,4,4,4,0,0,0,0],"71":[0,0,0,56,68,4,4,100,68,68,68,56,0,0,0,0],"72":[0,0,0,68,68,68,68,124,68,68,68,68,0,0,0,0],"73":[0,0,0,28,8,8,8,8,8,8,8,28,0,0,0,0],"74":[0,0,0,64,64,64,64,64,64,64,68,56,0,0,0,0],"75":[0,0,0,68,36,36,20,12,20,36,68,68,0,0,0,0],"76":[0,0,0,4,4,4,4,4,4,4,4,124,0,0,0,0],"77":[0,0,0,68,68,68,108,108,124,84,84,84,0,0,0,0],"78":[0,0,0,68,76,76,84,84,100,100,68,68,0,0,0,0],"79":[0,0,0,56,68,68,68,68,68,68,68,56,0,0,0,0],"80":[0,0,0,60,68,68,68,60,4,4,4,4,0,0,0,0],"81":[0,0,0,56,68,68,68,68,68,92,36,88,0,0,0,0],"82":[0,0,0,60,68,68,68,60,68,68,68,68,0,0,0,0],"83":[0,0,0,56,68,4,4,56,64,64,68,56,0,0,0,0],"84":[0,0,0,124,16,16,16,16,16,16,16,16,0,0,0,0],"85":[0,0,0,68,68,68,68,68,68,68,68,56,0,0,0,0],"86":[0,0,0,68,68,68,40,40,40,16,16,16,0,0,0,0],"87":[0,0,0,68,68,84,84,84,84,40,40,40,0,0,0,0],"88":[0,0,0,68,68,40,40,16,40,40,68,68,0,0,0,0],"89":[0,0,0,68,68,68,40,40,16,16,16,16,0,0,0,0],"90":[0,0,0,124,64,32,32,16,8,8,4,124,0,0,0,0],"92":[0,0,0,0,4,4,8,8,16,16,32,32,0,0,0,0],"97":[0,0,0,0,0,56,64,120,68,68,68,120,0,0,0,0],"98":[0,0,0,4,4,4,60,68,68,68,68,60,0,0,0,0],"99":[0,0,0,0,0,56,68,4,4,4,68,56,0,0,0,0],"100":[0,0,0,64,64,64,120,68,68,68,68,120,0,0,0,0],"101":[0,0,0,0,0,56,68,68,124,4,68,56,0,0,0,0],"102":[0,0,0,96,16,16,124,16,16,16,16,16,0,0,0,0],"103":[0,0,0,0,0,120,68,68,68,120,64,64,60,0,0,0],"104":[0,0,0,4,4,4,60,68,68,68,68,68,0,0,0,0],"105":[0,0,0,0,4,0,4,4,4,4,4,4,0,0,0,0],"106":[0,0,0,0,32,0,32,32,32,32,32,36,24,0,0,0],"107":[0,0,0,4,4,4,68,36,20,28,36,68,0,0,0,0],"108":[0,0,0,4,4,4,4,4,4,4,4,4,0,0,0,0],"109":[0,0,0,0,0,60,84,84,84,84,84,84,0,0,0,0],"110":[0,0,0,0,0,60,68,68,68,68,68,68,0,0,0,0],"111":[0,0,0,0,0,56,68,68,68,68,68,56,0,0,0,0],"112":[0,0,0,0,0,60,68,68,68,68,60,4,4,0,0,0],"113":[0,0,0,0,0,120,68,68,68,68,120,68,64,0,0,0],"114":[0,0,0,0,0,100,20,12,12,4,4,4,0,0,0,0],"115":[0,0,0,0,0,56,68,4,56,64,68,56,0,0,0,0],"116":[0,0,0,0,16,16,124,16,16,16,16,96,0,0,0,0],"117":[0,0,0,0,0,68,68,68,68,68,68,120,0,0,0,0],"118":[0,0,0,0,0,68,68,68,40,40,16,16,0,0,0,0],"119":[0,0,0,0,0,68,84,84,84,84,40,40,0,0,0,0],"120":[0,0,0,0,0,68,68,40,16,40,68,68,0,0,0,0],"121":[0,0,0,0,0,68,68,68,68,120,64,64,60,0,0,0],"122":[0,0,0,0,0,124,64,32,16,8,4,124,0,0,0,0],"126":[0,0,0,0,0,0,152,100,0,0,0,0,0,0,0,0],"161":[0,0,0,4,4,0,4,4,4,4,4,4,0,0,0,0],"171":[0,0,0,0,0,144,72,36,72,144,0,0,0,0,0,0],"183":[0,0,0,0,0,0,0,4,0,0,0,0,0,0,0,0],"187":[0,0,0,0,0,36,72,144,72,36,0,0,0,0,0,0],"191":[0,0,0,16,16,0,16,16,8,4,68,56,0,0,0,0],"192":[8,16,0,56,68,68,68,124,68,68,68,68,0,0,0,0],"193":[32,16,0,56,68,68,68,124,68,68,68,68,0,0,0,0],"194":[16,40,0,56,68,68,68,124,68,68,68,68,0,0,0,0],"195":[88,36,0,56,68,68,68,124,68,68,68,68,0,0,0,0],"196":[40,0,0,56,68,68,68,124,68,68,68,68,0,0,0,0],"200":[8,16,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"201":[32,16,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"202":[16,40,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"203":[40,0,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"204":[4,8,0,28,8,8,8,8,8,8,8,28,0,0,0,0],"205":[16,8,0,28,8,8,8,8,8,8,8,28,0,0,0,0],"206":[8,20,0,28,8,8,8,8,8,8,8,28,0,0,0,0],"207":[20,0,0,28,8,8,8,8,8,8,8,28,0,0,0,0],"209":[88,36,0,68,76,76,84,84,100,100,68,68,0,0,0,0],"210":[8,16,0,56,68,68,68,68,68,68,68,56,0,0,0,0],"211":[32,16,0,56,68,68,68,68,68,68,68,56,0,0,0,0],"212":[16,40,0,56,68,68,68,68,68,68,68,56,0,0,0,0],"213":[88,36,0,56,68,68,68,68,68,68,68,56,0,0,0,0],"214":[40,0,0,56,68,68,68,68,68,68,68,56,0,0,0,0],"216":[0,0,0,56,68,68,68,68,68,68,68,56,0,0,0,0],"217":[8,16,0,68,68,68,68,68,68,68,68,56,0,0,0,0],"218":[32,16,0,68,68,68,68,68,68,68,68,56,0,0,0,0],"219":[16,40,0,68,68,68,68,68,68,68,68,56,0,0,0,0],"220":[40,0,0,68,68,68,68,68,68,68,68,56,0,0,0,0],"224":[0,0,8,16,0,56,64,120,68,68,68,120,0,0,0,0],"225":[0,0,32,16,0,56,64,120,68,68,68,120,0,0,0,0],"226":[0,0,16,40,0,56,64,120,68,68,68,120,0,0,0,0],"227":[0,0,88,36,0,56,64,120,68,68,68,120,0,0,0,0],"228":[0,0,40,0,0,56,64,120,68,68,68,120,0,0,0,0],"232":[0,0,8,16,0,56,68,68,124,4,68,56,0,0,0,0],"233":[0,0,32,16,0,56,68,68,124,4,68,56,0,0,0,0],"234":[0,0,16,40,0,56,68,68,124,4,68,56,0,0,0,0],"235":[0,0,40,0,0,56,68,68,124,4,68,56,0,0,0,0],"236":[0,0,4,8,0,0,8,8,8,8,8,8,0,0,0,0],"237":[0,0,8,4,0,0,4,4,4,4,4,4,0,0,0,0],"238":[0,0,8,20,0,0,8,8,8,8,8,8,0,0,0,0],"239":[0,0,20,0,0,0,8,8,8,8,8,8,0,0,0,0],"241":[0,0,88,36,0,60,68,68,68,68,68,68,0,0,0,0],"242":[0,0,8,16,0,56,68,68,68,68,68,56,0,0,0,0],"243":[0,0,32,16,0,56,68,68,68,68,68,56,0,0,0,0],"244":[0,0,16,40,0,56,68,68,68,68,68,56,0,0,0,0],"245":[0,0,88,36,0,56,68,68,68,68,68,56,0,0,0,0],"246":[0,0,40,0,0,56,68,68,68,68,68,56,0,0,0,0],"249":[0,0,8,16,0,68,68,68,68,68,68,120,0,0,0,0],"250":[0,0,32,16,0,68,68,68,68,68,68,120,0,0,0,0],"251":[0,0,16,40,0,68,68,68,68,68,68,120,0,0,0,0],"252":[0,0,40,0,0,68,68,68,68,68,68,120,0,0,0,0],"253":[0,0,32,16,0,68,68,68,68,120,64,64,60,0,0,0],"255":[0,0,40,0,0,68,68,68,68,120,64,64,60,0,0,0],"256":[56,0,0,56,68,68,68,124,68,68,68,68,0,0,0,0],"257":[0,0,56,0,0,56,64,120,68,68,68,120,0,0,0,0],"262":[32,16,0,56,68,68,4,4,4,68,68,56,0,0,0,0],"263":[0,0,32,16,0,56,68,4,4,4,68,56,0,0,0,0],"264":[16,40,0,56,68,68,4,4,4,68,68,56,0,0,0,0],"265":[0,0,16,40,0,56,68,4,4,4,68,56,0,0,0,0],"266":[16,0,0,56,68,68,4,4,4,68,68,56,0,0,0,0],"267":[0,0,16,0,0,56,68,4,4,4,68,56,0,0,0,0],"268":[40,16,0,56,68,68,4,4,4,68,68,56,0,0,0,0],"269":[0,0,40,16,0,56,68,4,4,4,68,56,0,0,0,0],"274":[56,0,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"275":[0,0,56,0,0,56,68,68,124,4,68,56,0,0,0,0],"277":[0,0,0,0,0,56,68,68,124,4,68,56,0,0,0,0],"278":[16,0,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"279":[0,0,16,0,0,56,68,68,124,4,68,56,0,0,0,0],"282":[40,16,0,124,4,4,4,60,4,4,4,124,0,0,0,0],"283":[0,0,40,16,0,56,68,68,124,4,68,56,0,0,0,0],"8216":[0,0,8,4,12,12,0,0,0,0,0,0,0,0,0,0],"8217":[0,0,12,12,8,4,0,0,0,0,0,0,0,0,0,0],"8220":[0,0,72,36,108,108,0,0,0,0,0,0,0,0,0,0],"8221":[0,0,108,108,72,36,0,0,0,0,0,0,0,0,0,0],"8222":[0,0,0,0,0,0,0,0,0,108,108,72,36,0,0,0],"8230":[0,0,0,0,0,0,0,0,0,0,0,292,0,0,0,0],"9633":[0,0,0,508,260,260,260,260,260,260,260,508,0,0,0,0],"9651":[0,0,0,32,32,80,80,136,136,260,260,508,0,0,0,0],"9671":[0,0,0,32,80,136,260,260,260,136,80,32,0,0,0,0],"9675":[0,0,0,112,136,260,260,260,260,260,136,112,0,0,0,0],"9678":[0,0,0,112,136,292,340,340,340,292,136,112,0,0,0,0],"9733":[0,0,0,32,32,112,508,248,112,248,216,396,0,0,0,0],"9792":[0,0,0,56,68,68,68,56,16,124,16,16,0,0,0,0],"9794":[0,0,0,16,56,84,16,56,68,68,68,56,0,0,0,0],"9834":[0,0,0,32,96,96,160,160,32,56,60,24,0,0,0,0],"name":"SOADialogue","copy":"","letterspace":"64","basefont_size":"512","basefont_left":"62","basefont_top":"0","basefont":"Arial","basefont2":"","ascender":"10","descender":"2","linegap":"6","wordspacing":"3"}
\ No newline at end of file
diff --git a/out/font/SOADialogue.ttf b/out/font/SOADialogue.ttf
new file mode 100644
index 0000000..aa4fe06
Binary files /dev/null and b/out/font/SOADialogue.ttf differ
diff --git a/out/index.html b/out/index.html
new file mode 100644
index 0000000..7de3ade
--- /dev/null
+++ b/out/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <title>Document</title>
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div class="textbox textbox--simple textbox--red">
+ <div class="textbox__text">
+ Welcome to <span class="textbox__span textbox__span--blue">webring.umbreon.online</span>!
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/out/style.css b/out/style.css
new file mode 100644
index 0000000..88f889b
--- /dev/null
+++ b/out/style.css
@@ -0,0 +1,139 @@
+@font-face {
+ font-family: "SOADialogue";
+ src: url("font/SOADialogue.ttf") format(truetype);
+}
+:root {
+ --pixel-scale: 2;
+ font-size: calc(var(--pixel-scale) * 1px);
+ --gradient-horiz-stripes: repeating-linear-gradient(to bottom,
+ #1d6c5a,
+ #1d6c5a 2rem,
+ #025a49 2rem,
+ #025a49 4rem
+ );
+}
+
+body {
+ background: var(--gradient-horiz-stripes);
+ min-height: 100vh;
+ margin: 0;
+ padding: 4rem;
+ font-size: 8rem;
+}
+
+.textbox {
+ display: inline-block;
+}
+.textbox--simple {
+ --textbox-bg: #FFFFFF;
+ --textbox-bg-fade: #F7F7EF;
+ --textbox-text-color: #424231;
+ --textbox-text-shadow: #C6C6B5;
+ margin: 0 9rem;
+ border: 1rem solid var(--textbox-border-outer);
+ background: var(--textbox-border-inner);
+ position: relative;
+}
+.textbox--simple::before, .textbox--simple::after {
+ content: "";
+ display: block;
+ background: var(--textbox-handle-bg);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ z-index: -1;
+ width: 7rem;
+ box-shadow: 3rem 0 0 -1rem var(--textbox-handle-bg), -3rem 0 0 -1rem var(--textbox-handle-bg), 6rem 0 0 -3rem var(--textbox-handle-bg), -6rem 0 0 -3rem var(--textbox-handle-bg), 0 1rem 0 0 var(--textbox-handle-border), 0 -1rem 0 0 var(--textbox-handle-border), 2rem 0 0 0rem var(--textbox-handle-border), -2rem 0 0 0rem var(--textbox-handle-border), 4rem 0 0 -1rem var(--textbox-handle-border), -4rem 0 0 -1rem var(--textbox-handle-border), 7rem 0 0 -3rem var(--textbox-handle-border), -7rem 0 0 -3rem var(--textbox-handle-border);
+}
+.textbox--simple::before {
+ left: 1rem;
+ transform: translateX(-100%);
+ border-right: 0;
+}
+.textbox--simple::after {
+ right: 1rem;
+ transform: translateX(100%);
+ border-left: 0;
+}
+.textbox--simple.textbox--theme-button {
+ margin: 0 10rem;
+}
+.textbox--simple.textbox--theme-button::before {
+ left: 0;
+}
+.textbox--simple.textbox--theme-button::after {
+ right: 0;
+}
+.textbox--simple.textbox--theme-button .textbox__text {
+ width: 14rem;
+ height: 10rem;
+}
+.textbox--yellow {
+ --textbox-border-outer: #7B6321;
+ --textbox-border-inner: #A58429;
+ --textbox-handle-bg: #FFB539;
+ --textbox-handle-border: #AD8400;
+}
+.textbox--red {
+ --textbox-border-outer: #632921;
+ --textbox-border-inner: #7B3129;
+ --textbox-handle-bg: #C63908;
+ --textbox-handle-border: #9C3108;
+}
+.textbox--green {
+ --textbox-border-outer: #215A18;
+ --textbox-border-inner: #216318;
+ --textbox-handle-bg: #42AD31;
+ --textbox-handle-border: #297321;
+}
+.textbox--blue {
+ --textbox-border-outer: #084263;
+ --textbox-border-inner: #085284;
+ --textbox-handle-bg: #1084C6;
+ --textbox-handle-border: #005A94;
+}
+.textbox--gray {
+ --textbox-border-outer: #4A4242;
+ --textbox-border-inner: #5A5A52;
+ --textbox-handle-bg: #7B7B73;
+ --textbox-handle-border: #5E5E55;
+}
+.textbox--pink {
+ --textbox-border-outer: #CE394A;
+ --textbox-border-inner: #E76B6B;
+ --textbox-handle-bg: #F79CA5;
+ --textbox-handle-border: #EF6B7B;
+}
+.textbox__text {
+ margin: 2rem;
+ width: 224rem;
+ height: 34rem;
+ box-shadow: 0 2rem 0 -1rem var(--textbox-bg-fade), 0 -2rem 0 -1rem var(--textbox-bg-fade), 2rem 0 0 -1rem var(--textbox-bg-fade), -2rem 0 0 -1rem var(--textbox-bg-fade), inset 0 0 0 1rem var(--textbox-bg-fade);
+ background: var(--textbox-bg);
+ padding: 0 1rem;
+ font-family: "SOADialogue";
+ font-size: 12rem;
+}
+.textbox__text, .textbox__text .textbox__span {
+ color: var(--textbox-text-color);
+ text-shadow: 1rem 0 var(--textbox-text-shadow), 1rem 1rem var(--textbox-text-shadow), 0 1rem var(--textbox-text-shadow);
+}
+
+.textbox__span--red {
+ --textbox-text-color: #C54700;
+ --textbox-text-shadow: #EFC6A5;
+}
+.textbox__span--blue {
+ --textbox-text-color: #6352FF;
+ --textbox-text-shadow: #CEC6F7;
+}
+
+.theme-options-grid {
+ display: flex;
+ flex-wrap: wrap;
+ width: 186rem;
+ gap: 8rem 6rem;
+ padding: 4rem 3rem;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/out/style.css.map b/out/style.css.map
new file mode 100644
index 0000000..7b4edc9
--- /dev/null
+++ b/out/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAOA;EACC;EACA,aACC;;;AASH;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..32074ee
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,240 @@
+// dialogue font (the taller one)
+@font-face {
+ font-family: "SOADialogue";
+ src: url("https://i.eritbh.me/temp/SOADialogue-10-2-6.ttf") format(truetype);
+}
+
+:root {
+ // rendering scale
+ --pixel-scale: 2;
+
+ // 1rem = 1 source pixel at the current render scale
+ font-size: calc(var(--pixel-scale) * 1px);
+
+
+ // some other bullshit
+ --gradient-horiz-stripes: repeating-linear-gradient(to bottom,
+ #1d6c5a,
+ #1d6c5a 2rem,
+ #025a49 2rem,
+ #025a49 4rem
+ );
+}
+
+// i don't need eyes anyway (transparency spotting)
+body {
+ background: var(--gradient-horiz-stripes);
+ min-height: 100vh;
+ margin: 0;
+ padding: 4rem;
+ // more or less reasonable default probably
+ font-size: 8rem;
+}
+
+// aren't text boxes fun
+.textbox {
+ // i cannot believe there is no better way to do this than
+ // - inline-block, or
+ // - shove it in a flex container (which i won't do because we have enough
+ // containers)
+ display: inline-block;
+
+ // Most of the text box styles in the game are just recolors of the same
+ // thing
+ &--simple {
+ // Variables for all the different colors
+ --textbox-bg: #FFFFFF;
+ --textbox-bg-fade: #F7F7EF;
+ --textbox-text-color: #424231;
+ --textbox-text-shadow: #C6C6B5;
+
+ // make room for the handles which are `position:absolute`'d outside
+ // this box
+ margin: 0 9rem;
+
+ // set up basic frame of inner section
+ border: 1rem solid var(--textbox-border-outer);
+ background: var(--textbox-border-inner);
+
+ // who's ready for position shenanigans
+ position: relative;
+
+ // box handles
+ &::before,
+ &::after {
+ content: "";
+ display: block;
+ background: var(--textbox-handle-bg);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+
+ // styles for left and right curves are present on both handles, but
+ // they're layered behind the main box
+ z-index: -1;
+
+ // width cannot be lower than this because we need to be able to
+ // shrink the box shadow of the element at least two stages without
+ // it disappearing entirely in order to make the rounded corners
+ // work
+ width: 7rem;
+
+ // hell world
+ box-shadow:
+ // background extensions
+ 3rem 0 0 -1rem var(--textbox-handle-bg),
+ -3rem 0 0 -1rem var(--textbox-handle-bg),
+
+ 6rem 0 0 -3rem var(--textbox-handle-bg),
+ -6rem 0 0 -3rem var(--textbox-handle-bg),
+
+ // horizontal border segments (very top and bottom)
+ 0 1rem 0 0 var(--textbox-handle-border),
+ 0 -1rem 0 0 var(--textbox-handle-border),
+
+ // vertical border segments
+ 2rem 0 0 0rem var(--textbox-handle-border),
+ -2rem 0 0 0rem var(--textbox-handle-border),
+
+ 4rem 0 0 -1rem var(--textbox-handle-border),
+ -4rem 0 0 -1rem var(--textbox-handle-border),
+
+ 7rem 0 0 -3rem var(--textbox-handle-border),
+ -7rem 0 0 -3rem var(--textbox-handle-border);
+
+ }
+ &::before {
+ left: 1rem;
+ transform: translateX(-100%);
+ border-right: 0;
+ }
+ &::after {
+ right: 1rem;
+ transform: translateX(100%);
+ border-left: 0;
+ }
+
+ // if this is a selection button, the handles are annoyingly 1 source
+ // pixel wider, and the text region is tiny and empty
+ &.textbox--theme-button {
+ margin: 0 10rem;
+
+ &::before {
+ left: 0;
+ }
+ &::after {
+ right: 0;
+ }
+
+ .textbox__text {
+ width: 14rem;
+ height: 10rem;
+ }
+ }
+ }
+
+ // #region .textbox--simple color variants
+ &--yellow {
+ --textbox-border-outer: #7B6321;
+ --textbox-border-inner: #A58429;
+ --textbox-handle-bg: #FFB539;
+ --textbox-handle-border: #AD8400;
+ }
+ &--red {
+ --textbox-border-outer: #632921;
+ --textbox-border-inner: #7B3129;
+ --textbox-handle-bg: #C63908;
+ --textbox-handle-border: #9C3108;
+ }
+ &--green {
+ --textbox-border-outer: #215A18;
+ --textbox-border-inner: #216318;
+ --textbox-handle-bg: #42AD31;
+ --textbox-handle-border: #297321;
+ }
+ &--blue {
+ --textbox-border-outer: #084263;
+ --textbox-border-inner: #085284;
+ --textbox-handle-bg: #1084C6;
+ --textbox-handle-border: #005A94;
+ }
+ &--gray {
+ --textbox-border-outer: #4A4242;
+ --textbox-border-inner: #5A5A52;
+ --textbox-handle-bg: #7B7B73;
+ --textbox-handle-border: #5E5E55;
+ }
+ &--pink {
+ --textbox-border-outer: #CE394A;
+ --textbox-border-inner: #E76B6B;
+ --textbox-handle-bg: #F79CA5;
+ --textbox-handle-border: #EF6B7B;
+ }
+ // #endregion
+
+ // Text inside the text box
+ &__text {
+ // offset by a bit to leave room for the rounded corners we do via box
+ // shadow
+ margin: 2rem;
+ // in game this region is 228x38, but again, part of that is done via
+ // box shadows because pixelated round corners are hard, so we subtract
+ // that margin
+ width: 224rem;
+ height: 34rem;
+
+ // get the slightly off-white region around the text
+ box-shadow:
+ 0 2rem 0 -1rem var(--textbox-bg-fade),
+ 0 -2rem 0 -1rem var(--textbox-bg-fade),
+ 2rem 0 0 -1rem var(--textbox-bg-fade),
+ -2rem 0 0 -1rem var(--textbox-bg-fade),
+ inset 0 0 0 1rem var(--textbox-bg-fade);
+
+ // the innermost part with the text is just white
+ background: var(--textbox-bg);
+
+ // text still needs to be offset a bit from left/right
+ padding: 0 1rem;
+
+ // font setup
+ font-family: "SOADialogue";
+ // font exported with 10px ascenders, 2px descenders
+ font-size: calc((10 + 2) * 1rem);
+ // trying our goddamn best to make the browser render the pixel font
+ // correctly, except i dont think this actually helps lol
+ // text-rendering: geometricPrecision;
+
+ // text colors and shadow - `.textbox__span`'s use the same logic but
+ // change the colors via variables
+ &, .textbox__span {
+ color: var(--textbox-text-color);
+ text-shadow:
+ 1rem 0 var(--textbox-text-shadow),
+ 1rem 1rem var(--textbox-text-shadow),
+ 0 1rem var(--textbox-text-shadow);
+ }
+ }
+}
+
+// custom text colors in text boxes
+.textbox__span {
+ &--red {
+ --textbox-text-color: #C54700;
+ --textbox-text-shadow: #EFC6A5;
+ }
+
+ &--blue {
+ --textbox-text-color: #6352FF;
+ --textbox-text-shadow: #CEC6F7;
+ }
+}
+
+// misc shit
+.theme-options-grid {
+ display: flex;
+ flex-wrap: wrap;
+ width: 186rem;
+ gap: 8rem 6rem;
+ padding: 4rem 3rem;
+}