Rollback 041ec4d

The spacer <div> is required to minimize the <main> height to just fit its content. Without the spacer, <main> will consume the entire screen height and spread its children across the entire height. When there are not enough cards to fill the screen height, this spread results in ugly spacing.

diff --git a/errors/404.html b/errors/404.html
index f6141565d1da9727541cd9b52510210bb59c57e4..514cab62f48ef026c870047f8090e1d1126c67de 100644 (file)
--- a/errors/404.html
+++ b/errors/404.html
@@ -59,6 +59,9 @@
     </a>
   </main>
 
+  <!-- Spacer element -->
+  <div></div>
+
   <footer>
     <address>
       <a href="#"><noscript>ardis [at] ardislu [dot] dev</noscript></a>

diff --git a/index.html b/index.html
index 8ee73ecf5553b7ff4d81b36c5c0595f1083ee792..7cbc090599597aefad0fb7e756d90df39f9aeeee 100644 (file)
--- a/index.html
+++ b/index.html
@@ -88,6 +88,9 @@
     </noscript>
   </main>
 
+  <!-- Spacer element -->
+  <div></div>
+
   <footer>
     <div class="footer-links">
       <a id="edit" href="/">

diff --git a/style.css b/style.css
index bf54125749b1570482cb0b9d528aa634d16843f5..c7b37cc3c1572b1c3db9fdfc4b63edd093a91aa8 100644 (file)
--- a/style.css
+++ b/style.css
@@ -6,7 +6,7 @@ html {
 
 body {
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto auto 1fr auto;
   min-block-size: 100dvh;
   color: hsl(0deg 0% 15%);
   background: radial-gradient(circle at top, hsl(216deg 10% 95%), hsl(216deg 15% 90%) 40%);