commit 0636d4f296e69b3e6de44b9d70988c8fd6024a17 Author: Erin 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 @@ + + + + + Document + + + + +
+
+ Welcome to webring.umbreon.online! +
+
+ + 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; +}