diff options
-rw-r--r-- | contrib/logo.svg | 109 | ||||
-rw-r--r-- | static/layout.css | 134 | ||||
-rw-r--r-- | static/logo.png | bin | 8447 -> 12021 bytes | |||
-rw-r--r-- | templates/base.html | 58 | ||||
-rw-r--r-- | templates/index.html | 1 | ||||
-rw-r--r-- | templates/settings.html | 6 |
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 Binary files differindex 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"> </div> + <header> + <h1><img src="{{url_for('static', filename='logo.png')}}" alt="spline accounts" /></h1> + <span id="roundcornerb"> </span> + <span id="roundcornerw"> </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> |