From 255fe8203240f40bdb8056b90ef621a703441721 Mon Sep 17 00:00:00 2001 From: Lephe Date: Sun, 10 Feb 2019 10:03:11 +0100 Subject: [PATCH] reponsive: clean up light.css --- app/static/css/global.css | 47 ++++-------- app/static/css/header.css | 3 + app/static/css/light.css | 136 ++++++--------------------------- app/static/css/navbar.css | 35 ++++----- app/templates/base/header.html | 2 +- 5 files changed, 54 insertions(+), 169 deletions(-) diff --git a/app/static/css/global.css b/app/static/css/global.css index cb06579..87a183e 100644 --- a/app/static/css/global.css +++ b/app/static/css/global.css @@ -1,6 +1,4 @@ -/* - fonts -*/ +/* Fonts */ @font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); } @font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); } @@ -8,34 +6,20 @@ @font-face { font-family: Cantarell; font-weight: normal; src: url(../fonts/Cantarell-Regular.otf); } @font-face { font-family: Cantarell; font-weight: bold; src: url(../fonts/Cantarell-Bold.otf); } - - -/* - ALL -*/ +/* Whole page */ * { box-sizing: border-box; transition: .15s ease; } - - -/* - Body -*/ - body { margin: 0; background: #ffffff; font-family: 'DejaVu Sans', sans-serif; } - - -/* - Links -*/ +/* General */ a { text-decoration: none; @@ -48,17 +32,15 @@ a:focus { outline: none; } -/* - Lists -*/ +p { + line-height: 20px; +} ul { line-height: 24px; } -/* - Inputs -*/ +/* Forms */ input, textarea { @@ -71,13 +53,18 @@ textarea:focus { box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25); } -/* Textarea */ textarea { width: 100%; border: 1px solid #eeeeee; } +input[type="checkbox"] { + display: inline; + vertical-align: middle; +} + /* Buttons */ + .button, input[type="button"], input[type="submit"] { @@ -90,14 +77,6 @@ input[type="submit"] { text-decoration: none; } -/* Checkbox */ -input[type="checkbox"] { - display: inline; - vertical-align: middle; -} - - - /* Bootstrap-style rules */ diff --git a/app/static/css/header.css b/app/static/css/header.css index 2f0c3e7..1a09085 100644 --- a/app/static/css/header.css +++ b/app/static/css/header.css @@ -73,3 +73,6 @@ header input[type="search"]:focus ~ a > svg > path { #spotlight { margin-left: 16px; } +#spotlight a { + display: block; +} diff --git a/app/static/css/light.css b/app/static/css/light.css index 9fe5786..3ff5693 100644 --- a/app/static/css/light.css +++ b/app/static/css/light.css @@ -1,18 +1,4 @@ -/* - fonts -*/ - -@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); } -@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); } -@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); } - - -/* Global */ - -nav a:hover, -nav a:focus { - opacity: 1; -} +/* Whole page */ .light-hidden { display: none; @@ -37,24 +23,9 @@ nav a:focus { #logo { width: auto; height: 100%; margin-bottom: 0; } -/*#logo::after { - position: absolute; left: 100%; top: 50%; - height: 0; width: 0; - border: solid transparent; content: " "; - border-left-color: #ba1203; - border-width: 4px; - margin-top: -4px; -}*/ #logo img { width: 60px; - margin: 0; padding: 0; margin-bottom: -4.5px; - filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0)); - transition: filter .15s ease; -} -#logo:hover img, -#logo:focus img { - filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); } #light-menu li { @@ -64,27 +35,23 @@ nav a:focus { padding: 0 2px; } #light-menu li > a { - display: flex; flex-direction: column; - align-items: center; justify-content: center; - width: 100%; height: 100%; cursor: pointer; } +#light-menu li > a:hover { + text-decoration: none; +} +#light-menu li > a > svg { + width: 20px; +} #light-menu li > a > div { 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; - margin: 0 auto 5px auto; -} #light-menu li span[notifications]:not([notifications="0"])::before { content: attr(notifications); @@ -185,9 +152,6 @@ nav a:focus { font-size: 14px; background: #e8e8e8; transition: background .15s ease; } -#menu form input:focus { - background: #ffffff; -} #menu form input:first-child { margin-bottom: 0; border-bottom: none; border-top-left-radius: 5px; @@ -214,57 +178,25 @@ nav a:focus { /* Header */ header { - padding: 10px 10px 0px 10px; - background: #f8f8fa; border-bottom: 1px solid #d0d0d0; -} -header svg { - width: 24px; height: 24px; vertical-align: middle; - transition: .15s ease; -} -header a:hover > svg, header a:focus > svg { - filter: brightness(.5); -} - -header input[type="search"] { - width: 100%; - border: 0; border-radius: 1px; - font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif; - box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease; + padding: 0 8px; } /* Homepage */ -section { - margin: 10px; -} -section h1 { - margin: 10px 0; - border-bottom: 1px solid #a0a0a0; - font-family: Raleway; font-size: 20px; - font-weight: 200; color: #242424; -} -section * { - transition: .15s ease; -} -.home-title { - margin: 20px 0; padding: 10px; - background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); - border-top: 10px solid #ab170c; -} -.home-title h1 { - margin: 0; - color: #ffffff; border-color: #ffffff; -} -.home-title p { - margin-bottom: 0; text-align: justify; - color: #ffffff; font-size: 14px; -} -.home-title a { - color: inherit; text-decoration: underline; -} #shoutbox { display: none; } + +section { + margin: 10px; +} +.home-title { + padding: 10px; +} +.home-title p { + font-size: 14px; +} + .home-pinned-content { margin-top: 30px; } @@ -284,20 +216,18 @@ section * { flex-grow: 1; margin-left: 10px; } .home-pinned-content h2 { - margin: 0; - font-family: Raleway; font-size: 18px; - font-weight: 400; color: #242424; + margin: 0; color: #242424; text-decoration: underline; } .home-pinned-content span { color: #000000; font-size: 14px; } + .home-articles > div { margin-top: 30px; } .home-articles article { margin-bottom: 15px; - display: flex; align-items: center; } .home-articles article > img { flex-shrink: 0; width: 128px; height: 64px; @@ -305,20 +235,11 @@ section * { .home-articles article > div { margin-left: 5px; } -.home-articles h1 { - display: flex; justify-content: space-between; align-items: center; -} .home-articles h1 > a { font-size: 13px; color: #666666; } -.home-articles h3 { - margin: 0; - color: #424242; font-weight: normal; -} .home-articles p { - margin: 5px 0; - text-align: justify; - color: #808080; font-size: 14px; + font-size: 14px; } @@ -327,16 +248,3 @@ section * { .alert { display: none; } - - -/* Footer */ - -footer { - margin: 20px 10% 5px 10%; padding: 10px 0; - text-align: center; font-size: 11px; font-style: italic; - color: #a0a0a0; - border-top: 1px solid rgba(0, 0, 0, .1); -} -footer p { - margin: 3px 0; -} diff --git a/app/static/css/navbar.css b/app/static/css/navbar.css index e27d950..e039c6a 100644 --- a/app/static/css/navbar.css +++ b/app/static/css/navbar.css @@ -11,6 +11,16 @@ nav a:focus { /* Menu */ +#light-menu { + position: fixed; z-index: 10; + list-style: none; + width: 60px; + height: 100%; overflow-y: auto; + 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; width: 100%; @@ -21,16 +31,6 @@ nav a:focus { background: #bf1c11; transition: .15s ease; } -/* Flèche */ -/*nav #logo::after { - content: ""; - position: absolute; - top: 100%; left: 50%; - height: 0; width: 0; - border: solid transparent; - border-top-color: #ba1203; - border-width: 12px; margin-left: -12px; -}*/ #logo img { width: 100%; margin: 0; padding: 0; @@ -42,16 +42,11 @@ nav a:focus { #logo:focus { background: #d72411; } - -#light-menu { - position: fixed; z-index: 10; - list-style: none; - width: 60px; - height: 100%; overflow-y: auto; - margin: 0; padding: 0; - text-indent: 0; - background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); +#logo:hover img, +#logo:focus img { + filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); } + #light-menu li { width: 100%; height: 45px; text-align: center; @@ -74,7 +69,7 @@ nav a:focus { #light-menu li > a::after { content: attr(label); position: fixed; display: none; - padding: 4px 8px; /*margin-top: -28px;*/ left: 63px; + padding: 4px 8px; left: 63px; font-family: NotoSans; border-radius: 3px; background: rgba(0, 0, 0, 0.9); } diff --git a/app/templates/base/header.html b/app/templates/base/header.html index 3d530f7..5c59cfc 100644 --- a/app/templates/base/header.html +++ b/app/templates/base/header.html @@ -1,7 +1,7 @@
- +