From: Alyssa Ross <hi@alyssa.is>
To: ~qaul/community@lists.sr.ht
Cc: Katharina Fey <kookie@spacekookie.de>
Subject: [PATCH 3/3] docs/website: pin footer to bottom of viewport
Date: Fri, 26 Feb 2021 13:56:38 +0000
Message-Id: <20210226135638.2560-1-hi@alyssa.is>
In-Reply-To: <20210226135046.32283-1-hi@alyssa.is>
References: <20210226135046.32283-1-hi@alyssa.is>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit

Previously, the footer would show up immediately after the content on
short pages, so it would appear in the middle of the page, with blank
space after it.  We can solve that by making all blocks (apart from
the header and footer) grow equally until they've filled up the page,
making sure the footer is no higher than the bottom of the window.

We have to set align-items center, or otherwise the content will
appear at the top of a stretched block, which looks fine on a page
with just a single stretched block, but not so good on a page with
several like the home page.
---

This patch is similar to Milan's patch[1], but it also makes the
stretched blocks center their contents as described above.  I also
have to reset flex-grow on the header and footer because of the shared
"block" class I introduced earlier in this series.

[1]: https://lists.sr.ht/~qaul/community/%3C20210226131524.12552-1-milan%40petabyte.dev%3E

 docs/website/themes/qaul-theme/static/css/qaul.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/website/themes/qaul-theme/static/css/qaul.css b/docs/website/themes/qaul-theme/static/css/qaul.css
index 47ff119c..ebd6290e 100644
--- a/docs/website/themes/qaul-theme/static/css/qaul.css
+++ b/docs/website/themes/qaul-theme/static/css/qaul.css
@@ -5,6 +5,7 @@ body {
     font-family: sans-serif;
     background: #e0e2e2;
     font-weight: 300;
+    min-height: 100vh;
 }
 
 strong {
@@ -27,11 +28,14 @@ p,li {
 
 .block {
     display: flex;
+    flex-grow: 1;
     justify-content: center;
+    align-items: center;
     padding: 2em;
 }
 
 header.block, footer.block {
+    flex-grow: 0;
     background: black;
     color: #EFEFEF;
 }
-- 
2.30.0