Add colophon / about:jol

assets/css/footer.css

@@ -1,56 +1,5 @@
 .footer {
     flex-grow: 0;
+    text-align: center;
     opacity: 0.5;
 }
-.footer__inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0;
-  width: 760px;
-  max-width: 100%;
-}
-@media (max-width: 899px) {
-  .footer__inner {
-    flex-direction: column;
-  }
-}
-.footer a {
-  color: inherit;
-}
-.footer .copyright {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 1rem;
-}
-.footer .copyright--user {
-  margin: auto;
-  text-align: center;
-}
-.footer .copyright > *:first-child:not(:only-child) {
-  margin-right: 10px;
-}
-@media (max-width: 899px) {
-  .footer .copyright > *:first-child:not(:only-child) {
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-}
-@media (max-width: 899px) {
-  .footer .copyright {
-    flex-direction: column;
-    margin-top: 10px;
-  }
-}
-@media (max-width: 899px) {
-  .footer .copyright-theme-sep {
-    display: none;
-  }
-}
-@media (max-width: 899px) {
-  .footer .copyright-theme {
-    font-size: 0.75rem;
-  }
-}

assets/css/style.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import "./footer.css";
 
 @font-face {
     font-family: "BerkeleyMono";
@@ -655,63 +656,6 @@ hr {
     overflow: hidden;
 }
 
-.footer {
-    flex-grow: 0;
-    opacity: 0.5;
-}
-.footer__inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0;
-    width: 760px;
-    max-width: 100%;
-}
-@media (max-width: 899px) {
-    .footer__inner {
-        flex-direction: column;
-    }
-}
-.footer a {
-    color: inherit;
-}
-.footer .copyright {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 1rem;
-}
-.footer .copyright--user {
-    margin: auto;
-    text-align: center;
-}
-.footer .copyright > *:first-child:not(:only-child) {
-    margin-right: 10px;
-}
-@media (max-width: 899px) {
-    .footer .copyright > *:first-child:not(:only-child) {
-        border: none;
-        padding: 0;
-        margin: 0;
-    }
-}
-@media (max-width: 899px) {
-    .footer .copyright {
-        flex-direction: column;
-        margin-top: 10px;
-    }
-}
-@media (max-width: 899px) {
-    .footer .copyright-theme-sep {
-        display: none;
-    }
-}
-@media (max-width: 899px) {
-    .footer .copyright-theme {
-        font-size: 0.75rem;
-    }
-}
-
 div.homepage {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));

lib/jol_web/components/layouts/app.html.heex

@@ -33,11 +33,8 @@
   </div>
 
   <footer class="footer">
-    <div class="footer__inner">
       <div class="copyright copyright--user">
-        Built with trans dork love.
-      </div>
+        <a href={~p"/colophon/"}>Built with</a> trans dork love.
       </div>
   </footer>
 </div>
-

lib/jol_web/controllers/page_controller.ex

@@ -9,13 +9,16 @@ defmodule JOLWeb.PageController do
 
   def about(conn, _params) do
     conn
-    |> assign(:page_title, "About Jessica")
-    |> render(:about)
+    |> render(:about, page_title: "The Life and Times of Jessica Phoenix Canady")
   end
 
   def now(conn, _params) do
     conn
-    |> assign(:page_title, "Current Status")
-    |> render(:now)
+    |> render(:now, page_title: "Current Status")
+  end
+
+  def colophon(conn, _params) do
+    conn
+    |> render(:colophon, page_title: "about:jol")
   end
 end

lib/jol_web/controllers/page_html/colophon.html.heex

@@ -0,0 +1,27 @@
+<h1 class="post-title">about:jol</h1>
+
+<h2>The Software</h2>
+
+<p>
+Jessica OnLine is pwoered by a <a href="https://forge.sigill.zone/phoenix/jol/">custom Elixir/Phoenix application</a>. Feel free to look through the implementation and take what makes sense for you -- not all of it will even be <em>good</em>, let alone correct for what you want to do, but hopefully it's helpful.
+</p>
+
+<p>
+The point of the app is to find the sweet spot between "easy to update but overly complex to manage and style" Wordpress, and "Markup rules until I have to upload images" static site generators.
+</p>
+
+<h2>The Editor</h2>
+
+<p>
+Mostly written in <a href="https://www.gnu.org/software/emacs/">Emacs</a> with the <a href="https://github.com/doomemacs/doomemacs">DOOM</a> configuration framework, which pre-configures Magit and evil-mode and a bunch of amazing tools.
+</p>
+
+<p>
+If you're not into editors older than you are, try <a href="https://zed.dev">Zed</a>, a modern editor that's fast and extensible. As a JOL-approved application you can find the demo version on the installation medium you were sent.
+</p>
+
+<h2>Font</h2>
+
+<p>
+Displayed in the beautiful <a href="https://berkeleygraphics.com/typefaces/berkeley-mono/">Berkeley Mono</a> typeface by Berkeley Graphics. Unless you're reading in an RSS reader, a browser's reader mode, or you've defined custom fonts (does anyone still do that? Do browsers even still let you?)
+</p>

lib/jol_web/router.ex

@@ -25,6 +25,7 @@ defmodule JOLWeb.Router do
     get "/archive", PageController, :archive
     get "/about", PageController, :about
     get "/now", PageController, :now
+    get "/colophon", PageController, :colophon
 
     get "/tags", TagController, :index
     get "/tags/:tag", TagController, :tag