various improvements

- use flex for the footer
- remove the seasonal banner
- make the cookie notif floating

_includes/footer.html

@@ -1,14 +1,12 @@
-<!-- Seasonal banner -->
-<a id="banner" class="rounded-top" hidden></a>
-<script src="/scripts/banner.js"></script>
-
 <!-- Footer -->
 <div class="footer rounded-top">
-    <a href="https://git.ellpeck.de/Ellpeck/Web">&copy; 2018-2024 Ellpeck</a> &ndash; <a href="/impressum">Impressum</a> &ndash; <a href="/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a>
+    <div class="footer-section">
-    <div class="quote">
+        <a href="https://git.ellpeck.de/Ellpeck/Web">&copy; 2018-2024 Ellpeck</a> &ndash; <a href="/impressum">Impressum</a> &ndash; <a href="/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a>
-        <span id="quote-text"></span>
+    </div>
+    <div class="footer-section" style="text-align: right;">
+        <span id="quote-text" style="margin-right: 10px;"></span>
         <script src="/scripts/quote.js"></script>
-        <img src="/res/blobheart.png" id="blobheart" alt="A blob emoji holding a heart">
+        <img src="/res/blobheart.png" id="blobheart" alt="A blob emoji holding a heart" width="30" height="30">
         <script>
             $("#blobheart").on("click", () => $("#navbar-image").attr("src", "res/heart.jpeg"));
         </script>

_layouts/default.html

@@ -52,14 +52,13 @@
 
     {% include nav/navbar.html %}
 
+    <!-- Cookie notification -->
+    <div id="cookieinfo"></div>
+    <script src="/scripts/cookieinfo.js"></script>
+
     <!-- Content -->
     <div class="container main">
-        <!-- Cookie notification -->
+        {{ content }}
-        <div id="cookieinfo"></div>
-        <script src="/scripts/cookieinfo.js"></script>
-        <div id="main">
-            {{ content }}
-        </div>
     </div>
 
     {% include footer.html %}

scripts/banner.js

@@ -1,18 +0,0 @@
-let date = new Date();
-if (date.getMonth() + 1 === 6) {
-    setBanner("pride", "It's Pride Month! Consider donating to charities like Outright International.", "https://outrightinternational.org/");
-} else if (date.getMonth() + 1 === 2) {
-    setBanner("blm", "It's Black History Month! Consider donating to charities like Black Lives Matter.", "https://blacklivesmatter.com/");
-} else if (date.getMonth() + 1 === 3) {
-    setBanner("women", "It's Women's History Month! Consider donating to charities like the Global Fund for Women.", "https://www.globalfundforwomen.org/");
-} else if (date.getMonth() + 1 === 4 && date.getDate() <= 4) {
-    setBanner("autism", "It's Autism Awareness Week! Consider donating to charities like the ASAN.", "https://autisticadvocacy.org/");
-}
-
-function setBanner(name, desc, link) {
-    let banner = $("#banner");
-    banner.html(desc);
-    banner.prop("href", link);
-    banner.css("background-image", `url(/res/${name}.png)`);
-    banner.removeAttr("hidden");
-}

style/style.css

@@ -1,14 +1,14 @@
 html {
     scroll-padding-top: 136px;
     position: relative;
-    min-height: 100%;
 }
 
 body {
-    margin-top: 106px;
     font-family: "Roboto", sans-serif;
     background-color: #e1e1e1;
-    margin-bottom: 100px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
 code {
@@ -21,8 +21,9 @@ h1, h2, h3, h4, h5, h6, .nav-item {
 }
 
 .main {
-    margin-top: 20px;
+    margin-top: 66px;
     margin-bottom: 40px;
+    flex: 1;
 }
 
 .list-display {
@@ -35,14 +36,6 @@ h1, h2, h3, h4, h5, h6, .nav-item {
     background-color: white;
 }
 
-.alert {
-    max-width: 850px;
-    display: block;
-    margin-top: 40px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
 .project {
     margin-top: 50px;
 }
@@ -140,32 +133,21 @@ h1, h2, h3, h4, h5, h6, .nav-item {
 }
 
 .footer {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
     margin-left: auto;
     margin-right: auto;
+    width: 100%;
     max-width: 1000px;
     background-color: #f8f9fa;
-    padding-left: 15px;
+    padding: 0.5em 15px;
-    padding-right: 15px;
+    display: flex;
-    overflow: auto;
+    flex-direction: row;
-    height: 60px;
-    line-height: 60px;
 }
 
-.quote {
+.footer-section {
-    float: right;
+    margin-top: 0.5em;
-}
+    margin-bottom: 0.5em;
-
+    flex: 1;
-#quote-text {
+    align-self: center;
-    margin-right: 10px;
-}
-
-#blobheart {
-    width: 30px;
-    height: 30px;
 }
 
 .card-link {
@@ -213,23 +195,6 @@ hr {
     border-top: 2px solid rgba(0, 0, 0, 0.2);
 }
 
-#banner {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1000px;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    background-size: contain;
-    color: white;
-    text-shadow: -1px -1px 5px black, 1px -1px 5px black, -1px 1px 5px black, 1px 1px 5px black;
-    overflow: auto;
-}
-
 .highlight {
     border-radius: 10px;
 }
@@ -255,14 +220,24 @@ pre.highlight {
     border-top: 2px solid rgba(0, 0, 0, 0.2);
 }
 
+#cookieinfo {
+    position: fixed;
+    top: 86px;
+    left: 0;
+    right: 0;
+    max-width: 650px;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 500;
+}
+
 @media (max-width: 768px) {
     .container {
         max-width: none;
     }
 
     .list-display,
-    .jumbotron,
+    .jumbotron {
-    .alert {
         width: auto;
         padding-left: 20px;
         padding-right: 20px;
@@ -294,4 +269,12 @@ pre.highlight {
         margin-right: calc(35px - 1.25rem);
     }
 
+    .footer {
+        flex-direction: column;
+    }
+
+    .footer-section {
+        width: 100%;
+    }
+
 }