konstantin/iamkonstantin
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

feat: add footer, header and improve layout

Browse source
This commit is contained in:
Konstantin 2024-03-01 11:55:17 +01:00
parent 72bf6bffb8
commit 6fd74833a3
17 changed files with 305 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

3
iamkonstantin_web/settings/base.py
View file

@ -24,9 +24,11 @@ BASE_DIR = os.path.dirname(PROJECT_DIR)
# Application definition
INSTALLED_APPS = [
"base",
"blog",
"home",
"search",
"wagtail.contrib.settings",
"wagtail.contrib.forms",
"wagtail.contrib.redirects",
"wagtail.embeds",
@ -74,6 +76,7 @@ TEMPLATES = [
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
"wagtail.contrib.settings.context_processors.settings"
],
},
},

45
iamkonstantin_web/static/css/iamkonstantin_web.css
View file

@ -0,0 +1,45 @@
*,
::before,
::after {
box-sizing: border-box;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body {
min-height: 100vh;
max-width: 800px;
margin: 0 auto;
padding: 10px;
display: grid;
gap: 3vw;
grid-template-rows: min-content 1fr min-content;
}
a {
color: currentColor;
}
footer {
border-top: 2px dotted;
text-align: center;
}
header {
border-bottom: 2px dotted;
}
.template-homepage main {
text-align: center;
}
.skip-link {
position: absolute;
top: -30px;
}
.skip-link:focus-visible {
top: 5px;
}

71
iamkonstantin_web/templates/base.html
View file

@ -1,46 +1,57 @@
{% load static wagtailcore_tags wagtailuserbar %}
{% load static wagtailcore_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
{% block title %}
<head>
<meta charset="utf-8"/>
<title>
{% block title %}
{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}
{% endblock %}
{% block title_suffix %}
{% endblock %}
{% block title_suffix %}
{% wagtail_site as current_site %}
{% if current_site and current_site.site_name %}- {{ current_site.site_name }}{% endif %}
{% endblock %}
</title>
{% if page.search_description %}
<meta name="description" content="{{ page.search_description }}" />
{% endif %}
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% endblock %}
</title>
{% if page.search_description %}
<meta name="description" content="{{ page.search_description }}"/>
{% endif %}
<meta name="viewport" content="width=device-width, initial-scale=1"/>
{# Force all links in the live preview panel to be opened in a new tab #}
{% if request.in_preview_panel %}
{# Force all links in the live preview panel to be opened in a new tab #}
{% if request.in_preview_panel %}
<base target="_blank">
{% endif %}
{% endif %}
{# Global stylesheets #}
<link rel="stylesheet" type="text/css" href="{% static 'css/iamkonstantin_web.css' %}">
<meta name="color-scheme" content="light dark">
{% block extra_css %}
<link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍩</text></svg>"/>
{# Global stylesheets #}
<link rel="stylesheet" type="text/css" href="{% static 'css/iamkonstantin_web.css' %}">
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
</head>
{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% wagtailuserbar %}
<body class="{% block body_class %}{% endblock %}">
{% block content %}{% endblock %}
{% include "includes/header.html" %}
{# Global javascript #}
<script type="text/javascript" src="{% static 'js/iamkonstantin_web.js' %}"></script>
<main id="main">
{% block content %}{% endblock %}
</main>
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
</body>
{% include "includes/footer.html" %}
{# Global javascript #}
<script type="text/javascript" src="{% static 'js/iamkonstantin_web.js' %}"></script>
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
</body>
</html>

24
iamkonstantin_web/templates/includes/footer.html Normal file
View file

@ -0,0 +1,24 @@
{% load navigation_tags %}
<footer>
<p>Built with Wagtail</p>
{% with linkedin_url=settings.base.NavigationSettings.linkedin_url github_url=settings.base.NavigationSettings.github_url mastodon_url=settings.base.NavigationSettings.mastodon_url %}
{% if linkedin_url or github_url or mastodon_url %}
<p>
Follow me on:
{% if github_url %}
<a href="{{ github_url }}">GitHub</a>
{% endif %}
{% if linkedin_url %}
<a href="{{ linkedin_url }}">Twitter</a>
{% endif %}
{% if mastodon_url %}
<a href="{{ mastodon_url }}">Mastodon</a>
{% endif %}
</p>
{% endif %}
{% endwith %}
{% get_footer_text %}
</footer>

16
iamkonstantin_web/templates/includes/header.html Normal file
View file

@ -0,0 +1,16 @@
{% load wagtailcore_tags navigation_tags wagtailuserbar %}
<header>
{# Add this: #}
<a href="#main" class="skip-link">Skip to content</a>
{% get_site_root as site_root %}
<nav>
<p>
<a href="{% pageurl site_root %}">{{ site_root.title }}</a> |
{% for menuitem in site_root.get_children.live.in_menu %}
<a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}
{% endfor %}
</p>
</nav>
{% wagtailuserbar "top-right" %}
</header>