improved the footer

web/_includes/footer.html

@@ -0,0 +1,30 @@
+<div class="footer bg-light">
+    <script>
+        if (darkTheme) {
+            let footer = $(".footer");
+            footer.removeClass("bg-light");
+            footer.addClass("bg-dark");
+        }
+    </script>
+
+    <div class="footer-content">
+        <div class="footer-section">
+            <a href="https://hier-spielt-vielfalt.de/en/">
+                <img id="hsv-image" src="/media/hsv_light.png" alt="The #TeamDiversity logo" height="50">
+            </a>
+            <script>
+                if (darkTheme)
+                    $("#hsv-image").attr("src", "/media/hsv_dark.png");
+            </script>
+        </div>
+        <div class="footer-section">
+            &copy; 2021-2024 <a href="https://games.ellpeck.de">Ellpeck Games</a><br>
+            Published by <a href="https://tophat.studio/">Top Hat Studios</a><br>
+        </div>
+        <div class="footer-section">
+            <a href="https://ellpeck.de/impressum">Impressum</a><br>
+            <a href="https://ellpeck.de/privacy">Privacy</a><br>
+            <a href="https://status.ellpeck.de">Status</a>
+        </div>
+    </div>
+</div>

web/_layouts/default.html

@@ -54,19 +54,11 @@
     {% include navbar.html %}
     {% include cookie.html %}
 
-    {{ content }}
-
-    <div class="footer bg-light">
-        <script>
-            if (darkTheme) {
-                let footer = $(".footer");
-                footer.removeClass("bg-light");
-                footer.addClass("bg-dark");
-            }
-        </script>
-
-        <a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021-2024</a> <a href="https://games.ellpeck.de">Ellpeck Games</a>, <a href="https://tophat.studio/">Top Hat Studios</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a>
+    <div class="content">
+        {{ content }}
     </div>
+
+    {% include footer.html %}
 </body>
 
 </html>

web/style.css

@@ -1,12 +1,13 @@
 html {
     scroll-padding-top: 70px;
     position: relative;
-    min-height: 100%;
 }
 
 body {
     font-family: "Lato", sans-serif;
-    margin-bottom: 100px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6, .nav-item {
@@ -29,6 +30,10 @@ pre.highlight {
     padding: 10px;
 }
 
+.content {
+    flex: 1;
+}
+
 .navbar-container {
     max-width: 850px;
 }
@@ -131,16 +136,25 @@ a:visited.wide-link {
 }
 
 .footer {
-    text-align: center;
     padding: 15px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    width: 100%;
+}
+
+.footer-content {
+    max-width: 850px;
     margin-left: auto;
     margin-right: auto;
 }
 
+.footer-section {
+    width: 33%;
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
 .devlog {
     min-width: 250px;
     width: calc(50% - 2px);
@@ -257,6 +271,10 @@ body.dark-mode hr {
 
 @media (max-width: 576px) {
 
+    .footer-section {
+        width: 100%;
+    }
+
     .top-content {
         max-width: 90%;
     }