branch master updated: Improve footer display.

[Mathieu Othacehe]

This is an automated email from the git hooks/post-receive script.

mothacehe pushed a commit to branch master
in repository guix-cuirass.

The following commit(s) were added to refs/heads/master by this push:
     new 7c5b788  Improve footer display.
7c5b788 is described below

commit 7c5b788029f0290a2fb3aa3c96c6f1947f9bbcb9
Author: Mathieu Othacehe <othacehe@gnu.org>
AuthorDate: Sat Mar 27 10:38:36 2021 +0100

    Improve footer display.
---
 src/cuirass/templates.scm  |  5 ++---
 src/static/css/cuirass.css | 29 +++++++++++++++++++----------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/cuirass/templates.scm b/src/cuirass/templates.scm
index 2d55941..c994206 100644
--- a/src/cuirass/templates.scm
+++ b/src/cuirass/templates.scm
@@ -197,9 +197,8 @@ columnDefs: [
                                Home))
                         ,@(navigation-items navigation)))
                ,(search-form query))
-          (main (@ (role "main") (class "container pt-4 px-1"))
-                ,body
-                (hr))
+          (div (@ (class "container content"))
+               ,body)
           (footer
            (@ (class "footer text-center"))
            (p (a (@ (href "http://guix.gnu.org/cuirass/";))
diff --git a/src/static/css/cuirass.css b/src/static/css/cuirass.css
index 3cf7a66..3984b80 100644
--- a/src/static/css/cuirass.css
+++ b/src/static/css/cuirass.css
@@ -1,3 +1,20 @@
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+    flex: 1 0 auto;
+    padding: 1em;
+}
+
 #search input:focus {
     width: 500px;
 }
@@ -44,16 +61,8 @@ a.dropdown-toggle:focus + .dropdown-menu {
     content: none;
 }
 
-body {
-  margin-bottom: 60px; /* Margin bottom by footer height */
-}
-
 .footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 50px; /* Set the fixed height of the footer here */
-  line-height: 60px; /* Vertically center the text there */
-  background-color: #f5f5f5;
+    flex-shrink: 0;
+    background-color: #f5f5f5;
 }