From c1acb631fffdb87588df014d6c1ad4365815dc07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Yule=20B=C3=A4dorf?= <git@benjaminbaedorf.eu>
Date: Sun, 14 Apr 2024 15:47:54 +0200
Subject: [PATCH] homepage: fix black box below cards on certain screen sizes

---
 _includes/homepage.vto |  2 ++
 styles.css             | 10 +++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/_includes/homepage.vto b/_includes/homepage.vto
index d5ec444..de417b6 100644
--- a/_includes/homepage.vto
+++ b/_includes/homepage.vto
@@ -33,5 +33,7 @@
         <div class="mi-card--text">{{ card.text }}</div>
       </a>
     {{ /for }}
+
   </main>
+  <div class="mi-page-filler"></div>
 {{ /layout }}
diff --git a/styles.css b/styles.css
index 0ea429f..96fb937 100644
--- a/styles.css
+++ b/styles.css
@@ -69,6 +69,13 @@ h4 {
   width: 100vw;
 }
 
+.mi-page-filler {
+  width: 100%;
+  padding: 0;
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
 .mi-border {
   pointer-events: none;
   z-index: 10;
@@ -317,7 +324,7 @@ h4 {
 .mi-main {
   background: var(--background);
   margin: 0 var(--box-padding);
-  flex-grow: 1;
+  flex-grow: 0;
   position: relative;
   margin-bottom: var(--box-padding);
 }
@@ -346,6 +353,7 @@ h4 {
   background: var(--foreground);
   grid-gap: 1px;
   grid-template-columns: 1fr;
+  padding-bottom: 1px;
 }
 
 @media screen and (min-width: 800px) {