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,6 +12,7 @@ $# 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/>.
 
+<header>
   $maybe (Entity _pid person, verified, sharer, unread) <- mperson
     <div>
       $if verified
@@ -85,6 +86,7 @@ $if federationDisabled
     $forall (_status, msg) <- msgs
       <div .message>#{msg}
 
+<main role="main">
   ^{widget}
 
 <footer>