[DRAFT] first skin, add local font DejaVu Sans
This commit is contained in:
Marie Birner
parent
edf59251d0
commit
30121e7d48
129
static/css/skeleton.css
vendored
129
static/css/skeleton.css
vendored
@ -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;
|
||||
}
|
||||
|
||||
BIN
static/fonts/DejaVuSans-Bold.woff2
Normal file
BIN
static/fonts/DejaVuSans-Bold.woff2
Normal file
Binary file not shown.
BIN
static/fonts/DejaVuSans-ExtraLight.woff2
Normal file
BIN
static/fonts/DejaVuSans-ExtraLight.woff2
Normal file
Binary file not shown.
BIN
static/fonts/DejaVuSansMono.woff2
Normal file
BIN
static/fonts/DejaVuSansMono.woff2
Normal file
Binary file not shown.
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
|
||||
|
||||
@ -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 %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user