From 79fc7413c98e4b788ecdcb4b26edfc5c73d118bc Mon Sep 17 00:00:00 2001 From: Midgard Date: Sat, 25 Jul 2020 13:27:20 +0200 Subject: [PATCH] Responsive style++ --- static/main.css | 65 ++++++++++++++++++++++----------------------- templates/base.html | 4 +-- 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/static/main.css b/static/main.css index e7d079e..9bd188b 100644 --- a/static/main.css +++ b/static/main.css @@ -18,6 +18,11 @@ header { header h1 { margin: 0; font-size: 120%; +} +h1 a { + color: inherit; + text-decoration: none; + display: block; padding: 10px; } @@ -54,8 +59,15 @@ nav a { color: black; } -nav a:hover, nav a:focus { - background-color: rgba(255, 255, 255, 0.5); +header a { + transition: background-color 0.1s; + background-color: rgba(255, 255, 255, 0); +} +header a:hover, header a:focus, header a:active { + background-color: rgba(255, 255, 255, 0.3); +} +h1 a:hover, h1 a:focus, h1 a:active { + background-color: rgba(255, 255, 255, 0.1); } /*change the layout of the navigation bar for all the screens @@ -63,16 +75,11 @@ that have a width less or equal than 500px*/ @media only screen and (max-width: 750px) { nav li { - display: block; margin: 0; } - nav a { - display: block; - } - - .alignLeft, .alignRight { - border-top: 1px solid #000; + nav span, nav a { + padding: 10px; } } @@ -82,20 +89,22 @@ that have a width less or equal than 500px*/ } .align { + display: block; margin-left: auto; margin-right: auto; width: 50%; + min-width: 750px; } +} - .alignLeft { - float: left; - text-align: left; - } +.alignLeft { + float: left; + text-align: left; +} - .alignRight { - float: right; - text-align: right; - } +.alignRight { + float: right; + text-align: right; } main { @@ -113,20 +122,10 @@ input[type=text] { box-sizing: border-box; } -.accentuated { +.deemphasized { color: #66351d; } -:root { - --white: #afafaf; - --soft-grey: #808080; - --red: #e31b23; - --bodyColor: #292a2b; - --borderFormEls: hsl(0, 0%, 10%); - --bgFormEls: hsl(0, 0%, 14%); - --bgFormElsFocus: hsl(0, 7%, 20%); -} - select, input, textarea, @@ -134,9 +133,9 @@ button { width: 100%; line-height: 1.5; padding: 15px 10px; - border: 1px solid var(--borderFormEls); - color: var(--white); - background: var(--bgFormEls); + border: 1px solid hsl(0, 0%, 10%); + color: #afafaf; + background: hsl(0, 0%, 14%); transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25), transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25); } @@ -146,7 +145,7 @@ textarea { } ::placeholder { - color: var(--soft-grey); + color: #808080; opacity: 0.8; } @@ -155,7 +154,7 @@ select:focus, input:focus, textarea:focus, button:focus { - background: var(--bgFormElsFocus); + background: hsl(0, 7%, 20%); } select:focus, diff --git a/templates/base.html b/templates/base.html index 43b03fb..db349c1 100644 --- a/templates/base.html +++ b/templates/base.html @@ -11,7 +11,7 @@
-

Zeus WPI Kelder­registratie­systeem™

+

Zeus WPI Kelder­registratie­systeem