diff --git a/public/code.html b/public/code.html
new file mode 100644
index 0000000..78e0579
--- /dev/null
+++ b/public/code.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>functor.systems >> Matrix</title>
+  <meta name="description" content="a matrix homeserver for functor.systems members">
+  <meta name="author" content="Youwen Wu <youwen@functor.systems>">
+
+  <meta property="og:title" content="functor.systems >> Code">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://functor.systems/code">
+  <meta property="og:description" content="a Git forge for functor.systems members. beyond coding. we forge.">
+
+  <link rel="stylesheet" href="/sunlit.css">
+
+  <!-- <link rel="icon" href="/favicon.ico"> -->
+  <!-- <link rel="icon" href="/favicon.svg" type="image/svg+xml"> -->
+  <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
+
+  <style>
+    @font-face {
+      font-family: "Redaction";
+      font-style: normal;
+      font-display: swap;
+      font-weight: regular;
+      src: url("/fonts/redaction.woff2") format("woff2");
+    }
+    @font-face {
+      font-family: "Redaction";
+      font-style: italic;
+      font-display: swap;
+      font-weight: regular;
+      src: url("/fonts/redaction-italic.woff2") format("woff2");
+    }
+    @font-face {
+      font-family: "Redaction 20";
+      font-style: italic;
+      font-display: swap;
+      font-weight: regular;
+      src: url("/fonts/redaction-20-italic.woff2") format("woff2");
+    }
+    body.dark #lightswitch {
+      color: #fff;
+    }
+
+    #lightswitch:hover {
+      text-decoration: underline;
+    }
+
+    .hover-link {
+      text-decoration: none;
+    }
+
+    .hover-link:hover {
+      text-decoration: underline;
+    }
+  </style>
+
+</head>
+
+<body>
+  <div id="dappled-light">
+
+  <div id="glow"></div>
+  <div id="glow-bounce"></div>
+  <div class="perspective">
+    <div id="leaves">
+      <svg style="width: 0; height: 0; position: absolute;">
+	<defs>
+	  <filter id="wind" x="-20%" y="-20%" width="140%" height="140%">
+	    <feTurbulence type="fractalNoise" numOctaves="2" seed="1">
+	      <animate attributeName="baseFrequency" dur="16s" keyTimes="0;0.33;0.66;1"
+		values="0.005 0.003;0.01 0.009;0.008 0.004;0.005 0.003" repeatCount="indefinite" />
+	    </feTurbulence>
+	    <feDisplacementMap in="SourceGraphic">
+	      <animate attributeName="scale" dur="20s" keyTimes="0;0.25;0.5;0.75;1" values="45;55;75;55;45"
+		repeatCount="indefinite" />
+	    </feDisplacementMap>
+	  </filter>
+	</defs>
+      </svg>
+    </div>
+    <div id="blinds">
+      <div class="shutters">
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+	<div class="shutter"></div>
+      </div>
+      <div class="vertical">
+	<div class="bar"></div>
+	<div class="bar"></div>
+      </div>
+    </div>
+  </div>
+  <div id="progressive-blur">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  </div>
+  <article style="font-family: 'Redaction';">
+    <h1 style="font-family: 'Redaction 20'; font-style: italic; font-size: 3.8rem;">code.functor.systems</h1>
+    <p style="font-size: 1.5rem;">
+    A Git forge operated by <a href="/">functor.systems</a>.
+    </p>
+    <p style="font-size: 1.5rem; margin-top: 1em; margin-bottom: 1em;">
+    Git is a version control system for source code. A Git <em>forge</em> is a central place that holds Git repositories and facilitates collaboration. The most famous is GitHub, and
+      <span style="font-style: italic;">code.functor.systems</span> is our very
+      own forge, running the entirely free software <a
+      href="https://forgejo.org/">Forgejo</a> forge software. Beyond coding. We forge.
+    </p>
+    <p style="font-size: 1.5rem; margin-top: 1em; margin-bottom: 1em;">
+    Registration is currently loosely restricted to friends of the
+    functor.systems community. In particular, if you’re currently working on a
+    project hosted on code.functor.systems, you will <b>almost certainly</b> be
+    approved for
+    an account. Contact <a
+      href="mailto:forgejo-admin@functor.systems">forgejo-admin@functor.systems</a>
+    after you create an account to have it activated.
+    </p>
+    <a style="font-size: 1.2rem;" class="hover-link" href="https://code.functor.systems/explore/repos">[browse repos]</a>
+    <a style="font-size: 1.2rem; margin-left: 20px;" class="hover-link" href="https://code.functor.systems/user/sign_up">[register for an account]</a>
+    <a style="font-size: 1.2rem; margin-left: 20px;" class="hover-link" href="/">[functor.systems]</a>
+    <button
+	id="lightswitch"
+	style="
+	  border: 1px solid #ccc;
+	  border-radius: 4px;
+	  cursor: pointer;
+	  font-size: 1.2rem;
+	  background: none;
+	  border: none;
+	  padding: 0px 0px 0px 0px;
+	  font-family: 'Redaction';
+	  margin-left: 20px;
+	"
+      ></button>
+  </article>
+  <script>
+    function toggle() {
+      const isCurrentlyDark = document.body.classList.contains('dark');
+      applyTheme(!isCurrentlyDark);
+    }
+
+    document.addEventListener('keydown', function(event) {
+      if (event.keyCode === 32) {
+	toggle();
+      }
+    });
+
+    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const btn = document.getElementById('lightswitch');
+
+    const applyTheme = isDark => {
+      document.body.classList.add('animation-ready');
+      if (isDark) {
+	document.body.classList.add('dark');
+      } else {
+	document.body.classList.remove('dark');
+      }
+      btn.textContent = isDark
+	? '[lights on]'
+	: '[lights out]';
+    };
+
+    applyTheme(darkQuery.matches);
+
+    darkQuery.addEventListener('change', e => {
+      applyTheme(e.matches);
+    });
+
+    btn.addEventListener('click', () => {
+      const isCurrentlyDark = document.body.classList.contains('dark');
+      applyTheme(!isCurrentlyDark);
+    });
+  </script>
+</body>
+</html>
diff --git a/public/matrix.html b/public/matrix.html
index 3121f4d..778ed19 100644
--- a/public/matrix.html
+++ b/public/matrix.html
@@ -141,6 +141,8 @@
     The official <a href="https://element.io/">matrix.org</a> free public homeserver is
     a good place to make your first account.
     </p>
+    <a style="font-size: 1.2rem;" class="hover-link" href="https://matrix.to/#/#vect:functor.systems">[register for an account]</a>
+    <a style="font-size: 1.2rem; margin-left: 20px;" class="hover-link" href="/">[functor.systems]</a>
     <button
 	id="lightswitch"
 	style="
@@ -152,10 +154,9 @@
 	  border: none;
 	  padding: 0px 0px 0px 0px;
 	  font-family: 'Redaction';
+	  margin-left: 20px;
 	"
       ></button>
-    <a style="font-size: 1.2rem; margin-left: 20px;" class="hover-link" href="https://matrix.to/#/#vect:functor.systems">[register for an account]</a>
-    <a style="font-size: 1.2rem; margin-left: 20px;" class="hover-link" href="/">[functor.systems]</a>
   </article>
   <script>
     function toggle() {
diff --git a/public/sunlit.css b/public/sunlit.css
index ed8aa55..cfb71e8 100644
--- a/public/sunlit.css
+++ b/public/sunlit.css
@@ -1,7 +1,7 @@
 article {
   margin: 0 auto;
   max-width: 800px;
-  padding: 25vh 12px;
+  padding: 8rem 12px;
 
   color: var(--dark);
   isolation: isolate;
