mobile compatibility!

_layouts/default.html

@@ -43,6 +43,8 @@
 		</section>
 	</header>
 
+	<div id="hamburger"><div id="hb-icon"></div></div>
+
 	<main>
 		<article>
 			{%- unless page.custom_heading -%}

assets/script.js

@@ -0,0 +1,10 @@
+function dgel(id) {
+	return document.getElementById(id);
+}
+
+window.addEventListener('DOMContentLoaded', (_) => {
+	dgel('hamburger').onclick = function () {
+		this.classList.toggle('active');
+		document.getElementsByTagName('header')[0].classList.toggle('active');
+	};
+});

assets/style.css

@@ -76,10 +76,9 @@ header {
 	position: sticky;
 	top: 0;
 	background: #333;
-	z-index: 1;
 	height: 100vh;
+	transition: 0.2s all;
 }
-
 header::after {
 	/* will use webp with jpeg fallback when
 	https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg
@@ -98,6 +97,25 @@ header::after {
 	filter: blur(5px) saturate(75%);
 	content: "";
 }
+#hamburger {
+	display: none;
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	padding: 10px;
+	background: #fafafa;
+	color: mediumpurple;
+	border-radius: 10px;
+	height: 27px;
+	width: 27px;
+	z-index: 3;
+	box-sizing: content-box;
+}
+#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% );
+}
 
 nav a {
 	color: white;
@@ -162,3 +180,34 @@ nav a.current::before {
 .project-footer a {
 	font-style: italic;
 }
+
+/* mobile tweaks */
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+	main {
+		width: 100vw;
+		box-shadow: none;
+	}
+	main article {
+		padding: 0 20px 30px;
+	}
+	h1 {
+		font-size: 2.5em;
+	}
+	h2 {
+		font-size: 1.5em;
+	}
+
+	header {
+		position: fixed;
+		left: -100vw;
+		width: 100vw;
+		z-index: 3;
+	}
+	header.active {
+		left: 0;
+	}
+	#hamburger {
+		display: inline-block;
+		touch-action: manipulation;
+	}
+}