From f5abfc3c120dd1f5482fcfbe76f54a84b2a6db50 Mon Sep 17 00:00:00 2001 From: Skia Date: Sat, 2 Sep 2017 20:59:45 +0200 Subject: [PATCH] core: still some design improvements Signed-off-by: Skia --- core/static/core/style.scss | 142 ++++++++++++++++++++------------- core/templates/core/base.jinja | 84 +++++++++---------- 2 files changed, 130 insertions(+), 96 deletions(-) diff --git a/core/static/core/style.scss b/core/static/core/style.scss index acdbe77c..68898d3a 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -68,8 +68,9 @@ a { #header_language_chooser { position: absolute; - top: 1em; - width: 5%; + top: 0.2em; + right: 0.5em; + width: 3%; text-align: center; input { display: block; @@ -79,18 +80,25 @@ a { } form { display: block; + margin: 0.2em 0em; + width: 100%; } } header { width: 90%; - margin: 0 auto; + margin: 0px auto; display: flex; + box-shadow: black 1px 1px 5px; + border: solid 1px $black-color; + border-top: none; + background-color: $primary-neutral-dark-color; #header_logo { display: inline-block; flex: none; background-size: 100% 100%; + background-color: $white-color; padding: 0.2em; a { display: inline-block; @@ -102,6 +110,7 @@ header { #header_connect_links { margin: 0.6em 0.6em 0em auto; + color: $white-color; form { display: inline; width: 100%; @@ -115,11 +124,19 @@ header { } #header_bar { - background-color: $secondary-light-color; display: flex; flex: auto; width: 80%; + a { + text-decoration: none; + margin: 0em 1em; + color: $white-color; + &:hover { + color: $secondary-color; + } + } + #header_bars_infos { width: 35ch; flex: initial; @@ -146,14 +163,6 @@ header { flex: auto; } } - a { - text-decoration: none; - margin: 0em 1em; - color: $black-color; - &:hover { - color: $secondary-color; - } - } .white { background: $white-color; } @@ -224,22 +233,26 @@ header { min-width: 10%; max-width: 46%; min-height: 20px; + box-shadow: black 1px 1px 5px; &:before { float: left; margin: 0.2em; margin-right: 0.5em; } + .markdown { + margin-top: 0.5em; + } } #info_box { - border: solid 1px $primary-neutral-light-color; + border: solid 1px $black-color; background: $white-color; &:before { content: url('img/info.png'); } } #alert_box { - border: solid 1px grey; - background: gold; + border: solid 1px $black-color; + background: $second-color; &:before { content: url('img/warning.png'); } @@ -247,52 +260,57 @@ header { } -/*---------------------------------NAV---------------------------------*/ - -nav { - display: block; +#page { + box-shadow: black 1px 1px 5px; width: 90%; - margin: 1em auto 0em auto; - background: $primary-color; - color: $white-color; - a { + margin: 0em auto; + border: solid 1px $black-color; + +/*---------------------------------NAV---------------------------------*/ + nav { + display: flex; + flex-wrap: wrap; + background-color: $primary-dark-color; color: $white-color; - font-style: normal; - font-weight: bolder; - text-decoration: none; - display: inline-block; - padding: 20px; - &:hover { - background: $primary-dark-color; + a { + flex: auto; + text-align: center; + padding: 20px; color: $white-color; + font-style: normal; + font-weight: bolder; + text-decoration: none; + &:hover { + background: $secondary-neutral-color; + color: $white-color; + } } } -} /*--------------------------------CONTENT------------------------------*/ + #quick_notif { + width: 90%; + margin: 0px auto; + list-style-type: none; + background: $second-color; + li { + padding: 10px; + } + } + + + #content { + padding: 1em 1%; + background: $white-color; + overflow: auto; + } + +} .helptext { display: block; } -#quick_notif { - width: 90%; - margin: 0px auto; - list-style-type: none; - background: $second-color; - li { - padding: 10px; - } -} - -#content { - width: 88%; - margin: 0px auto; - padding: 1em 1%; - background: $white-color; - overflow: auto; -} - h1, h2, h3, h4, h5, h6 { font-weight: bold; margin-top: 0.5em; @@ -763,13 +781,27 @@ textarea { /*--------------------------------FOOTER-------------------------------*/ footer { + width: 90%; + margin: 2em auto; + + font-size: 80%; text-align: center; + vertical-align: middle; div { - margin-top: 25px; - margin-bottom: 15px; - } - a { - margin: 1px 20px; + margin: 0.6em 0em; + color: $white-color; + display: flex; + background-color: $primary-neutral-dark-color; + box-shadow: black 1px 1px 5px; + border: solid 1px $black-color; + a { + padding: 0.8em; + flex: 1; + color: $white-color; + &:hover { + color: $secondary-color; + } + } } } @@ -847,7 +879,7 @@ label { line-height: 120%; } a { - color: $primary-light-color; + color: $primary-dark-color; } a:hover { text-decoration: underline; diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja index 1976376f..f40ec6ef 100644 --- a/core/templates/core/base.jinja +++ b/core/templates/core/base.jinja @@ -138,50 +138,52 @@ {% endblock %} - {% block nav %} - {% if not popup %} - - {% endif %} - {% endblock %} +
+ {% block nav %} + {% if not popup %} + + {% endif %} + {% endblock %} -
    - {% for n in quick_notifs %} -
  • {{ n }}
    • - {% endfor %} -
+
    + {% for n in quick_notifs %} +
  • {{ n }}
    • + {% endfor %} +
-
- {% if list_of_tabs %} -
-
{{ tabs_title }}
-
- {% for t in list_of_tabs %} - {{ t.name }} - {% endfor %} -
-
-
- {% endif %} +
+ {% if list_of_tabs %} +
+
{{ tabs_title }}
+
+ {% for t in list_of_tabs %} + {{ t.name }} + {% endfor %} +
+
+
+ {% endif %} - {% if error %} - {{ error }} - {% endif %} - {% block content %} - {% endblock %} + {% if error %} + {{ error }} + {% endif %} + {% block content %} + {% endblock %} +
{% if not popup %}