From 0636d4f296e69b3e6de44b9d70988c8fd6024a17 Mon Sep 17 00:00:00 2001 From: Erin Date: Mon, 17 Jul 2023 23:29:32 -0400 Subject: [PATCH] this sure do be a website --- README.md | 7 + fontsource/README.md | 5 + fontsource/SOADialogue_20230717.txt | 1 + out/font/SOADialogue.ttf | Bin 0 -> 12032 bytes out/index.html | 16 ++ out/style.css | 139 ++++++++++++++++ out/style.css.map | 1 + style.scss | 240 ++++++++++++++++++++++++++++ 8 files changed, 409 insertions(+) create mode 100644 README.md create mode 100644 fontsource/README.md create mode 100644 fontsource/SOADialogue_20230717.txt create mode 100644 out/font/SOADialogue.ttf create mode 100644 out/index.html create mode 100644 out/style.css create mode 100644 out/style.css.map create mode 100644 style.scss 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 0000000000000000000000000000000000000000..aa4fe06480809db3f14e8208c3a9ef3e54330e66 GIT binary patch literal 12032 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 K9^{eVeg7XB={ZjT literal 0 HcmV?d00001 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; +}