💄 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="text-center">
-    <div class="row">
+    {{ utils.render_messages() }}
-        <div class="col">
-{{ utils.render_messages() }}
-        </div>
-    </div>
 </div>
 
-<div class="container">
+{% block app_content %}{% endblock %}
-    {% block app_content %}{% endblock %}
+
-</div>
 {% endblock %}

templates/download.html

@@ -17,62 +17,59 @@
           crossorigin="anonymous" referrerpolicy="no-referrer" />
 {% endblock %}
 
-{% block page_header %}
-    <h1>Sendungsmitschnitt herunterladen</h1>
-{% endblock %}
 
 {% block app_content %}
-    <div class="row">
+<div class="container">
-        <div class="col col-12 col-sm-6 col-md-6 col-lg-4">
+<form class="form-download" method="post" role="form" novalidate>
-        <div class='card card-body bg-light'>
-
-        <form method="post" role="form" novalidate>
-
-        {{ form.hidden_tag() }}
-
-        {{ wtf.form_errors(form, hiddens="only") }}
-
-        <div class="form-group">
-            {{ form.start_time.label() }}
-            <div class='input-group' id='start_time_group' data-target-input="nearest">
-                <input name='start_time' id='start_time_'
-                    class="form-control {{"is-invalid" if form.start_time.errors else ""}}"
-                    type="text" data-target="#start_time_group"
-                    placeholder="{{ form.start_time.format }}"
-                    {% if form.start_time.data %}
-                    value="{{ form.start_time.data.strftime(form.start_time.format) }}"
-                    {% endif %}
-                    required
-                />
-                <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>
-            {% endif %}
-        </div>
 
-        <div class="form-group">
+<div class="text-center mb-4">
-            {{ form.length.label() }}
+    <h1 class="h3 mb-3 font-weight-normal">Sendungsmitschnitt herunterladen</h1>
-            <div class='input-group'>
+</div>
-            {{ form.length(class_="form-control " + ("is-invalid" if form.length.errors else "")) }}
-            <div class="input-group-append">
-                <span class="input-group-text">Minuten</span>
-            </div>
-            {% if form.length.errors %}
-            <div class="invalid-feedback">{{ form.length.errors|join("<br/>")|safe }}</div>
-            {% endif %}
-            </div>
-        </div>
 
-        {{ form.submit(class_="btn btn-primary") }}
+{{ form.hidden_tag() }}
 
-        </form>
+{{ wtf.form_errors(form, hiddens="only") }}
 
+<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_'
+            class="form-control {{"is-invalid" if form.start_time.errors else ""}}"
+            type="text" data-target="#start_time_group"
+            placeholder="{{ form.start_time.format }}"
+            {% if form.start_time.data %}
+            value="{{ form.start_time.data.strftime(form.start_time.format) }}"
+            {% endif %}
+            required
+        />
+        <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>
+
     </div>
+    {% if form.start_time.errors %}
+        <div class="invalid-feedback">{{ form.start_time.errors|join("<br/>")|safe }}</div>
+    {% endif %}
+</div>
+
+<div class="form-group">
+    {{ form.length.label() }}
+    <div class='input-group'>
+    {{ form.length(class_="form-control " + ("is-invalid" if form.length.errors else "")) }}
+    <div class="input-group-append">
+        <span class="input-group-text">Minuten</span>
+    </div>
+    {% if form.length.errors %}
+    <div class="invalid-feedback">{{ form.length.errors|join("<br/>")|safe }}</div>
+    {% endif %}
+    </div>
+</div>
+
+{{ form.submit(class_="btn btn-primary btn-block mt-4") }}
+
+</form>
+</div>
+
 {% endblock %}
 
 {% block scripts %}