Make layout mobile friendly

5 files changed, 202 insertions, 142 deletions

diff --git a/accounts/static/bootstrap-form.css b/accounts/static/bootstrap-form.css
deleted file mode 100644
index fb5d24b..0000000
--- a/accounts/static/bootstrap-form.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/*!
- * based on
- * Bootstrap v2.1.1
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */
-
-
-.form-horizontal .control-label,
-.form-horizontal label {
-  float: left;
-  width: 20em;
-  text-align: right;
-}
-
-.form-horizontal input,
-.form-horizontal textarea,
-.form-horizontal select {
-  display: inline-block;
-  *display: inline;
-  /* IE7 inline-block hack */
-
-  *zoom: 1;
-  margin-bottom: 0;
-  vertical-align: middle;
-}
-.control-group {
-  margin-bottom: .4em;
-}
-.form-horizontal .control-group:before,
-.form-horizontal .control-group:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.form-horizontal .control-group:after {
-  clear: both;
-}
-.form-horizontal .control-label {
-  float: left;
-  width: 20em;
-  text-align: right;
-}
-.form-horizontal .controls {
-  *display: inline-block;
-  *padding-left: 20px;
-  margin-left: 21em;
-  *margin-left: 0;
-}
-.form-horizontal .controls:first-child {
-  *padding-left: 11em;
-}
-.form-horizontal .help-block {
-  margin-bottom: 0;
-}
-.form-horizontal input + .help-block,
-.form-horizontal select + .help-block,
-.form-horizontal textarea + .help-block {
-  margin-top: 10px;
-}
-.form-horizontal .form-actions {
-  padding-left: 21em;
-}
diff --git a/accounts/static/layout.css b/accounts/static/layout.css
index b4ac7b6..5d260c8 100644
--- a/accounts/static/layout.css
+++ b/accounts/static/layout.css
@@ -32,48 +32,64 @@ html, body {
 
 /* header */
 
-#header-background {
-    background-color: #333;
-    width: 100%;
-    height: 4em;
-    margin-bottom: 4em;
-}
-header {
-    position: absolute;
-    top: 0;
-    margin: 0;
-    padding: 1em 0;
-    width: 100%;
-}
-header h1 {
-    font-size: 2em;
-    margin: 0;
-    max-width: 50%; /* make image smaller on small screens */
-    min-height: 3em;
-    padding: 0 1em 0;
-    display: inline-block;
-    background-color: #333;
-    border-bottom-right-radius: .8em;
-}
-header h1 img {
-    margin: 0;
-    max-width: 100%;
-}
-header #roundcornerb,
-header #roundcornerw {
-    display: inline-block;
-    width: 50px;
-    height: 50px;
-    position: absolute;
-    top: 4em;
-    margin: 0;
-}
-header #roundcornerb {
-    background-color: #333;
-}
-header #roundcornerw {
-    background-color: white;
-    border-top-left-radius: 1.6em;
+@media (min-width: 800px) {
+    #header-background {
+        background-color: #333;
+        width: 100%;
+        height: 4em;
+        margin-bottom: 4em;
+    }
+    header {
+        position: absolute;
+        top: 0;
+        margin: 0;
+        padding: 1em 0;
+        width: 100%;
+    }
+    header h1 {
+        font-size: 2em;
+        margin: 0;
+        min-height: 3em;
+        padding: 0 1em 0;
+        display: inline-block;
+        background-color: #333;
+        border-bottom-right-radius: .8em;
+    }
+    header h1 img {
+        margin: 0;
+        max-width: 100%;
+        height: 2em;
+    }
+    header #roundcornerb,
+    header #roundcornerw {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 4em;
+        margin: 0;
+    }
+    header #roundcornerb {
+        background-color: #333;
+    }
+    header #roundcornerw {
+        background-color: white;
+        border-top-left-radius: 1.6em;
+    }
+}
+
+@media (max-width: 800px) {
+    #header-background {
+        background-color: #333;
+        width: 100%;
+        height: 3em;
+        margin-bottom: 4em;
+    }
+    header h1 img {
+        margin: 0;
+        max-width: 100%;
+        height: 1.5em;
+    }
 }
 
 header nav#mainnav {
@@ -105,11 +121,21 @@ header nav#mainnav ul li:not(:last-child):after {
 
 /* content */
 
+@media (min-width: 800px) {
 #content {
     margin: 0 auto;
     padding-top: 1em;
     max-width: 50em;
 }
+}
+
+@media (max-width: 800px) {
+#content {
+    margin: 0 auto;
+    padding: 1em;
+    max-width: 50em;
+}
+}
 
 #content h1 {
     font-size: 1.8em;
diff --git a/accounts/static/spline.svg b/accounts/static/spline.svg
new file mode 100644
index 0000000..bcc5581
--- /dev/null
+++ b/accounts/static/spline.svg
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:cc="http://creativecommons.org/ns#"
+     xmlns:dc="http://purl.org/dc/elements/1.1/"
+     width="1100" height="320" viewBox="-150 -195 1100 320">
+
+  <title>spline</title>
+
+  <defs>
+    <style>
+      #bus { stroke: white; fill: none; }
+      .bus_circ { stroke-width: 23px; }
+      .bus_conn { stroke-width: 26px; }
+      .bus_mid { stroke-width: 25px; }
+
+      #letters { stroke: none; fill: #4f0; }
+      #idot { fill: white; }
+      #_ { fill: white; }
+    </style>
+  </defs>
+  <metadata>
+    <rdf:RDF>
+      <cc:Work>
+        <dc:title>spline</dc:title>
+        <dc:description>spline.de</dc:description>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+
+  <g id="bus">
+    <circle cx="-80" cy="-75" r="25" class="bus_circ" />
+    <circle cx="+80" cy="-75" r="25" class="bus_circ" />
+    <circle cx="  0" cy="+75" r="25" class="bus_circ" />
+
+    <line x1="-80" y1="-50" x2="-80" y2="0" class="bus_conn" />
+    <line x1="+80" y1="-50" x2="+80" y2="0" class="bus_conn" />
+    <line x1="  0" y1="+50" x2="  0" y2="0" class="bus_conn" />
+
+    <line x1="-130" y1="0" x2="+130" y2="0" class="bus_mid" />
+  </g>
+  
+  <g id="letters" transform="translate(-367,-701.49937)">
+    <path id="s" d="M 612.98938,589.24933 C 612.98938,589.24933
+        584.98936,583.49933 566.73938,583.49933 543.7394,583.49933
+        520.73938,594.49936 520.73938,622.99933 520.73938,648.7493
+        537.48941,655.24933 565.48938,660.99933 584.48936,664.74932
+        588.23938,666.99934 588.23938,674.74933 588.23938,684.74932
+        581.98936,688.99937 565.48938,688.99937 552.73939,688.99937
+        522.98938,688.99937 522.98938,688.99937 L 522.98938,713.99937
+        C 522.98938,713.99937 550.4894,713.99937 568.23938,713.99937
+        596.73935,713.99937 616.73938,703.2493 616.73938,673.99933
+        616.73938,649.24935 604.98935,641.24932 573.98938,635.49933
+        554.2394,631.99933 549.23938,629.74932 549.23938,622.24933
+        549.23938,612.99934 555.98939,608.49933 568.73938,608.49933
+        581.73937,608.49933 612.48938,612.49933 612.48938,612.49933
+        L 612.98938,589.24933" />
+    <path id="p" d="M 650.52454,764.74933 679.02454,764.74933
+        679.02454,711.99933 C 680.27453,712.24933 690.52455,713.99933
+        700.77454,713.99933 737.0245,713.99933 755.77454,697.49928
+        755.77454,647.49933 755.77454,603.74937 739.27451,583.49933
+        708.77454,583.49933 694.52455,583.49933 679.02454,592.99933
+        679.02454,592.99933 L 679.02454,586.49933 650.52454,586.49933
+        650.52454,764.74933 M 703.52454,609.24933 C 719.52452,609.24933
+        726.77454,624.24935 726.77454,647.49933 726.77454,674.2493
+        720.27451,688.99933 698.77454,688.99933 689.02455,688.99933
+        680.02454,687.24933 679.02454,686.99933 L 679.02454,616.24933
+        C 679.02454,616.24933 692.52455,609.24933 703.52454,609.24933" />
+    <path id="l" d="M 785.005,711.24933 813.505,711.24933 813.505,534.74933
+        785.005,534.74933 785.005,711.24933" />
+    <path id="i" d="M 849.69641,711.24933 878.19641,711.24933
+        878.19641,586.49933 849.69641,586.49933 849.69641,711.24933" />
+    <circle id="idot" cx="863.94641" cy="552.97433" r="18" />
+<!--<path id="idot" d="M 849.69641,567.74933 878.19641,567.74933
+        878.19641,537.99933 849.69641,537.99933 849.69641,567.74933" />-->
+    <path id="n" d="M 944.64954,711.24933 944.64954,615.74933 C
+        944.64954,615.74933 960.14955,609.49933 971.14954,609.49933
+        987.64952,609.49933 990.64954,624.99935 990.64954,646.24933 L
+        990.64954,711.24933 1019.1495,711.24933 1019.1495,645.99933 C
+        1019.1495,606.49937 1009.3995,583.49933 976.64954,583.49933
+        962.89955,583.49933 944.64954,592.74933 944.64954,592.74933 L
+        944.64954,586.49933 916.14954,586.49933 916.14954,711.24933
+        944.64954,711.24933" />
+    <path id="e" d="M 1103.5245,688.99933 C 1084.0246,688.99933
+        1077.0245,677.24931 1076.7745,660.74933 L 1151.0245,660.74933
+        1153.0245,640.49933 C 1153.0245,604.49936 1136.0245,583.49933
+        1101.0245,583.49933 1066.2746,583.49933 1048.0245,608.24937
+        1048.0245,650.24933 1048.0245,691.74929 1062.5246,713.99918
+        1101.2745,713.99918 1125.2745,713.99918 1149.873,713.99918
+        1149.873,713.99918 L 1149.873,688.99918 C 1149.873,688.99918
+        1121.2745,688.99918 1103.5245,688.99918 M 1076.5245,638.99933 C
+        1076.7745,618.99935 1083.7746,607.49933 1101.0245,607.49933
+        1118.2745,607.49933 1124.7745,618.24935 1124.7745,638.99933 L
+        1076.5245,638.99933" />
+    <path id="_" d="M 1180.7736,688.99881 1180.7736,713.99918
+        1299.774,713.99918 1299.7736,688.99881 1180.7736,688.99918" />
+  </g>
+
+</svg>
diff --git a/accounts/templates/_macros.html b/accounts/templates/_macros.html
index 31d388e..f92a623 100644
--- a/accounts/templates/_macros.html
+++ b/accounts/templates/_macros.html
@@ -17,7 +17,7 @@
 <div class="control-group">
   <label class="form-label">{{ field.label }}</label>
   <div class="controls">
-    {{ field(class_="form-control", **kwargs)|safe }}
+    {{ field(class_="form-control mb-4", **kwargs)|safe }}
     {{ render_errors(field.errors) }}
   </div>
 </div>
diff --git a/accounts/templates/base.html b/accounts/templates/base.html
index baf1656..10c146e 100644
--- a/accounts/templates/base.html
+++ b/accounts/templates/base.html
@@ -1,8 +1,9 @@
-{%- set styles = ['layout.css', 'bootstrap-form.css', 'bootstrap.min.css'] + styles|default([]) %}
+{%- set styles = ['layout.css', 'bootstrap.min.css'] + styles|default([]) %}
 {%- set scripts = ['script.js', 'jquery-1.8.2.min.js'] + scripts|default([]) %}
 <!doctype html> <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width">
     <title>{% if title %}{{ title }} – {% endif %}spline accounts</title>
     {%- for script in scripts %}
       <script type="text/javascript" src="{{ url_for('static', filename=script) }}"></script>
@@ -13,40 +14,41 @@
   </head>
   <body>
 
-    <div id="header-background">&nbsp;</div>
-    <header>
-      <h1>
-        <a href="{{ url_for('default.index') }}">
-          <img src="{{ url_for('static', filename='logo.png') }}" alt="spline accounts" />
-        </a>
-      </h1>
-      <span id="roundcornerb">&nbsp;</span>
-      <span id="roundcornerw">&nbsp;</span>
+    <div id="header-background">
+      <header>
+        <h1>
+          <a href="{{ url_for('default.index') }}">
+            <img src="{{ url_for('static', filename='spline.svg') }}" alt="spline accounts" />
+          </a>
+        </h1>
+        <span id="roundcornerb">&nbsp;</span>
+        <span id="roundcornerw">&nbsp;</span>
 
-      <nav id="mainnav">
-        <ul>
-          <li><a href="http://spline.de">spline.de</a></li>
-          <li><a href="{{ url_for('default.about') }}">FAQ</a></li>
-        </ul>
-      </nav>
+        <nav id="mainnav">
+          <ul>
+            <li><a href="http://spline.de">spline.de</a></li>
+            <li><a href="{{ url_for('default.about') }}">FAQ</a></li>
+          </ul>
+        </nav>
 
-      {%- if not no_login_message %}
-      <nav id="usermenu">
-        <ul>
-          {%- if current_user.is_authenticated() %}
-          <li>Angemeldet als <strong>{{ current_user.uid }}</strong></li>
-            {%- if current_user.uid in config.get('ADMIN_USERS', []) %}
-          <li><a href="{{ url_for('admin.index') }}">Admin</a></li>
+        {%- if not no_login_message %}
+        <nav id="usermenu">
+          <ul>
+            {%- if current_user.is_authenticated %}
+            <li>Angemeldet als <strong>{{ current_user.uid }}</strong></li>
+              {%- if current_user.uid in config.get('ADMIN_USERS', []) %}
+            <li><a href="{{ url_for('admin.index') }}">Admin</a></li>
+              {%- endif %}
+            <li><a href="{{ url_for('login.logout') }}">Abmelden</a></li>
+            {%- else %}
+            <li>Nicht angemeldet</li>
+            <li><a href="{{ url_for('login.login') }}">Login</a></li>
             {%- endif %}
-          <li><a href="{{ url_for('login.logout') }}">Abmelden</a></li>
-          {%- else %}
-          <li>Nicht angemeldet</li>
-          <li><a href="{{ url_for('login.login') }}">Login</a></li>
-          {%- endif %}
-        </ul>
-      </nav>
-      {%- endif %}
-    </header>
+          </ul>
+        </nav>
+        {%- endif %}
+      </header>
+    </div>
 
     <section id="content">
       {% with messages = get_flashed_messages(with_categories=true) %}