improved the footer

This commit is contained in:
Ell 2024-08-07 18:58:33 +02:00
parent 975b2788f7
commit 388fd32496
5 changed files with 59 additions and 19 deletions

30
web/_includes/footer.html Normal file
View file

@ -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>

View file

@ -54,19 +54,11 @@
{% include navbar.html %} {% include navbar.html %}
{% include cookie.html %} {% include cookie.html %}
{{ content }} <div class="content">
{{ 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> </div>
{% include footer.html %}
</body> </body>
</html> </html>

BIN
web/media/hsv_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
web/media/hsv_light.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View file

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