💄 un-uglify the interface

closes #8.

static/prolefeeder.css

@@ -0,0 +1,32 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+
+  flex-direction: column;
+
+  align-items: center;
+  justify-content: center;
+
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  background-color: #B0C4DE;
+}
+
+.container .form-download {
+  background-color: #f5f5f5;
+
+  box-shadow: 5px 5px 5px grey;
+  border-radius: 3px;
+}
+
+.form-download {
+  width: 100%;
+  max-width: 20rem;
+  margin: 0 auto;
+
+  padding: 2rem;
+}

templates/base.html

@@ -4,29 +4,16 @@
 {% block head %}
     {{ super() }}
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <link rel="stylesheet"    href="{{ url_for('static', filename='prolefeeder.css') }}">
 {% endblock %}
 
 {% block title %}Prolefeeder{% endblock %}
 {% block content %}
-<div class="container">
-    <div class="row">
-        <div class="col">
-            {% block page_header %}{% endblock %}
-            <hr/>
-        </div>
-    </div>
-</div>
-
 
-<div class="container">
-    <div class="row">
-        <div class="col">
+<div class="text-center">
     {{ utils.render_messages() }}
 </div>
-    </div>
-</div>
 
-<div class="container">
 {% block app_content %}{% endblock %}
-</div>
+
 {% endblock %}

templates/download.html

@@ -17,22 +17,20 @@
           crossorigin="anonymous" referrerpolicy="no-referrer" />
 {% endblock %}
 
-{% block page_header %}
-    <h1>Sendungsmitschnitt herunterladen</h1>
-{% endblock %}
 
 {% block app_content %}
-    <div class="row">
-        <div class="col col-12 col-sm-6 col-md-6 col-lg-4">
-        <div class='card card-body bg-light'>
+<div class="container">
+<form class="form-download" method="post" role="form" novalidate>
 
-        <form method="post" role="form" novalidate>
+<div class="text-center mb-4">
+    <h1 class="h3 mb-3 font-weight-normal">Sendungsmitschnitt herunterladen</h1>
+</div>
 
 {{ form.hidden_tag() }}
 
 {{ wtf.form_errors(form, hiddens="only") }}
 
-        <div class="form-group">
+<div class="form-group mt-5">
     {{ form.start_time.label() }}
     <div class='input-group' id='start_time_group' data-target-input="nearest">
         <input name='start_time' id='start_time_'
@@ -47,6 +45,7 @@
         <div class="input-group-append" data-target="#start_time_group" data-toggle="datetimepicker">
             <div class="input-group-text"><i class="fa fa-calendar"></i></div>
         </div>
+
     </div>
     {% if form.start_time.errors %}
         <div class="invalid-feedback">{{ form.start_time.errors|join("<br/>")|safe }}</div>
@@ -66,13 +65,11 @@
     </div>
 </div>
 
-        {{ form.submit(class_="btn btn-primary") }}
+{{ form.submit(class_="btn btn-primary btn-block mt-4") }}
 
 </form>
-
-        </div>
-        </div>
 </div>
+
 {% endblock %}
 
 {% block scripts %}