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,80 +12,82 @@ $# 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>
-  <div>
+  $maybe (Entity _pid person, verified, sharer, unread) <- mperson
-    $if verified
+    <div>
-      <span>
+      $if verified
-        [You are logged in as
-        <span .username>#{personLogin person}</span>]
-      $if unread > 0
         <span>
-          <a href=@{NotificationsR $ sharerIdent sharer}>
+          [You are logged in as
-            🔔#{unread}
+          <span .username>#{personLogin person}</span>]
+        $if unread > 0
+          <span>
+            <a href=@{NotificationsR $ sharerIdent sharer}>
+              🔔#{unread}
+        <span>
+          <a href=@{SharerInboxR $ sharerIdent sharer}>
+            [📥 Inbox]
+        <span>
+          <a href=@{SharerOutboxR $ sharerIdent sharer}>
+            [📤 Outbox]
+        <span>
+          <a href=@{SharerFollowersR $ sharerIdent sharer}>
+            [🐤 Followers]
+        <span>
+          <a href=@{SharerFollowingR $ sharerIdent sharer}>
+            [🐔 Following]
+        <span>
+          <a href=@{BrowseR}>
+            [📚 Browse projects]
+        <span>
+          <a href=@{PublishR}>
+            [📣 Publish an activity]
+        <span>
+          <a href=@{AuthR LogoutR}>
+            [🚪 Log out]
+      $else
+        <span>
+          You are logged in as #{personLogin person} (unverified). If you haven't
+          received a verification link by email, you can ask to
+          <a href=@{ResendVerifyEmailR}>resend
+          it. Or <a href=@{AuthR LogoutR}>Log out.
+        $if unread > 0
+          <span>
+            <a href=@{NotificationsR $ sharerIdent sharer}>
+              🔔#{unread}
+  $nothing
+    <div>
+      You are not logged in.
+      <a href=@{AuthR LoginR}>Log in.
+      Or
+      <a href=@{AuthR newAccountR}>Sign up.
+
+  $if federationDisabled
+    <p>
       <span>
-        <a href=@{SharerInboxR $ sharerIdent sharer}>
+        NOTE: Federation is disabled on this instance!
-          [📥 Inbox]
+    $if null federatedServers
       <span>
-        <a href=@{SharerOutboxR $ sharerIdent sharer}>
+        You can test federation between other instances.
-          [📤 Outbox]
-      <span>
-        <a href=@{SharerFollowersR $ sharerIdent sharer}>
-          [🐤 Followers]
-      <span>
-        <a href=@{SharerFollowingR $ sharerIdent sharer}>
-          [🐔 Following]
-      <span>
-        <a href=@{BrowseR}>
-          [📚 Browse projects]
-      <span>
-        <a href=@{PublishR}>
-          [📣 Publish an activity]
-      <span>
-        <a href=@{AuthR LogoutR}>
-          [🚪 Log out]
     $else
       <span>
-        You are logged in as #{personLogin person} (unverified). If you haven't
+        You can test federation between the following instances:
-        received a verification link by email, you can ask to
+      <ul>
-        <a href=@{ResendVerifyEmailR}>resend
+        $forall h <- federatedServers
-        it. Or <a href=@{AuthR LogoutR}>Log out.
+          <li>
-      $if unread > 0
+            <code>
-        <span>
+              #{h}
-          <a href=@{NotificationsR $ sharerIdent sharer}>
-            🔔#{unread}
-$nothing
-  <div>
-    You are not logged in.
-    <a href=@{AuthR LoginR}>Log in.
-    Or
-    <a href=@{AuthR newAccountR}>Sign up.
 
-$if federationDisabled
+  <.instance>
-  <p>
+    Vervis @ #{renderAuthority instanceHost}
-    <span>
-      NOTE: Federation is disabled on this instance!
-  $if null federatedServers
-    <span>
-      You can test federation between other instances.
-  $else
-    <span>
-      You can test federation between the following instances:
-    <ul>
-      $forall h <- federatedServers
-        <li>
-          <code>
-            #{h}
 
-<.instance>
+  ^{breadcrumbsW}
-  Vervis @ #{renderAuthority instanceHost}
 
-^{breadcrumbsW}
+  <div #messages>
+    $forall (_status, msg) <- msgs
+      <div .message>#{msg}
 
-<div #messages>
+<main role="main">
-  $forall (_status, msg) <- msgs
+  ^{widget}
-    <div .message>#{msg}
-
-^{widget}
 
 <footer>
   ^{revisionW}