add accounts logo, style header

6 files changed, 274 insertions, 34 deletions

diff --git a/contrib/logo.svg b/contrib/logo.svg
new file mode 100644
index 0000000..60389f0
--- /dev/null
+++ b/contrib/logo.svg
@@ -0,0 +1,109 @@
+<?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="2100" height="310" viewBox="-150 -195 2100 310">
+
+  <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, #accounts { 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>
+
+  <rect width="2102" height="322" x="-151" y="-196" fill="#333" />
+  <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>
+  <g id="accounts">
+    <path d="M 1055.582,-75.746279 C 1055.582,-106.49625 1040.832,-117.99628 1014.082,-117.99628 995.58205,-117.99628 963.08203,-112.74628 963.08203,-112.74628 L 964.08203,-89.246279 C 964.08203,-89.246279 990.08205,-91.746279 1012.582,-91.746279 1022.082,-91.746279 1027.082,-86.496268 1027.082,-75.996279 L 1027.082,-67.996279 997.83203,-65.496279 C 973.08206,-63.746281 956.83203,-53.246253 956.83203,-27.496279 956.83203,-3.246303 973.33205,12.503721 995.08203,12.503721 1014.082,12.503721 1031.582,3.7537212 1031.582,3.7537212 1039.082,9.2537157 1047.582,12.503721 1065.332,12.503721 L 1067.082,-11.496279 C 1059.832,-13.246277 1056.332,-15.496288 1055.582,-24.246279 L 1055.582,-75.746279 M 1027.082,-46.746279 1027.082,-16.496279 C 1027.082,-16.496279 1012.332,-11.496279 999.08203,-11.496279 990.83204,-11.496279 985.58203,-18.246289 985.58203,-28.246279 985.58203,-37.746269 990.58204,-44.746279 1001.082,-45.246279 L 1027.082,-46.746279" />
+    <path d="M 1138.9297,-117.99628 C 1103.6797,-117.99628 1087.4297,-96.246237 1087.4297,-54.246279 1087.4297,-9.2463238 1102.1797,12.503721 1138.1797,12.503721 1155.4297,12.503721 1175.4297,9.0037212 1175.4297,9.0037212 L 1174.6797,-15.246279 C 1174.6797,-15.246279 1156.4297,-13.496279 1146.9297,-13.496279 1123.6797,-13.496279 1116.4297,-26.746306 1116.4297,-54.246279 1116.4297,-80.746252 1124.1797,-91.746279 1146.6797,-91.746279 1156.1797,-91.746279 1174.4297,-89.746279 1174.4297,-89.746279 L 1175.4297,-113.99628 C 1175.4297,-113.99628 1156.4297,-117.99628 1138.9297,-117.99628" />
+    <path d="M 1247.8164,-117.99628 C 1212.5664,-117.99628 1196.3164,-96.246237 1196.3164,-54.246279 1196.3164,-9.2463238 1211.0664,12.503721 1247.0664,12.503721 1264.3164,12.503721 1284.3164,9.0037212 1284.3164,9.0037212 L 1283.5664,-15.246279 C 1283.5664,-15.246279 1265.3164,-13.496279 1255.8164,-13.496279 1232.5664,-13.496279 1225.3164,-26.746306 1225.3164,-54.246279 1225.3164,-80.746252 1233.0664,-91.746279 1255.5664,-91.746279 1265.0664,-91.746279 1283.3164,-89.746279 1283.3164,-89.746279 L 1284.3164,-113.99628 C 1284.3164,-113.99628 1265.3164,-117.99628 1247.8164,-117.99628" />
+    <path d="M 1359.9531,-117.99628 C 1317.7032,-117.99628 1304.9531,-90.746241 1304.9531,-53.246279 1304.9531,-14.996317 1317.2032,12.503721 1359.9531,12.503721 1402.4531,12.503721 1414.7031,-15.496317 1414.7031,-53.246279 1414.7031,-90.496242 1401.4531,-117.99628 1359.9531,-117.99628 M 1359.9531,-12.246279 C 1338.2031,-12.246279 1333.9531,-28.746303 1333.9531,-53.246279 1333.9531,-77.496255 1339.2031,-92.996279 1359.9531,-92.996279 1380.2031,-92.996279 1385.7031,-76.996255 1385.7031,-53.246279 1385.7031,-29.246303 1381.7031,-12.246279 1359.9531,-12.246279" />
+    <path d="M 1518.0273,-114.99628 1518.0273,-18.996279 C 1518.0273,-18.996279 1502.7773,-12.496279 1492.2773,-12.496279 1476.2774,-12.496279 1472.7773,-23.996305 1472.7773,-49.996279 L 1472.7773,-114.99628 1444.2773,-114.99628 1444.2773,-49.746279 C 1444.2773,-6.496322 1454.5274,12.503721 1486.5273,12.503721 1499.5273,12.503721 1518.0273,3.5037212 1518.0273,3.5037212 L 1518.0273,9.7537212 1546.5273,9.7537212 1546.5273,-114.99628 1518.0273,-114.99628" />
+    <path d="M 1614.6641,9.7537212 1614.6641,-85.746279 C 1614.6641,-85.746279 1630.1641,-91.996279 1641.1641,-91.996279 1657.664,-91.996279 1660.6641,-76.496258 1660.6641,-55.246279 L 1660.6641,9.7537212 1689.1641,9.7537212 1689.1641,-55.496279 C 1689.1641,-94.996239 1679.414,-117.99628 1646.6641,-117.99628 1632.9141,-117.99628 1614.6641,-108.74628 1614.6641,-108.74628 L 1614.6641,-114.99628 1586.1641,-114.99628 1586.1641,9.7537212 1614.6641,9.7537212" />
+    <path d="M 1788.0391,-89.746279 1788.0391,-114.74628 1755.7891,-114.74628 1755.7891,-151.24628 1727.2891,-151.24628 1727.2891,-114.74628 1712.5391,-114.74628 1712.5391,-89.746279 1727.2891,-89.746279 1727.2891,-34.246279 C 1727.2891,-0.74631226 1738.0391,12.753721 1764.7891,12.753721 1773.5391,12.753721 1788.7891,9.2537212 1788.7891,9.2537212 L 1787.5391,-13.996279 C 1787.5391,-13.996279 1775.7891,-13.246279 1768.7891,-13.246279 1759.2891,-13.246279 1755.7891,-20.496296 1755.7891,-37.496279 L 1755.7891,-89.746279 1788.0391,-89.746279" />
+    <path d="M 1901.168,-112.24628 C 1901.168,-112.24628 1873.168,-117.99628 1854.918,-117.99628 1831.918,-117.99628 1808.918,-106.99625 1808.918,-78.496279 1808.918,-52.746305 1825.668,-46.246273 1853.668,-40.496279 1872.6679,-36.746283 1876.418,-34.496271 1876.418,-26.746279 1876.418,-16.746289 1870.168,-12.496279 1853.668,-12.496279 1840.918,-12.496279 1811.168,-16.496279 1811.168,-16.496279 L 1810.168,6.7537212 C 1810.168,6.7537212 1838.668,12.503721 1856.418,12.503721 1884.9179,12.503721 1904.918,1.753692 1904.918,-27.496279 1904.918,-52.246254 1893.1679,-60.246285 1862.168,-65.996279 1842.418,-69.496275 1837.418,-71.746286 1837.418,-79.246279 1837.418,-88.49627 1844.168,-92.996279 1856.918,-92.996279 1869.918,-92.996279 1900.668,-88.996279 1900.668,-88.996279 L 1901.168,-112.24628" />
+  </g>
+</svg>
diff --git a/static/layout.css b/static/layout.css
index bf7a28d..a5552ed 100644
--- a/static/layout.css
+++ b/static/layout.css
@@ -1,3 +1,122 @@
+
+/* COMMON STYLE SETTINGS */
+
+:link, :visited {
+    text-decoration: none;
+}
+:link:hover, :visited:hover {
+    text-decoration: underline;
+}
+
+
+/* COMMON PAGE ELEMENTS */
+
+html, body {
+    margin: 0;
+    padding: 0;
+    background-color: white;
+}
+
+/* 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 {
+    margin: 0;
+    padding: 0 1em 0;
+    display: inline-block;
+    background-color: #333;
+    border-bottom-right-radius: 30px;
+}
+header h1 img {
+    margin: 0;
+}
+header #roundcornerb,
+header #roundcornerw {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    top: 4em;
+}
+header #roundcornerb {
+    background-color: #333;
+}
+header #roundcornerw {
+    background-color: white;
+    border-top-left-radius: 30px;
+}
+
+header nav#mainnav {
+    position: absolute;
+    top: .5em;
+    right: 1em;
+}
+header nav#mainnav,
+header nav#mainnav :link,
+header nav#mainnav :visited {
+    color: #eee;
+}
+header nav#usermenu :link,
+header nav#usermenu :visited {
+    color: black;
+}
+
+header nav#usermenu {
+    position: absolute;
+    top: 4em;
+    right: 1em;
+}
+
+header nav ul {
+    list-style: none;
+}
+header nav ul li {
+    display: inline;
+}
+header nav ul li:not(:last-child):after {
+    content: " · ";
+    color: #aaa;
+}
+header nav#mainnav ul li:not(:last-child):after {
+    color: #999;
+}
+
+
+/* content */
+
+#content {
+    margin: 0 auto;
+    max-width: 50em;
+}
+
+#content h1 {
+    font-size: 1.8em;
+}
+#content h2 {
+    font-size: 1.4em;
+}
+#content h3 {
+    font-size: 1.2em;
+}
+
+
+
+
+/* SPECIAL PAGE ELEMENTS */
+
+/* form stuff */
 form .errors {
     color: #D00;
     margin: .2em 0 .5em;
@@ -6,6 +125,8 @@ form ul.errors {
     padding-left: 1em;
 }
 
+/* flashing */
+
 ul.flashes {
     padding-left: 0;
 }
@@ -13,9 +134,10 @@ ul.flashes li {
     list-style: none;
     margin: .2em 0;
     display: block;
-    padding: .2em .4em;
+    padding: .2em .6em;
 
     border: 1px solid #ee3;
+    border-radius: 3px;
     background-color: #ffd;
 }
 ul.flashes li.error {
@@ -27,13 +149,3 @@ ul.flashes li.success {
     background-color: #dfd;
 }
 
-
-body {
-  margin: 0 auto;
-  max-width: 40em;
-}
-
-#header {
-  margin: 0 auto;
-  text-align: center;
-}
diff --git a/static/logo.png b/static/logo.png
index 2ddbb50..ea415a8 100644
--- a/static/logo.png
+++ b/static/logo.png
diff --git a/templates/base.html b/templates/base.html
index 425ea34..381fd0f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,6 +3,7 @@
 <!doctype html>
 <html>
   <head>
+    <meta charset="utf-8" />
     <title>{% if title %}{{ title }} – {% endif %}spline accounts</title>
     {%- for script in scripts %}
       <script type="text/javascript" src="{{ url_for('static', filename=script) }}"></script>
@@ -13,30 +14,49 @@
   </head>
   <body>
 
-    <h1 id="header"><img src="{{url_for('static', filename='logo.png')}}" alt="Spline" /></h1>
+    <div id="header-background">&nbsp;</div>
+    <header>
+      <h1><img src="{{url_for('static', filename='logo.png')}}" alt="spline accounts" /></h1>
+      <span id="roundcornerb">&nbsp;</span>
+      <span id="roundcornerw">&nbsp;</span>
 
-    {%- if not no_login_message %}
-    {%- if g.user %}
-    <p>Angemeldet als <strong>{{ g.user.uid }}</strong> | <a href="{{ url_for('logout') }}">Abmelden</a></p>
-    {%- else %}
-    <p>Nicht angemeldet |  <a href="{{ url_for('index') }}">Login</a></p>
-    {%- endif %}
-    {%- endif %}
+      <nav id="mainnav">
+        <ul>
+          <li><a href="http://spline.de">spline.de</a></li>
+          <li><a href="{#{ url_for('about') }#}">Über spline accounts</a></li>
+        </ul>
+      </nav>
+
+      {%- if not no_login_message %}
+      <nav id="usermenu">
+        <ul>
+          {%- if g.user %}
+          <li>Angemeldet als <strong>{{ g.user.uid }}</strong></li>
+          <li><a href="{{ url_for('logout') }}">Abmelden</a></li>
+          {%- else %}
+          <li>Nicht angemeldet</li>
+          <li><a href="{{ url_for('index') }}">Login</a></li>
+          {%- endif %}
+        </ul>
+      </nav>
+      {%- endif %}
+    </header>
 
-    {% with messages = get_flashed_messages(with_categories=true) %}
+    <section id="content">
+      {% with messages = get_flashed_messages(with_categories=true) %}
       {% if messages %}
-        <ul class="flashes">
-        {% for category, message in messages %}
+      <ul class="flashes">
+      {% for category, message in messages %}
         <li class="{{ category }}">{{ message }}</li>
-        {% endfor %}
-        </ul>
+      {% endfor %}
+      </ul>
       {% endif %}
-    {% endwith %}
-
-    {% if title %}
-      <h2>{{ title }}</h2>
-    {% endif %}
+      {% endwith %}
 
-    {% block content %}{% endblock %}
+      {% if title %}
+      <h1>{{ title }}</h1>
+      {% endif %}
+      {% block content %}{% endblock %}
+    </section>
   </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index cbbaa44..ea5e258 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,7 +1,6 @@
 {%- extends 'base.html' %}
 {%- from '_macros.html' import render_field %}
 {%- block content %}
-<p>Willkommen bei <strong>spline accounts</strong>!</p>
 {%- if session.username %}
 <p>Hallo {{ session.username }}. <a href="{{ url_for('settings') }}">Einstellungen</a></p>
 {%- else %}
diff --git a/templates/settings.html b/templates/settings.html
index c672493..de317fb 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -4,16 +4,16 @@
 {%- block content %}
 <form action="{{ url_for('settings') }}" method="post" class="form-horizontal">
   {{ render_field(form.old_password, autofocus="autofocus") }}
-  <h3>Globale Einstellungen ändern</h3>
+  <h2>Globale Einstellungen ändern</h2>
   {{ render_field(form.mail) }}
   {{ render_field(form.password) }}
   {{ render_field(form.password_confirm) }}
   {{ form.csrf_token }}
   <div class="form-actions"><input type="submit" value="Speichern" name="submit_main" /></div>
 
-  <h3>Dienste verwalten</h3>
+  <h2>Dienste verwalten</h2>
   {%- for service in services %}
-  <h4>{{ service.name }}</h4>
+  <h3>{{ service.name }}</h3>
   {%- if service.changed %}
   <p>Eigenes Passwort gesetzt</p>
   <p>löschen, todo</p>