Merge pull request 'fix/card-sizing' (#9) from fix/card-sizing into main

Reviewed-on: #9

_config.ts

@@ -46,6 +46,7 @@ site.loadAssets([ ".js" ]);
 
 site.copy("fonts");
 site.copy("img");
+site.copy("favicon.ico");
 
 site.filter("title", (value = '') => value + (value ? " | " : "") + "MiOM");
 

_includes/default.vto

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>{{ title |> title |> safe }}</title>
 
-    <link rel="shortcut icon" href="/favicon.png" />
+    <link rel="shortcut icon" href="/favicon.ico" />
 
     <meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
     <meta name="description" content="MiOM Kreativraum is a creative space in Cologne, Germany">

_includes/homepage.vto

@@ -8,7 +8,7 @@
         <source media="(min-width: 800px) and (max-width: 1400)" srcset="/img/logo-500.jpg" />
         <source media="(min-width: 1401px) and (max-width: 1899px)" srcset="/img/logo-700.jpg" />
         <source media="(min-width: 1900px)" srcset="/img/logo-1000.jpg" />
-        <img class="mi-logo--img" src="/img/logo-1000.jpg" alt="MiOM Logo" />
+        <img class="mi-logo--img" src="/img/logo-500.jpg" alt="MiOM Logo" />
       </picture>
     </div>
 
@@ -26,12 +26,14 @@
           <source media="(min-width: 501px)" srcset="/img/home-{{ card.image.url }}-700.jpg" />
           <img
             class="mi-card--background"
-            src="/img/home-{{ card.image.url }}-700.jpg"
+            src="/img/home-{{ card.image.url }}-500.jpg"
             alt="{{ card.image.alt }}"
           />
         </picture>
         <div class="mi-card--text">{{ card.text }}</div>
       </a>
     {{ /for }}
+
   </main>
+  <div class="mi-page-filler"></div>
 {{ /layout }}

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) {