From e1eb83c73c66263ecd19144268dfb3413efb6bc4 Mon Sep 17 00:00:00 2001
From: erin <git@ewin.moe>
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 @@
+<!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;
+}