Add site footer

pug/home.pug

@@ -13,7 +13,3 @@ block content
       form(method="get" action="/search").encouraging-search-form
         input(type="text" name="q" placeholder="I'd like to watch..." autocomplete="off" autofocus=!mobile).search.base-border-look
       p: a(href="/cant-think") ...can't think of anything?
-
-    .encouraging-message
-      p CloudTube gets better with your help. I can't deal with issues that I don't know about.
-      p: a(href="https://todo.sr.ht/~cadence/tube") Report a problem or missing feature

pug/includes/layout.pug

@@ -26,3 +26,19 @@ html
           input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search
 
     block content
+
+    footer.footer__container
+      div.footer__center
+        p Released as AGPL free software.
+        .footer__cols
+          div
+            h3.footer__colhead Source
+            ul.footer__list
+              li: a(href="https://sr.ht/~cadence/tube") Project hub
+              li: a(href="https://lists.sr.ht/~cadence/tube-announce") Announcements
+              li: a(href="https://todo.sr.ht/~cadence/tube") Report a problem
+          div
+            h3.footer__colhead About
+            ul.footer__list
+              // li: a(href="/privacy") Privacy policy
+              // li: a(href="/js-licenses") JavaScript licenses

sass/includes/base.sass

@@ -7,6 +7,10 @@ body
   font-size: 18px
   margin: 0
   padding: 0
+  // for footer alignment
+  min-height: 100vh
+  display: flex
+  flex-direction: column
 
 a
   color: c.$link

sass/includes/footer.sass

@@ -0,0 +1,32 @@
+@use "./colors.sass" as c
+
+.footer__container
+  flex: 1
+  display: grid
+  align-items: end
+  line-height: 1.5
+
+.footer__center
+  display: flex
+  flex-direction: column
+  align-items: center
+  background-color: c.$bg-darkest
+  margin: 40px 0 0
+  padding: 10px 10px 30px
+
+.footer__cols
+  display: flex
+  gap: 16px
+  justify-content: center
+
+  @media screen and (max-width: 600px)
+    display: grid
+
+.footer__colhead
+  font-weight: normal
+  font-size: 1em
+  margin: 0 0 8px
+
+.footer__list
+  padding-left: 24px
+  margin: 0

sass/main.sass

@@ -10,6 +10,7 @@
 @use "includes/cant-think-page.sass"
 @use "includes/forms.sass"
 @use "includes/nav.sass"
+@use "includes/footer.sass"
 
 @font-face
   font-family: "Bariol"