diff --git a/site-src/index.mdx b/site-src/index.mdx
index 48667a8..1a119fc 100644
--- a/site-src/index.mdx
+++ b/site-src/index.mdx
@@ -16,7 +16,7 @@ export function PostLink({post}) {
     </>
 }
 
-## About me
+# About me
 - [I go by mehbark](/awesomebark) on the internet!
 - I did get this domain just for the pun, but alas, I can't claim to be <span title="I think that's maybe Vriska?">the number one Terezi fan</span>.
 - I put code on [my Forgejo instance](https://g.pyrope.net) and [my GitHub](https://github.com/mehbark).
@@ -32,7 +32,7 @@ If you want longer-form stuff of even less consistent quality, check out [my blo
 
 ---
 
-## Latest posts
+# Latest posts
 <ul>
 {props.collections.post.toReversed().map(p =>
     <li key={p.url}><PostLink post={p} /></li>
diff --git a/site-src/layout/page.njk b/site-src/layout/page.njk
index e9d7406..e1e8e08 100644
--- a/site-src/layout/page.njk
+++ b/site-src/layout/page.njk
@@ -30,6 +30,7 @@ title: terezi.pyrope.net
   </head>
   <body>
     <h1 id="site-title"><a href="/">T3R3Z1.PYROP3.N3T</a></h1>
+
     <main>
       {% if title != "terezi.pyrope.net" %}
         <h1><a href="{{ url or "" }}">{{ title }}</a></h1>
@@ -37,15 +38,16 @@ title: terezi.pyrope.net
     
       {{ content | safe }}
     </main>
-
+    
     <footer>
       {% include "./badges.njk" %}
-      <div class="webring">
+      <div id="webring">
         <h3>this web site is part of the m,cai webring</h3>
         <a href="https://spax.zone">←</a> <a href="/ring.html">everyone</a> <a href="https://lisanne.gay">→</a>
       </div>
       <iframe title="splat button" width="110" height="100" src="https://www.myinstants.com/instant/lancer-splat-18107/embed/" frameborder="0" scrolling="no"></iframe>
     </footer>
+
   </body>
 {% include "./ansi-sprite.html" %}
 </html>
diff --git a/site-src/res/main.css b/site-src/res/main.css
index 142a9b1..fae1989 100644
--- a/site-src/res/main.css
+++ b/site-src/res/main.css
@@ -24,10 +24,26 @@ body {
     /* font-feature-settings: "aalt", "c2sc", "ccmp", "cv13", "cv17", "cv19", "cv20", "cv25", "cv28", "cv37", "cv43", "cv44", "cv46", "cv47", "cv49", "cv55", "cv57", "cv62", "cv68", "cv69", "cv70", "cv71", "cv75", "cv76", "cv77", "cv79", "cv80", "cv81", "cv82", "cv84", "cv90", "cv91", "cv92", "cv98", "frac", "liga", "locl", "smcp", "ss01", "ss04", "ss05", "ss11", "ss12", "subs", "sups", "mark", "mkmk";
      */
     min-height: 100%;
+    display: grid;
+    grid-template:
+        "header"
+        "body"
+        "sidebar" / minmax(0, 1fr);
+    align-items: start;
+}
+
+@media (min-width: 1020px) {
+    body {
+        grid-template:
+            "header header"
+            "body sidebar" / minmax(0, 2fr) minmax(0, 1fr);
+    }
 }
 
 main {
-    min-height: 60vh;
+    grid-area: body;
+    padding-inline: 2rem;
+    padding-block-start: 1rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -38,6 +54,11 @@ main {
         --accent: #fff831;
         --accent2: #b94d04;
     }
+
+    footer {
+        min-height: 0;
+        background-image: url(/res/prospit-extended.webp);
+    }
 }
 
 /* we can make code wider :D */
@@ -45,7 +66,7 @@ p,
 h1,
 h2,
 video {
-    width: min(650px, 95vw);
+    width: min(650px, 95vw, 100%);
     margin-inline: auto;
 }
 
@@ -88,7 +109,6 @@ pre {
 
 h1 {
     font-size: 1.3em;
-    margin-top: 20pt;
     margin-bottom: 10pt;
     text-align: center;
     hyphens: none;
@@ -179,7 +199,7 @@ hr {
     border: none;
     border-top: 2px solid var(--light);
     margin-block: 2rem;
-    width: min(600px, 90vw);
+    width: min(100%, 600px, 90vw);
     margin-inline: auto;
 }
 
@@ -187,16 +207,17 @@ li {
     margin-bottom: 0.5rem;
 }
 
+/*
 footer {
     width: min(700px, 95vw);
     --fv-smcp: "smcp" on;
     margin-inline: auto;
     display: flex;
     margin-bottom: 2rem;
-    gap: 1rem;
     flex-flow: row wrap;
     justify-content: center;
 }
+*/
 
 code,
 .emoticon,
@@ -262,6 +283,7 @@ video {
         monospace;
     background: var(--accent2);
     margin: 0;
+    grid-area: header;
 }
 
 #site-title > a {
@@ -269,13 +291,6 @@ video {
     text-decoration: none;
 }
 
-footer {
-    text-align: center;
-    background-color: var(--accent2);
-    width: 100%;
-    margin: 0;
-}
-
 /*.badges a, marquee a, header a {
 	border: none;
 	background-color: #00000000;
@@ -283,13 +298,14 @@ footer {
 }*/
 .badges {
     image-rendering: pixelated;
-    transition: transform 0.1s;
-    overflow-x: clip;
     font-size: 0pt;
-    padding: 0.5rem;
+    margin-inline: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 .badges > * {
-    display: inline-block;
+    display: inline-flex;
     width: 88px;
     height: 31px;
     vertical-align: middle;
@@ -305,9 +321,32 @@ footer {
     height: 31px;
 }
 
-.webring {
+#webring {
     margin: 0 auto;
+    text-align: center;
+    background-color: var(--accent2);
+    padding: 0.5rem;
 }
-.webring > a {
+#webring > a {
     font-size: 2rem;
 }
+
+footer {
+    grid-area: sidebar;
+    list-style: none;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    background-position: bottom left;
+    background-repeat: repeat-x;
+    image-rendering: pixelated;
+    margin-block-start: 1rem;
+}
+
+footer > * {
+    /* padding: 0.5rem; */
+    min-width: 0;
+    margin: 0;
+}
diff --git a/site-src/res/prospit-extended.webp b/site-src/res/prospit-extended.webp
new file mode 100644
index 0000000..3e7263f
Binary files /dev/null and b/site-src/res/prospit-extended.webp differ
