okay here have actual page content

out/index.html

@@ -10,13 +10,59 @@
 		<main>
 			<div class="textbox textbox--simple textbox--yellow">
 				<div class="textbox__text">
-					Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>!
+					Welcome to <span class="color color--red">webring.umbreon.online</span>!
 				</div>
 				<div class="textbox__advance"></div>
 			</div>
 
 			<p>
-				This is a webring for some friends.
+				This is a simple webring for some friends. This page will have
+				more information in the future, but Erin is busy obsessing over
+				the design so it might be a while.
+			</p>
+			<p>
+				Here's everyone who participates:
+			</p>
+			<ul>
+				<li><a href="https://loveshock.xyz">loveshock.xyz</a></li>
+				<li><a href="https://starshines.gay">starshines.gay</a></li>
+				<li><a href="https://tempest.dev">tempest.dev</a></li>
+				<li><a href="https://interestingzinc.xyz">interestingzinc.xyz</a></li>
+			</ul>
+			<p>
+				For webring participants:
+			</p>
+			<ul>
+				<li>
+					You can view the full URL registered for your site by
+					checking <a href="https://webring.umbreon.online/list">
+					<code>/list</code></a>.
+				</li>
+				<li>
+					Link to the previous and next site in the ring with
+					<code>/prev</code> and <code>next</code>. Both of these
+					endpoints expect a query parameter `from` whose value should
+					be the full URL of your site as shown in <code>/list</code>,
+					including the scheme (http/https), optionally URI encoded.
+					For example:
+					<code>https://webring.umbreon.online/prev?from=https://mysite.xyz</code>.
+				</li>
+				<li>
+					If you need to change your registration or something, ping
+					Erin on Discord or something.
+				</li>
+			</ul>
+			<p>
+				Running <a href="https://git.ewin.moe/erin/webring">a webring
+				server written in half an hour</a>. Source of this homepage
+				<a href="https://git.ewin.moe/erin/webring-static">is also
+				available</a>. Both are licensed under WTFPL.
+			</p>
+			<p>
+				Admin: <a href="https://tired.umbreon.online/@erin">
+				@erin@tired.umbreon.online</a><br>
+				Security: <a href="mailto:security@ewin.moe">
+				security@ewin.moe</a>
 			</p>
 		</main>
 	</body>

out/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @font-face {
   font-family: "SOADialogue";
   src: url("font/SOADialogue.ttf") format(truetype);
@@ -17,6 +18,11 @@
   );
 }
 
+.color, .textbox__text {
+  color: var(--text-color);
+  text-shadow: 1rem 0 var(--text-shadow), 1rem 1rem var(--text-shadow), 0 1rem var(--text-shadow);
+}
+
 body {
   background: var(--gradient-horiz-stripes);
   min-height: 100vh;
@@ -34,12 +40,12 @@ main {
 
 .textbox {
   display: inline-block;
+  --text-color: #424231;
+  --text-shadow: #C6C6B5;
 }
 .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);
@@ -126,10 +132,6 @@ main {
   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__advance {
   --background: #FFF;
   --border: #000;
@@ -165,13 +167,29 @@ main {
   }
 }
 
-.textbox__span--red {
+.color--red {
-  --textbox-text-color: #C54700;
+  --text-color: #C54700;
-  --textbox-text-shadow: #EFC6A5;
+  --text-shadow: #EFC6A5;
 }
-.textbox__span--blue {
+.color--blue {
-  --textbox-text-color: #6352FF;
+  --text-color: #6352FF;
-  --textbox-text-shadow: #CEC6F7;
+  --text-shadow: #CEC6F7;
+}
+
+a {
+  color: inherit;
+  text-decoration-thickness: 1rem;
+  text-underline-offset: 1rem;
+  text-decoration-skip-ink: none;
+}
+
+code {
+  font: inherit;
+  background: rgba(123, 123, 123, 0.7333333333);
+}
+
+ul {
+  list-style-type: "·   ";
 }
 
 .theme-options-grid {

out/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;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;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAQA;EACC;EACA,aACC;;AAMA;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AAOF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":";AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA,aACC;;;AAMF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;EAEA;EACA;;AAIA;EAEC;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;;AAOD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAUE;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AASF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;EACA;EACA;EACA","file":"style.css"}

style.scss

@@ -26,6 +26,15 @@
 	);
 }
 
+// helper for applying consistent text style
+%text {
+	color: var(--text-color);
+	text-shadow:
+		1rem 0    var(--text-shadow),
+		1rem 1rem var(--text-shadow),
+		0    1rem var(--text-shadow);
+}
+
 // i don't need eyes anyway (transparency spotting)
 body {
 	background: var(--gradient-horiz-stripes);
@@ -51,14 +60,15 @@ main {
 	//   containers)
 	display: inline-block;
 
+	--text-color: #424231;
+	--text-shadow: #C6C6B5;
+
 	// 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
@@ -184,6 +194,8 @@ main {
 	}
 	// #endregion
 
+	// TODO: implement the other styles of box frames
+
 	// Text inside the text box
 	&__text {
 		// offset by a bit to leave room for the rounded corners we do via box
@@ -219,15 +231,8 @@ main {
 		// correctly, except i dont think this actually helps lol
 		// text-rendering: geometricPrecision;
 
-		// text colors and shadow - `.textbox__span`'s use the same logic but
+		// apply text styles (--text-color and --text-shadow are inherited
-		// change the colors via variables
+		@extend %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);
-		}
 	}
 
     &__advance {
@@ -302,18 +307,37 @@ main {
 }
 
 // custom text colors in text boxes
-.textbox__span {
+.color {
+	@extend %text;
+
 	&--red {
-		--textbox-text-color: #C54700;
+		--text-color: #C54700;
-		--textbox-text-shadow: #EFC6A5;
+		--text-shadow: #EFC6A5;
 	}
 
 	&--blue {
-		--textbox-text-color: #6352FF;
+		--text-color: #6352FF;
-		--textbox-text-shadow: #CEC6F7;
+		--text-shadow: #CEC6F7;
 	}
 }
 
+// links do a thing
+a {
+	color: inherit;
+	text-decoration-thickness: 1rem;
+	text-underline-offset: 1rem;
+	text-decoration-skip-ink: none;
+}
+
+code {
+	font: inherit;
+	background: #7B7B7BBB;
+}
+
+ul {
+	list-style-type: "·   ";
+}
+
 // misc shit
 .theme-options-grid {
 	display: flex;