From 9ac32636c51174361e511f20b8595a4b9fb75cd0 Mon Sep 17 00:00:00 2001 From: Gregory Trolliet Date: Mon, 27 Apr 2020 23:17:53 +0200 Subject: [PATCH] Make header vh sized --- static/css/base.css | 27 ++++++++++++++++----------- static/css/media-queries.css | 4 ++-- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 2da7ccc..b978923 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -11,16 +11,19 @@ --footer-height-inline: 4em; --footer-height-block: 8em; + --navbar-height: 8vh; } /******************* Base *******************/ -html { - box-sizing: border-box; -} *, *::before, *::after { - box-sizing:inherit + box-sizing: border-box; +} + +html { + font-family: Roboto, Ubuntu, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: medium; } a { color: black; @@ -31,10 +34,9 @@ a:visited { text-decoration: none; } body { - padding-top: 4em; - font-family: Roboto, Ubuntu, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + padding-top: var(--navbar-height); line-height: 1.62; - height: 100vh; + min-height: 100vh; margin: 0; } .page-icon { @@ -45,9 +47,9 @@ body { /******************* Post *******************/ .post { - min-height: 100%; + min-height: 92vh; padding-top: 3em; - padding-bottom: 3em; + padding-bottom: var(--footer-height-inline); margin-bottom: calc(-1 * var(--footer-height-inline)); } .post:after { @@ -109,7 +111,7 @@ body { width: 100%; margin: auto; padding: 0 5vw; - line-height: 4em; + line-height: 8vh; z-index: 50; background: white; box-shadow: 0 1px 5px black; @@ -118,6 +120,9 @@ body { max-width: var(--max-width-full); margin: auto; } +.navigation-container { + height: 8vh +} #navigation-list { margin-bottom: 0; } @@ -227,7 +232,7 @@ body { /******************* Front-screen *******************/ .front-screen { - height: 90vh; + height: 93vh; position: relative; padding-left: 3em; margin: auto; diff --git a/static/css/media-queries.css b/static/css/media-queries.css index 29a550d..bd183f5 100644 --- a/static/css/media-queries.css +++ b/static/css/media-queries.css @@ -30,8 +30,8 @@ } /******************* Navbar Menu *******************/ -@media only screen and (min-width: 768px) { - +@media screen and (min-width: 768px) { + #navigation-list { position: relative; float: right;