Fix the navbar height

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+* Fix the navbar height
 
 ## [1.1.0] - 2020-04-28
 ### Added

static/css/base.css

@@ -168,28 +168,27 @@ body {
 #navigation .menu-button {
 	float: right;
 	position:relative;
-	display: none;
 	width: 4em;
 	height: 4em;
+	cursor: pointer;
+	max-height: var(--navbar-height);
 }
 #navigation .menu-button-inner {
-	width: 3em;
-	height: 3em;
+	width: 100%;
+	height: 100%;
 	position:relative;
-	top: 0.5em;
-	left: 0.5em;
 	text-align:center
 }
 #navigation .menu-button .menu-button-image {
 	display: inline-block;
-	position: relative;
+	position: absolute;
 	height: 20px;
 	width: 24px;
-	top: 14px;
+	top: 50%;
+	left: 50%;
 	background-image: url(../svg/bars.svg);
 	background-size: contain;
-	margin: auto;
-	vertical-align: top;
+	transform: translateX(-50%) translateY(-50%);
 }
 #menu-toggle:checked + .menu-button .menu-button-image {
 	opacity: 40%;
@@ -225,10 +224,6 @@ body {
 	opacity: 1;
 	max-height: max-content;
 }
-#navigation .menu-button {
-	display: block;
-	cursor: pointer;
-}
 
 /******************* Front-screen *******************/
 .front-screen {

static/css/media-queries.css

@@ -1,10 +1,18 @@
 /******************* Main layout *******************/
+@media only screen and (max-width: 320px) {
+	html {
+		font-size: smaller;
+	}
+}
+
 @media screen and (max-width: 768px) {
 	.post {
 		margin-bottom: calc(-1 * var(--footer-height-block));
 	}
-	.post_body {
-		margin: 0 1em;
+	.post_body,
+	.post_header {
+		padding: 0 1em;
+		width: 100%;
 	}
 	.post:after {
 		height: var(--footer-height-block);