infra/website
2
0
Fork 0
Code Issues Pull requests Activity Actions

404 page + snap footer to bottom

Browse source
This commit is contained in:
kleines Filmröllchen 2025-05-13 14:59:02 +02:00
parent ab64aa8384
commit b5bccfda52
Signed by: filmroellchen
SSH key fingerprint: SHA256:NarU6J/XgCfEae4rbei0YIdN2pYaYDccarK6R53dnc8
3 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
static/main.css
View file

@ -29,10 +29,9 @@
} }
body { body {
margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
"Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -41,8 +40,11 @@ body {
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
color: var(--main-text-color); color: var(--main-text-color);
margin: 3rem; /* allows the footer to always snap to bottom of page, even if the content is shorter */
margin-top: 0; margin: 0 3rem;
display: flex;
flex-direction: column;
min-height: 100vh;
} }
a { a {
@ -165,8 +167,7 @@ header {
} }
nav { nav {
transition: transition: max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
margin 0.2s cubic-bezier(0.86, 0, 0.07, 1); margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
overflow-y: hidden; overflow-y: hidden;
height: auto; height: auto;
@ -268,9 +269,7 @@ nav {
margin-bottom: 0.4em; margin-bottom: 0.4em;
text-transform: uppercase; text-transform: uppercase;
text-decoration: underline 0.15em var(--main-text-color); text-decoration: underline 0.15em var(--main-text-color);
transition: transition: text-decoration-color 0.3s, color 0.25s;
text-decoration-color 0.3s,
color 0.25s;
&:focus, &:focus,
&:hover { &:hover {
@ -283,6 +282,8 @@ nav {
/* main grid */ /* main grid */
main { main {
flex: 1;
display: grid; display: grid;
grid-template: ". content ." auto / 1fr minmax(min-content, 45rem) 1fr; grid-template: ". content ." auto / 1fr minmax(min-content, 45rem) 1fr;
@ -302,6 +303,7 @@ footer {
text-align: center; text-align: center;
padding-top: 1.5em; padding-top: 1.5em;
margin-top: 1.5em; margin-top: 1.5em;
margin-bottom: 1.5em;
font-weight: bold; font-weight: bold;
border-top: 2px solid transparent; border-top: 2px solid transparent;
border-image: linear-gradient( border-image: linear-gradient(

6
templates/404.html Normal file
View file

@ -0,0 +1,6 @@
{% extends "page.html" %}
{% block content %}
<h1>404 Unavailable for URL Reasons</h1>
<p>Diese Seite gibt es nicht. Vielleicht ist sie im Cyber verschwunden. <a href="{{ get_url(path='/') }}">Zurück zur Startseite</a>.</p>
{% endblock content %}

19
templates/page.html
View file

@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% if page.title %} {% set title = page.title %} {% if page.title %} {% set title = page.title %}
<!-- prettier-ignore --> <!-- prettier-ignore -->
@ -22,6 +22,11 @@
{% else %} {% set description = "" %} {% else %} {% set description = "" %}
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% endif %} {% endif %}
<!-- prettier-ignore -->
{% if page.content %} {% set content = page.content %}
<!-- prettier-ignore -->
{% endif %}
<html lang="{{ config.default_language }}"> <html lang="{{ config.default_language }}">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -101,8 +106,16 @@
</header> </header>
<main id="main-content"> <main id="main-content">
<section class="main-text"> <section class="main-text">
{% if section %} {{ section.content | safe }} {% else %} {{ page.content <!-- prettier-ignore -->
| safe }} {% endif %} {% block content %}
<!-- prettier-ignore -->
{% if section %} {{ section.content | safe }}
<!-- prettier-ignore -->
{% else %} {{ page.content | safe }}
<!-- prettier-ignore -->
{% endif %}
<!-- prettier-ignore -->
{% endblock content %}
</section> </section>
</main> </main>
<footer> <footer>