UI: Tweak header and footer display, text size, switch to rem

templates/default-layout.cassius

@@ -1,6 +1,6 @@
 /* This file is part of Vervis.
  *
- * Written in 2016 by fr33domlover <fr33domlover@riseup.net>.
+ * Written in 2016, 2022 by fr33domlover <fr33domlover@riseup.net>.
  *
  * ♡ Copying is an act of love. Please copy, reuse and share.
  *
@@ -13,14 +13,42 @@
  * <http://creativecommons.org/publicdomain/zero/1.0/>.
  */
 
+html
+    font-size: 62.5%
+
 body
+    font-size:   1.8rem
     font-family: sans-serif
-    line-height: 1.4
     color:       #{plain}
     background:  #{black}
-    max-width:   1000px
-    padding:     1em
     text-align:  justify
+    margin:      0
+
+header
+    padding: 1.2rem 1.8rem
+    margin: 0 0 3rem
+    background-color: #{dark blue}
+
+footer
+    margin-top: 3rem
+    padding: 1.4rem 1.8rem
+    font-size: 1.4rem
+    background-color: #{dark blue}
+    line-height: 1.5
+
+main
+    max-width: 116rem
+    padding-left: 8rem
+    padding-right: 8rem
+    margin-left: auto
+    margin-right: auto
+p
+    line-height: 1.5
+    margin-bottom: 2.5rem
+    margin-top: 2.5rem
+
+ul
+    line-height: 1.3
 
 a
     color:           #{light blue}
@@ -71,10 +99,10 @@ input:not[type="submit"], select, textarea
 input[type="submit"]
     display: inline-grid
     width: 50%
-    padding:       0.618em
+    padding:       1rem
     grid-column-start: 2
     border:        none
-    border-radius: 0.618em
+    border-radius: 1rem
 
 input:hover[type="submit"]
     background:  #{dark gray}

templates/default-layout.hamlet

@@ -1,6 +1,6 @@
 $# This file is part of Vervis.
 $#
-$# Written in 2016, 2019 by fr33domlover <fr33domlover@riseup.net>.
+$# Written in 2016, 2019, 2022 by fr33domlover <fr33domlover@riseup.net>.
 $#
 $# ♡ Copying is an act of love. Please copy, reuse and share.
 $#
@@ -12,7 +12,8 @@ $# You should have received a copy of the CC0 Public Domain Dedication along
 $# with this software. If not, see
 $# <http://creativecommons.org/publicdomain/zero/1.0/>.
 
-$maybe (Entity _pid person, verified, sharer, unread) <- mperson
+<header>
+  $maybe (Entity _pid person, verified, sharer, unread) <- mperson
     <div>
       $if verified
         <span>
@@ -53,14 +54,14 @@ $maybe (Entity _pid person, verified, sharer, unread) <- mperson
           <span>
             <a href=@{NotificationsR $ sharerIdent sharer}>
               🔔#{unread}
-$nothing
+  $nothing
     <div>
       You are not logged in.
       <a href=@{AuthR LoginR}>Log in.
       Or
       <a href=@{AuthR newAccountR}>Sign up.
 
-$if federationDisabled
+  $if federationDisabled
     <p>
       <span>
         NOTE: Federation is disabled on this instance!
@@ -76,16 +77,17 @@ $if federationDisabled
             <code>
               #{h}
 
-<.instance>
+  <.instance>
     Vervis @ #{renderAuthority instanceHost}
 
-^{breadcrumbsW}
+  ^{breadcrumbsW}
 
-<div #messages>
+  <div #messages>
     $forall (_status, msg) <- msgs
       <div .message>#{msg}
 
-^{widget}
+<main role="main">
+  ^{widget}
 
 <footer>
   ^{revisionW}