From 084cd44908601a520c2da5c926692bbcb40c683a Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Tue, 28 Nov 2023 02:07:29 +0000
Subject: [PATCH] mobile navbar and spacing fixes

---
 public/index.html     | 10 ++++++-
 public/music.html     |  9 +++++-
 public/script/main.js | 12 ++++++++
 public/style/main.css | 68 ++++++++++++++++++++++++++++++++++++++-----
 4 files changed, 90 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 09be6b8..3888403 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,7 +32,14 @@
 				<h1>ari melody</h1>
 				<h2>your local SPACEGIRL 💫</h2>
 			</div>
-			<ul>
+			<a id="header-links-toggle" onclick="toggle_header_links()">
+				<svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+					<rect y="00" width="70" height="10" rx="5" fill="#eee" />
+					<rect y="20" width="70" height="10" rx="5" fill="#eee" />
+					<rect y="40" width="70" height="10" rx="5" fill="#eee" />
+				</svg>
+			</a>
+			<ul id="header-links">
 				<li>
 					<a href="/">home</a>
 				</li>
@@ -62,6 +69,7 @@
                         # hello, world!
                 </h1>
 
+
 		<p>
 		<strong>i'm ari!</strong>
 		<br>
diff --git a/public/music.html b/public/music.html
index f3a3ff6..ee5176a 100644
--- a/public/music.html
+++ b/public/music.html
@@ -33,7 +33,14 @@
 				<h1>ari melody</h1>
 				<h2>your local SPACEGIRL 💫</h2>
 			</div>
-			<ul>
+			<a id="header-links-toggle" onclick="toggle_header_links()">
+				<svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+					<rect y="00" width="70" height="10" rx="5" fill="#eee" />
+					<rect y="20" width="70" height="10" rx="5" fill="#eee" />
+					<rect y="40" width="70" height="10" rx="5" fill="#eee" />
+				</svg>
+			</a>
+			<ul id="header-links">
 				<li>
 					<a href="/">home</a>
 				</li>
diff --git a/public/script/main.js b/public/script/main.js
index 75027e0..1b6ba1c 100644
--- a/public/script/main.js
+++ b/public/script/main.js
@@ -1,3 +1,6 @@
+const header_links = document.getElementById("header-links");
+const hamburger = document.getElementById("header-links-toggle");
+
 function type_out(e) {
         const text = e.innerText;
         const original = e.innerHTML;
@@ -52,3 +55,12 @@ function fill_list(list) {
 		fill_list(e);
 	});
 
+function toggle_header_links() {
+        header_links.classList.toggle("open");
+}
+
+document.addEventListener("click", event => {
+        if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
+                header_links.classList.remove("open");
+        }
+});
\ No newline at end of file
diff --git a/public/style/main.css b/public/style/main.css
index 6092f4e..da4d709 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -29,17 +29,23 @@ body {
 }
 
 header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
 	border-bottom: 1px solid #888;
+	background-color: #080808;
 }
 
 #header {
 	width: min(calc(100% - 4rem), 720px);
 	height: 3em;
 	margin: auto;
+	padding: 0 1em;
 	display: flex;
 	flex-direction: row;
-	gap: 1em;
-	padding: 0 1em;
+	gap: .8em;
+	align-items: center;
 }
 
 img#header-icon {
@@ -51,9 +57,11 @@ img#header-icon {
 
 #header-text {
 	width: 11em;
+	margin-left: -0.5rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	flex-grow: 1;
 }
 
 #header-text h1 {
@@ -69,13 +77,17 @@ img#header-icon {
 	color: #bbb;
 }
 
-header ul {
+a#header-links-toggle {
+	width: 1.8rem;
+	display: none;
+}
+
+header ul#header-links {
 	margin: 0;
 	padding: 0;
 	display: flex;
 	flex-direction: row;
 	gap: .5em;
-	/* overflow-x: scroll; */
 	align-items: center;
 }
 
@@ -130,7 +142,7 @@ header ul li a:hover {
 main {
 	width: 	min(calc(100% - 4rem), 720px);
 	min-height: calc(100vh - 10.3rem);
-	margin: auto;
+	margin: 5rem auto 2rem auto;
 }
 
 main h1 {
@@ -363,13 +375,55 @@ footer {
 	mix-blend-mode: overlay;
 }
 
-@media screen and (max-width: 740px) {
+@media screen and (max-width: 780px) {
 	body {
 		font-size: 14px;
 	}
 
-	#header-text {
+	div#header {
+		width: calc(100vw - 2rem);
+		margin: 0;
+	}
+
+	div#header-text {
+		flex-grow: 1;
+	}
+
+	a#header-links-toggle {
+		display: flex;
+	}
+
+	header ul#header-links {
+		position: fixed;
+		left: 0;
+		top: 2.7rem;
+		width: calc(100vw - 2rem);
+		padding: 1rem;
+		flex-direction: column;
+		gap: 1rem;
+		border-bottom: 1px solid #888;
+		background: #080808;
 		display: none;
 	}
+
+	header ul#header-links.open {
+		display: flex;
+	}
+
+	ul#header-links li {
+		width: 100%;
+	}	
+
+	ul#header-links li a,
+	ul#header-links li span {
+		margin: 0;
+		display: block;
+		font-size: 1rem;
+		text-align: center;
+	}
+
+	main {
+		margin-top: 4rem;
+	}
 }