various improvements
All checks were successful
/ web (push) Successful in 31s

- use flex for the footer
- remove the seasonal banner
- make the cookie notif floating
This commit is contained in:
Ell 2024-08-14 13:09:09 +02:00
parent 40d9aef3a3
commit c273165944
8 changed files with 45 additions and 83 deletions

View file

@ -1,14 +1,12 @@
<!-- 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">
<div class="footer-section">
<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> <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="quote"> </div>
<span id="quote-text"></span> <div class="footer-section" style="text-align: right;">
<span id="quote-text" style="margin-right: 10px;"></span>
<script src="/scripts/quote.js"></script> <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> <script>
$("#blobheart").on("click", () => $("#navbar-image").attr("src", "res/heart.jpeg")); $("#blobheart").on("click", () => $("#navbar-image").attr("src", "res/heart.jpeg"));
</script> </script>

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 528 B

View file

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

View file

@ -1,14 +1,14 @@
html { html {
scroll-padding-top: 136px; scroll-padding-top: 136px;
position: relative; position: relative;
min-height: 100%;
} }
body { body {
margin-top: 106px;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background-color: #e1e1e1; background-color: #e1e1e1;
margin-bottom: 100px; display: flex;
flex-direction: column;
min-height: 100vh;
} }
code { code {
@ -21,8 +21,9 @@ h1, h2, h3, h4, h5, h6, .nav-item {
} }
.main { .main {
margin-top: 20px; margin-top: 66px;
margin-bottom: 40px; margin-bottom: 40px;
flex: 1;
} }
.list-display { .list-display {
@ -35,14 +36,6 @@ h1, h2, h3, h4, h5, h6, .nav-item {
background-color: white; background-color: white;
} }
.alert {
max-width: 850px;
display: block;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}
.project { .project {
margin-top: 50px; margin-top: 50px;
} }
@ -140,32 +133,21 @@ h1, h2, h3, h4, h5, h6, .nav-item {
} }
.footer { .footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 100%;
max-width: 1000px; max-width: 1000px;
background-color: #f8f9fa; 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 { .card-link {
@ -213,23 +195,6 @@ hr {
border-top: 2px solid rgba(0, 0, 0, 0.2); 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 { .highlight {
border-radius: 10px; border-radius: 10px;
} }
@ -255,14 +220,24 @@ pre.highlight {
border-top: 2px solid rgba(0, 0, 0, 0.2); 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) { @media (max-width: 768px) {
.container { .container {
max-width: none; max-width: none;
} }
.list-display, .list-display,
.jumbotron, .jumbotron {
.alert {
width: auto; width: auto;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@ -294,4 +269,12 @@ pre.highlight {
margin-right: calc(35px - 1.25rem); margin-right: calc(35px - 1.25rem);
} }
.footer {
flex-direction: column;
}
.footer-section {
width: 100%;
}
} }