added some cool seasonal banners

index.html

@@ -183,6 +183,10 @@
         </div>
     </div>
 
+    <!-- Seasonal banner -->
+    <a id="banner" class="rounded-top" hidden></a>
+    <script src="./scripts/banner.js"></script>
+
     <!-- Footer -->
     <div class="footer rounded-top">
         <span class="text-muted"><a href="https://git.ellpeck.de/Ellpeck/Web">&copy; 2018-2021 Ellpeck</a> &ndash; <a href="#impressum">Impressum</a> &ndash; <a href="#privacy">Privacy</a></span>

scripts/about.js

@@ -82,7 +82,7 @@ for (let question of questions) {
 $('#about-list').html(a);
 
 function getAge() {
-    let birthdayMillis = Date.UTC(1999, 4, 21);
+    let birthdayMillis = Date.UTC(1999, 5 - 1, 21);
     let todayMillis = Date.now();
     let ageSinceStart = new Date(todayMillis - birthdayMillis);
     return ageSinceStart.getUTCFullYear() - 1970;

scripts/banner.js

@@ -0,0 +1,16 @@
+let date = new Date();
+if (date.getMonth() + 1 === 6) {
+    setBanner("pride", "It's Pride Month! Consider donating to charities like The Trevor Project.", "https://www.thetrevorproject.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 === 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.prop("title", desc);
+    banner.prop("href", link);
+    banner.css("background-image", `url(${loc}/res/${name}.png)`);
+    banner.removeAttr("hidden");
+}

scripts/main.js

@@ -1,13 +1,10 @@
 const dark = getCookie("dark") === "true";
-const pride = new Date().getMonth() === 5;
 const loc = $("script").last().attr("src").split("/")[0];
 
 if (dark) {
     addStyle(`${loc}/style/dark.css`);
     addStyle(`${loc}/style/prettify-dark.css`);
 }
-if (pride)
-    addStyle(`${loc}/style/pride.css`);
 
 $(function () {
     openModals(window.location.hash);

style/pride.css

@@ -1,5 +0,0 @@
-.jumbotron {
-    background-image: url("../res/pride.png");
-    background-size: auto 100%;
-    color: black;
-}

style/style.css

@@ -140,11 +140,20 @@ body {
     width: 85%;
 }
 
+.navbar {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1200px;
+}
+
 .footer {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1200px;
     background-color: #f8f9fa;
     padding-left: 15px;
     padding-right: 15px;
@@ -210,18 +219,18 @@ blockquote {
     filter: saturate(130%);
 }
 
-@media (min-width: 1200px) {
+#banner {
-    .navbar {
+    position: fixed;
-        width: 1200px;
+    left: 0;
-        margin-left: auto;
+    right: 0;
-        margin-right: auto;
+    bottom: 0;
-    }
+    margin-left: auto;
-
+    margin-right: auto;
-    .footer {
+    max-width: 1200px;
-        width: 1200px;
+    height: 40px;
-        margin-left: auto;
+    line-height: 40px;
-        margin-right: auto;
+    text-align: center;
-    }
+    background-size: contain;
 }
 
 @media (max-width: 768px) {