readability is a thing it turns out

out/index.html

@@ -52,12 +52,12 @@
 				For webring participants:
 			</p>
 			<ul>
-				<li>
+				<li><p>
 					You can view the full URL registered for your site by
 					checking <a href="https://webring.umbreon.online/list">
 					<code>/list</code></a>.
-				</li>
+				</p></li>
-				<li>
+				<li><p>
 					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 <code>from</code> whose
@@ -65,11 +65,11 @@
 					<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>
+				</p></li>
-				<li>
+				<li><p>
 					If you need to change your registration or something, ping
 					Erin on Discord or something.
-				</li>
+				</p></li>
 			</ul>
 			<p>
 				Running <a href="https://git.ewin.moe/erin/webring">a webring

out/style.css

@@ -127,6 +127,7 @@ main {
   width: 224rem;
   min-height: 34rem;
   max-width: calc(100vw - 32rem);
+  overflow-wrap: break-word;
   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;
@@ -189,6 +190,10 @@ code {
   background: rgba(123, 123, 123, 0.7333333333);
 }
 
+ul, ol {
+  padding-inline-start: 1em;
+}
+
 ul {
   list-style-type: "·  ";
 }

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,aACC;;;AAMF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;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;EAGA;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;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC","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;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;EAGA;EAEA;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;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC","file":"style.css"}

style.scss

@@ -210,6 +210,8 @@ main {
 		// this accounts for a bunch of things including the width of the
 		// handles and the padding of <main>
 		max-width: calc(100vw - 32rem);
+		// do not overflow outside the box
+		overflow-wrap: break-word;
 
 		// get the slightly off-white region around the text
 		box-shadow:
@@ -337,6 +339,9 @@ code {
 	background: #7B7B7BBB;
 }
 
+ul, ol {
+	padding-inline-start: 1em;
+}
 ul {
 	list-style-type: "·  ";
 }