404 page + snap footer to bottom
This commit is contained in:
parent
ab64aa8384
commit
b5bccfda52
3 changed files with 35 additions and 14 deletions
|
@ -29,10 +29,9 @@
|
|||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||
"Helvetica Neue", sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
|
@ -41,8 +40,11 @@ body {
|
|||
background-color: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
|
||||
margin: 3rem;
|
||||
margin-top: 0;
|
||||
/* allows the footer to always snap to bottom of page, even if the content is shorter */
|
||||
margin: 0 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -165,8 +167,7 @@ header {
|
|||
}
|
||||
|
||||
nav {
|
||||
transition:
|
||||
max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
|
||||
transition: max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
|
||||
margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
|
||||
overflow-y: hidden;
|
||||
height: auto;
|
||||
|
@ -268,9 +269,7 @@ nav {
|
|||
margin-bottom: 0.4em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: underline 0.15em var(--main-text-color);
|
||||
transition:
|
||||
text-decoration-color 0.3s,
|
||||
color 0.25s;
|
||||
transition: text-decoration-color 0.3s, color 0.25s;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
|
@ -283,6 +282,8 @@ nav {
|
|||
/* main grid */
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
|
||||
display: grid;
|
||||
grid-template: ". content ." auto / 1fr minmax(min-content, 45rem) 1fr;
|
||||
|
||||
|
@ -302,6 +303,7 @@ footer {
|
|||
text-align: center;
|
||||
padding-top: 1.5em;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid transparent;
|
||||
border-image: linear-gradient(
|
||||
|
|
6
templates/404.html
Normal file
6
templates/404.html
Normal 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 %}
|
|
@ -1,4 +1,4 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<!-- prettier-ignore -->
|
||||
{% if page.title %} {% set title = page.title %}
|
||||
<!-- prettier-ignore -->
|
||||
|
@ -22,6 +22,11 @@
|
|||
{% else %} {% set description = "" %}
|
||||
<!-- prettier-ignore -->
|
||||
{% endif %}
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
{% if page.content %} {% set content = page.content %}
|
||||
<!-- prettier-ignore -->
|
||||
{% endif %}
|
||||
<html lang="{{ config.default_language }}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
@ -101,8 +106,16 @@
|
|||
</header>
|
||||
<main id="main-content">
|
||||
<section class="main-text">
|
||||
{% if section %} {{ section.content | safe }} {% else %} {{ page.content
|
||||
| safe }} {% endif %}
|
||||
<!-- prettier-ignore -->
|
||||
{% block content %}
|
||||
<!-- prettier-ignore -->
|
||||
{% if section %} {{ section.content | safe }}
|
||||
<!-- prettier-ignore -->
|
||||
{% else %} {{ page.content | safe }}
|
||||
<!-- prettier-ignore -->
|
||||
{% endif %}
|
||||
<!-- prettier-ignore -->
|
||||
{% endblock content %}
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
Loading…
Add table
Reference in a new issue