Add a base template and some exquisite styling

Wow!
This commit is contained in:
Mikkel Munch Mortensen 2018-06-23 20:19:37 +02:00
parent 7f41634987
commit 567babc359
Signed by: decibyte
GPG key ID: 261C257C74AA764B
2 changed files with 129 additions and 0 deletions

View file

@ -0,0 +1,79 @@
/* General styles */
html
{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 2.5vmin;
background: #f8f8f8;
}
body
{
background: #fff;
color: #000;
margin: 1em auto;
max-width: 50em;
padding: 0 1em;
box-shadow: 0 0 2.5em rgba(0, 0, 0, 20%);
}
header,
footer
{
background: #eee;
padding: .5em;
margin: 0 -1em;
}
footer
{
margin-top: 2em;
}
header h1
{
font-size: 1em;
float: left;
padding: .5em .5em;
margin: 0;
}
header ul,
footer ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}
header ul li,
footer ul li
{
display: inline;
}
header ul li a,
footer ul li a
{
display: inline-block;
margin: 0;
padding: .5em .5em;
}
/* Forms */
label
{
display: block;
padding: .5em 0;
}
button,
input,
textarea
{
font-size: inherit;
}

View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>{% block head_title %}{% endblock %} {{ site.name }}</title>
{% block extra_head %}{% endblock %}
<link rel="stylesheet" href="{% static '/css/membersystem.css' %}" type="text/css" />
</head>
<body>
<header>
<h1>
<a href="/">{{ site.name }}</a>
</h1>
<ul>
{% if user.is_authenticated %}
<li><a href="{% url 'account_email' %}">Change e-mail</a></li>
<li><a href="{% url 'account_logout' %}">Sign out</a></li>
{% else %}
<li><a href="{% url 'account_login' %}">Sign in</a></li>
<li><a href="{% url 'account_signup' %}">Sign up</a></li>
{% endif %}
</ul>
</header>
{% block body %}
{% if messages %}
<ul id="messages">
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
{% endif %}
{% block content %}
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
<footer>
<ul>
<li>
<a href="https://data.coop">data.coop</a>
</li>
<li>
<a href="https://git.data.coop/data.coop/membersystem">source code</a>
</li>
</ul>
</footer>
</body>
</html>