diff --git a/_layouts/default.html b/_layouts/default.html
index 4035353..d1314e7 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -43,6 +43,8 @@
+
+
{%- unless page.custom_heading -%}
diff --git a/assets/script.js b/assets/script.js
index e69de29..fd05d84 100644
--- a/assets/script.js
+++ b/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');
+ };
+});
diff --git a/assets/style.css b/assets/style.css
index c8fde37..9573403 100644
--- a/assets/style.css
+++ b/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;
@@ -161,4 +179,35 @@ 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;
+ }
}
\ No newline at end of file