_includes/header.html

@@ -1,4 +1,4 @@
-<div id='hamburger'><div id='hb-icon'></div></div>
+<div id='hamburger'>☰</div>
 <header id='header'>
 	<h1>Menu</h1>
 	<span class='internal'>

assets/style.css

@@ -145,6 +145,9 @@ header a {
 	padding: 5px 15px;
 	transition: 0.2s all;
 }
+header span:not(#theme-control), header a {
+	height: 100%;
+}
 html.night header a {
 	color: white;
 }
@@ -177,40 +180,16 @@ html.night header a:hover {
 
 #hamburger {
 	display: none;
+	color: mediumpurple;
+	font-size: 2em;
 	position: fixed;
 	top: 10px;
 	left: 10px;
 	z-index: 1;
-	padding: 10px;
+	transition: 0.2s all;
-	background: #fafafa;
-	border-radius: 10px;
-	height: 27px;
-	width: 27px;
 }
-html.night #hamburger {
+#hamburger.active {
-	background: #333;
+	color: white;
-}
-#hb-icon {
-	height: 100%;
-	width: 100%;
-	background: linear-gradient(
-		to bottom, 
-		mediumpurple, mediumpurple 10%, 
-		#fafafa 10%, #fafafa 45%, 
-		mediumpurple 45%, mediumpurple 55%, 
-		#fafafa 55%, #fafafa 90%, 
-		mediumpurple 90%, mediumpurple 100%
-	);
-}
-html.night #hb-icon {
-	background: linear-gradient(
-		to bottom, 
-		mediumpurple, mediumpurple 10%, 
-		#333 10%, #333 45%, 
-		mediumpurple 45%, mediumpurple 55%, 
-		#333 55%, #333 90%, 
-		mediumpurple 90%, mediumpurple 100%
-	);
 }
 
 #theme-control {
@@ -260,16 +239,10 @@ html.night #theme-control::before {
 	display: block;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 800px) {
 	#main {
 		width: 95%;
 	}
-	header a {
-		padding: 5px 8px;
-	}
-	header {
-		justify-content: space-around;
-	}
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
@@ -321,7 +294,6 @@ html.night #theme-control::before {
 	}
 	header span {
 		width: 100%;
-		text-align: center;
 	}
 	header span:not(#theme-control), header a {
 		height: unset;