[DRAFT] first skin, add local font DejaVu Sans

static/css/skeleton.css

@@ -23,8 +23,38 @@
 - Utilities
 - Clearing
 - Media Queries
+- Custom Code
 */
 
+/* Fonts
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+@font-face {
+  font-family: 'DejaVu Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+          url('../fonts/DejaVuSans-ExtraLight.woff2') format('woff2')
+}
+
+@font-face {
+  font-family: 'DejaVu Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+          url('../fonts/DejaVuSansMono.woff2') format('woff2')
+}
+
+@font-face {
+  font-family: 'DejaVu Sans';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src:
+          url('../fonts/DejaVuSans-Bold.woff2') format('woff2')
+}
+
 
 /* Grid
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -124,8 +154,9 @@ body {
   font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
   line-height: 1.6;
   font-weight: 400;
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
+  font-family: "DejaVu Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; 
+}
 
 
 /* Typography
@@ -182,9 +213,9 @@ input[type="button"] {
   text-transform: uppercase;
   text-decoration: none;
   white-space: nowrap;
-  background-color: transparent;
+  background-color: white;
   border-radius: 4px;
-  border: 1px solid #bbb;
+  border: 1px solid transparent;
   cursor: pointer;
   box-sizing: border-box; }
 .button:hover,
@@ -206,8 +237,8 @@ input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
   color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
+  background-color: red;
+  border-color: red; }
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,
@@ -219,8 +250,8 @@ input[type="submit"].button-primary:focus,
 input[type="reset"].button-primary:focus,
 input[type="button"].button-primary:focus {
   color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
+  background-color: darkred;
+  border-color: darkred; }
 
 
 /* Forms
@@ -237,7 +268,7 @@ select {
   height: 38px;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
   background-color: #fff;
-  border: 1px solid #D1D1D1;
+  border: 1px solid transparent;
   border-radius: 4px;
   box-shadow: none;
   box-sizing: border-box; }
@@ -266,7 +297,7 @@ input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
-  border: 1px solid #33C3F0;
+  border: 1px solid #222;
   outline: 0; }
 label,
 legend {
@@ -416,3 +447,81 @@ there.
 
 /* Larger than Desktop HD */
 @media (min-width: 1200px) {}
+
+/* custom */
+.content-center-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-center-end {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+
+.font-base {
+  font-size: 1.2rem !important;
+}
+
+.full-height {
+  min-height: 100vh;
+  height: 100%;
+}
+
+.p-3 {
+    padding: 3rem;
+}
+
+.p-1 {
+  padding: 1rem;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-1 {
+  margin-bottom: 1rem;
+}
+
+.mb-3 {
+  margin-bottom: 3rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.block {
+  display: block;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.bg-gray {
+  background-color: #F1F1F1;
+}
+
+.bg-green {
+  background-color: #2b8c68;
+}
+
+.bg-red {
+  background-color: red;
+}
+
+.text-white {
+  color: #fff;
+}
+
+.text-center {
+  text-align: center;
+}

templates/base.html.tera

@@ -13,10 +13,6 @@
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <!-- FONT
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
-
   <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="/public/css/normalize.css">
@@ -34,27 +30,32 @@
 </head>
 <body>
 
+
+  {% if user %}
+    <div class="bg-gray p-1 mb-3">
+      <div class="container content-center-end">
+        {% if user.is_admin %}	
+          <a class="button button-primary mb-0 font-base light" href="/user">USER</a>
+        {% endif %}
+        <a class="button button-primary mb-0 font-base light" href="/logout">LOGOUT</a>
+      </div>
+    </div>
+  {% endif %}
+    
   <!-- Primary Page Layout
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <div class="container">
-    {% if user %}
-    	{% if user.is_admin %}	
-    		<a href="/user">USER</a>
-	{% endif %}
-	<a href="/logout">LOGOUT</a>
-    {% endif %}
-
     {% if flash %}
       {% if flash.0 == "success" %}
         <div class="row">
-          <div class="one-column" style="padding: 15px; background-color: #2b8c68; margin-bottom: 1.6em;">
+          <div class="one-column p-1 text-white bg-green mb-3 light text-center">
             {{ flash.1 }}
           </div>
         </div>
       {% endif %}
       {% if flash.0 == "error" %}
         <div class="row">
-          <div class="one-column" style="padding: 15px; background-color: #ff6961; margin-bottom: 1.6em;">
+          <div class="one-column p-1 text-white bg-red mb-3 light text-center">
             {{ flash.1 }}
           </div>
         </div>

templates/index.html.tera

@@ -1,15 +1,15 @@
 {% extends "base" %}
 {% block content %}
 
+<h1 class="bold">Ausfahrten</h1>
 {% for day_with_trip in data %}
 	{% set day = day_with_trip.day %}
 	{% set day_string = day.day | date(format="%Y-%m-%d") %}
 	{% set trips = day_with_trip.trips %}
-	<h1>{{ day.day | date(format="%d.%m.%Y")}}</h1>
-	<br />
+  <div class="bg-gray p-3 mb-1">
+    <strong class="block">{{ day.day | date(format="%d.%m.%Y")}}</strong>
 
-
-	{% if day.planned_amount_cox > 0%}
+    {% if day.planned_amount_cox > 0%}
 
 		{% set cox = trips | filter(attribute="user.is_cox", value=true) %}
 		{% set amount_cox = cox | length %}
@@ -91,7 +91,7 @@
 			</form>
 		</details>
 	{% endif %}
-	<hr />
+  </div>
 {% endfor %}
 
 

templates/name.html.tera

@@ -1,16 +1,18 @@
 {% extends "base" %}
 {% block content %}
 
-<form action="/name" method="post">
-	<input type="hidden" name="_method" value="put" />
+<div class="content-center-all full-height">
+  <form action="/name" method="post" class="p-3 bg-gray">
+    <input type="hidden" name="_method" value="put" />
 
-	<label for="name">Bitte deinen Namen eingeben</label>
-	<input type="text" id="name" name="name"/>
+    <label for="name">Bitte deinen Namen eingeben</label>
+    <input type="text" class="w-full" id="name" name="name"/>
 
-	<label for="pw">(Optional) Passwort eingeben</label>
-	<input type="password" id="pw" name="pw"/>
+    <label for="pw">(Optional) Passwort eingeben</label>
+    <input type="password" class="w-full" id="pw" name="pw"/>
 
-	<input type="submit" value="Weiter"/>
-</form>
+    <input type="submit" class="button button-primary mb-0 d-block w-full b" value="Weiter"/>
+  </form>
+</div>
 {% endblock content %}