added some cool seasonal banners
All checks were successful
Web/pipeline/head This commit looks good

This commit is contained in:
Ell 2021-03-21 20:20:15 +01:00
parent 49558c0f74
commit cbe4a615df
9 changed files with 42 additions and 21 deletions

View file

@ -183,6 +183,10 @@
</div> </div>
</div> </div>
<!-- Seasonal banner -->
<a id="banner" class="rounded-top" hidden></a>
<script src="./scripts/banner.js"></script>
<!-- Footer --> <!-- Footer -->
<div class="footer rounded-top"> <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> <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>

BIN
res/autism.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 937 B

BIN
res/blm.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 178 B

View file

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

16
scripts/banner.js Normal file
View file

@ -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");
}

View file

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

View file

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

View file

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