From 78b42992076a239ec0ab39d92ea54cdf72eced86 Mon Sep 17 00:00:00 2001 From: lephe <> Date: Sat, 9 Feb 2019 22:42:16 +0100 Subject: [PATCH] responsive: unify common style and light.css (WIP) This includes loading the common style sheets at low resolutions and removing the undescribable redundancy in light.css. The harder part was getting the navbar right, because it relied heavily on the distinction between navbar.css and light.css. This is still a work in progress. --- app/routes/admin.py | 2 +- app/static/css/header.css | 14 +++++- app/static/css/light.css | 80 ++++++++++++---------------------- app/static/css/navbar.css | 1 - app/templates/base/base.html | 4 +- app/templates/base/head.html | 18 ++++---- app/templates/base/navbar.html | 4 +- 7 files changed, 55 insertions(+), 68 deletions(-) diff --git a/app/routes/admin.py b/app/routes/admin.py index e6ca11d..d222df4 100644 --- a/app/routes/admin.py +++ b/app/routes/admin.py @@ -55,7 +55,7 @@ def admin(): m = Member.query.filter_by(name=name).first() if m is not None: # TODO: Do a real member deletion, not just a hack like this - for sp in SpecialPrivilege.query.filter_by(mid=m.id): + for sp in SpecialPrivilege.query.filter_by(mid=m.id).all(): db.session.delete(sp) db.session.commit() db.session.delete(m) diff --git a/app/static/css/header.css b/app/static/css/header.css index 72e5a7e..2f0c3e7 100644 --- a/app/static/css/header.css +++ b/app/static/css/header.css @@ -4,8 +4,18 @@ header { height: 50px; margin: 0; padding: 0 16px; - display: flex; align-items: center; justify-content: space-between; background: #f4f4f6; border-bottom: 1px solid #d0d0d0; + + display: flex; align-items: center; justify-content: space-between; + flex-flow: row wrap; +} +@media screen and (max-width: 1000px) { + header { + height: 75px; + } + header .title { + page-break-after: always; + } } header h1 { @@ -15,7 +25,7 @@ header h1 { } header .spacer { - flex: auto 1 0; + flex: 1 0 auto; } header .links { diff --git a/app/static/css/light.css b/app/static/css/light.css index 45b067d..9fe5786 100644 --- a/app/static/css/light.css +++ b/app/static/css/light.css @@ -9,17 +9,6 @@ /* Global */ -body { - margin: 0; - background: #ffffff; - font-family: sans-serif; -} - -nav a { - color: #ffffff; opacity: .7; - text-decoration: none; - transition: opacity .15s ease; -} nav a:hover, nav a:focus { opacity: 1; @@ -29,23 +18,24 @@ nav a:focus { display: none; } +.container { + margin-left: 0; +} + /* Menu */ +#spacer-menu { + height: 60px; +} + #light-menu { - list-style: none; display: flex; flex-direction: row; align-items: center; - width: 100%; height: 40px; + width: 100%; height: 60px; overflow-x: auto; overflow-y: hidden; - margin: 0; padding: 0; - text-indent: 0; - background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } #logo { - position: relative; display: block; - height: 100%; opacity: 1; - background: -moz-linear-gradient(left, #bf1c11, #ba1203); - background: -webkit-linear-gradient(left, #bf1c11, #ba1203); + width: auto; height: 100%; margin-bottom: 0; } /*#logo::after { position: absolute; left: 100%; top: 50%; @@ -56,7 +46,7 @@ nav a:focus { margin-top: -4px; }*/ #logo img { - width: 40px; + width: 60px; margin: 0; padding: 0; margin-bottom: -4.5px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0)); @@ -67,14 +57,10 @@ nav a:focus { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); } -#light-menu > li { +#light-menu li { display: flex; flex-direction: column; align-items: center; flex-grow: 1; height: 100%; - text-align: center; - color: #ffffff; -} -#light-menu li { padding: 0 2px; } #light-menu li > a { @@ -84,9 +70,16 @@ nav a:focus { cursor: pointer; } #light-menu li > a > div { - display: none; + display: block; font-size: 12px; } +#light-menu li > a:hover { + text-decoration: none; +} +#light-menu li:not(.opened) > a:hover::after, +#light-menu li:not(.opened) > a:focus::after { + display: none; +} #light-menu li > a > svg { display: block; width: 20px; flex-shrink: 0; @@ -108,18 +101,17 @@ nav a:focus { font-family: NotoSans; font-size: 12px; background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: .1s ease; + position: unset; + left: unset; } #menu.opened { height: 100%; overflow-y: auto; + left: unset; } #menu > div { width: 100%; - display: none; -} -#menu > div.opened { - display: block; } #menu h2 { margin: 10px 0 10px 40px; @@ -175,15 +167,15 @@ nav a:focus { margin: 5px 0; } -@media all and (min-width: 550px) { - #light-menu { - height: 60px; +@media all and (max-width: 550px) { + #light-menu, #spacer-menu { + height: 40px; } #logo img { - width: 60px; + width: 40px; } #light-menu li > a > div { - display: block; + display: none; } } @@ -240,22 +232,6 @@ header input[type="search"] { box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease; } -#spotlight { - display: flex; - align-items: center; justify-content: space-around; -} -#spotlight a { - padding: 5px 10px; margin: 5px 0; - color: #727272; font-size: 14px; - /*border-bottom: 2px solid rgba(93, 123, 141, .5);*/ - transition: border .15s ease; - text-decoration: none; -} -#spotlight a:hover, header #spotlight a:focus { - color: #404040; -} - - /* Homepage */ section { diff --git a/app/static/css/navbar.css b/app/static/css/navbar.css index c072458..e27d950 100644 --- a/app/static/css/navbar.css +++ b/app/static/css/navbar.css @@ -55,7 +55,6 @@ nav a:focus { #light-menu li { width: 100%; height: 45px; text-align: center; - font-family: Raleway; font-size: 13px; color: #ffffff; } #light-menu li > a { diff --git a/app/templates/base/base.html b/app/templates/base/base.html index 1f50658..6a43de1 100644 --- a/app/templates/base/base.html +++ b/app/templates/base/base.html @@ -5,9 +5,9 @@ {% include "base/navbar.html" %} -
+
-
{% block title %}(page title){% endblock %}
+
{% block title %}(page title){% endblock %}
{% include "base/header.html" %}
diff --git a/app/templates/base/head.html b/app/templates/base/head.html index 0e25ac9..055e0c0 100644 --- a/app/templates/base/head.html +++ b/app/templates/base/head.html @@ -4,14 +4,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/app/templates/base/navbar.html b/app/templates/base/navbar.html index a534704..278b5d4 100644 --- a/app/templates/base/navbar.html +++ b/app/templates/base/navbar.html @@ -68,7 +68,9 @@ -