Moar CSS stuff

assets/css/post_text.css

@@ -3,7 +3,6 @@
  */
 
 :root {
-    box-sizing: border-box;
     --light-warm-gray: #C2B3A9;
     --dark-warm-gray: #A59990;
     --teal: #5B90A4;
@@ -12,6 +11,8 @@
     --true-gray: #999999;
     --highlight-green: green;
     --highlight-red: red;
+
+    box-sizing: border-box;
 }
 
 *, ::before, ::after {
@@ -25,9 +26,18 @@ body {
     font-size: calc(8px + 1vmin);
 }
 
-pre {
+code {
+    background-color: black;
+    color: white;
+    font-size: 0.75em; /* Why tho?? */
+}
+
+pre > code {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
+    padding: 0.5em 1em;
+    display: inline-block;
+    width: 100%;
 }
 
 /*
@@ -49,13 +59,6 @@ pre {
   margin: 1em 0;
 }
 
-.page-title {
-  text-align: center;
-  border: inset;
-  padding: 0.5em 0;
-  background-color: var(--dark-warm-gray);
-}
-
 .site-nav {
   display: flex;
   flex-flow: row wrap;
@@ -73,6 +76,19 @@ pre {
   background-color: var(--light-blue);
 }
 
+.page-title {
+  text-align: center;
+  border: inset;
+  padding: 0.5em 0;
+  background-color: var(--dark-warm-gray);
+}
+
+.page-body {
+  background-color: var(--light-warm-gray);
+  border: outset;
+  padding: 0.5em 1em;
+}
+
 .field-with-info {
     border-style: solid;
     border-color: var(--highlight-green);
@@ -90,7 +106,6 @@ pre {
 .pager {
   display: flex;
   flex-direction: column;
-  /* border: dashed; */
   gap: 1em;
   padding: 0.5em 0;
 }
@@ -108,7 +123,6 @@ pre {
 .pager__nav > a {
   border: outset;
   flex: 1;
-  /* border-bottom-style: none; */
   text-align: center;
   background-color: var(--light-blue);
 }

templates/page/about.html.ep

@@ -1,7 +1,7 @@
 % layout 'default';
 % title 'About Post::Text';
-<h2><%= title %></h2>
+<h2 class="page-title"><%= title %></h2>
-<main class="about body">
+<main class="page-body">
   <p>Post::Text is a
     <a href="https://en.wikipedia.org/wiki/Textboard">textboard</a>
     a bit like 2channel. You can post whatever you want anonymously

templates/page/rules.html.ep

@@ -1,7 +1,7 @@
 % layout 'default';
 % title 'The Rules™';
-<h2><%= title %></h2>
+<h2 class="page-title"><%= title %></h2>
-<main class="rules body">
+<main class="page-body">
   <p>The rules here are pretty simple:</p>
   <ul>
     <li>No hate speech (e.g. racism, sexism, homophobia, transphobia, etc.)</li>