Make header vh sized

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;

static/css/media-queries.css

@@ -30,7 +30,7 @@
 }
 
 /******************* Navbar Menu *******************/
-@media only screen and (min-width: 768px) {
+@media screen and (min-width: 768px) {
 
 	#navigation-list {
 		position: relative;