From 017bc4940c69f163e282fe09953ac99617040936 Mon Sep 17 00:00:00 2001
From: Matt Marcha <matt@marcha.pro>
Date: Sun, 25 Sep 2022 20:08:46 +1300
Subject: [PATCH] Update mobile menu with checkbox + wide screen menu

---
 header.php |   3 +-
 style.css  | 148 +++++++++++++++++++++++++++++++++++++----------------
 2 files changed, 107 insertions(+), 44 deletions(-)

diff --git a/header.php b/header.php
index 0a4d632..c0cc56d 100644
--- a/header.php
+++ b/header.php
@@ -43,7 +43,8 @@
         </section><!-- .site-branding -->
 
         <nav id="site-navigation">
-            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>
+            <input type="checkbox" id='mainmenu' class="menu-toggle" />
+            <label for="mainmenu" class="menu-toggle">Menu</label>
             <?php
             wp_nav_menu(
                 array(
diff --git a/style.css b/style.css
index 5bfdfdf..9870563 100644
--- a/style.css
+++ b/style.css
@@ -67,7 +67,8 @@ header#masthead .site-description {
 
 header#masthead {
 	position: relative;
-	max-width: 100vw;
+	width: 100vw;
+	max-width: 1200px;
 	overflow: hidden;
 }
 
@@ -76,70 +77,71 @@ header#masthead nav div.menu-main-menu-container {
 	display: none;
 }
 
-header#masthead nav button.menu-toggle {
+header#masthead nav label.menu-toggle,
+header#masthead nav input.menu-toggle {
 	position: absolute;
 	width: 5em;
 	height: 5em;
 	right: 1em;
-	top: 1em;
-	background-color: transparent;
+	top: 4.5em;
+	background-color: var(--bg);
   border: none;
 	color: var(--text-accent);
 	overflow: hidden;
 	font-size: .5em;
   font-variant: small-caps;
 	text-align: center;
-  padding-top: 3em;
+  padding-top: 3.2em;
 	color: var(--text-light);
 }
 
 
-header#masthead nav button.menu-toggle:before {
+header#masthead nav label.menu-toggle:before {
 	content: '|||';
 	display: block;
 	position: absolute;
 	width: 1em;
 	height: 1em;
-	top: -10px;
-	left: 0;
+	top: -8px;
+	left: 2px;
 	right: 0;
 	bottom: 0;
 	margin: 0;
 	transform: rotate(90deg);
-	font-size:4em;
+	font-size:2rem;
 	font-family: var(--mono-font);
 	letter-spacing: -12px;
 	line-height: 0.85;
-	
 	color: var(--text-light);
 }
 
 
-header#masthead nav div.menu-main-menu-container:before {
-	content: '+';
+header#masthead nav input.menu-toggle:checked ~ div.menu-main-menu-container {
 	display: block;
-	width: 1em;
-	height: 1em;
-	font-size: 4em;
-	line-height: 1;
-	text-align: center;
-	z-index: 1;
-	color: var(--text-accent);
-	transform: rotate(45deg);
-	position: absolute;
-	right: -0.03em;
-	top:  -0.15em;
-	background-color: var(--bg);
 }
 
-header#masthead nav button.menu-toggle:focus + div.menu-main-menu-container {
-	display: block;
+header#masthead nav input.menu-toggle:checked + label.menu-toggle:before {
+	content: '+';
+	transform: rotate(45deg);
+	font-size: 4rem;
+	left: -23px;
+	top: -18px;
+	-webkit-text-stroke: 2px var(--bg);
+}
+
+header#masthead div.menu-main-menu-container {
+	position: fixed;
+	width: 100vw;
+	height: 100%;
+	z-index: 9;
+	overflow: scroll;
+	background-color: var(--bg);
+		padding-bottom: 10rem;
 }
 
 header#masthead div.menu-main-menu-container ul {
 	list-style: none;
 	padding: 0 1em;
-	background-color: var(--accent-bg);
 	margin-bottom: 0;
 }
 
@@ -149,26 +151,19 @@ header#masthead div.menu-main-menu-container a {
 	text-align: center;
 }
 
-header#masthead div.menu-main-menu-container ul.menu > li > a:before,
-header#masthead div.menu-main-menu-container ul.menu > li > a:after {
-	content: '-------';
-	display: inline-block;
-	margin-top: -.5em;
-	padding: 0 .5em;
-	
-}
-
-header#masthead div.menu-main-menu-container ul.menu {
-	padding: 1em;
-}
-
 header#masthead div.menu-main-menu-container ul.menu > li {
-	margin-bottom: .5em;
+	margin-bottom: 1.5em;
 }
 header#masthead div.menu-main-menu-container ul.menu > li > a {
-	font-size: 1.3em;
+	font-size: 1.5em;
 	margin-bottom: .2em;
 	display: block;
+		font-variant: small-caps;
+}
+
+header#masthead div.menu-main-menu-container ul.menu > li > ul.sub-menu {
+	border: 1px solid var(--text-light);
+	padding: 1em;
 }
 
 
@@ -180,7 +175,7 @@ header#masthead div.menu-main-menu-container ul.sub-menu > li > a {
 
 main#primary nav.posts-navigation .nav-links,
 main#primary nav.post-navigation .nav-links{
-	 position: relative;
+	position: relative;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -210,6 +205,73 @@ main#primary nav.post-navigation .nav-next:after{
 	margin-left: .2em;
 }
 
+@media only screen and (min-width : 764px) {
+	
+	header#masthead {
+		overflow: visible;
+	}
+	
+	header#masthead nav div.menu-main-menu-container {
+	  display: block;
+	  position: static;
+	  overflow: visible;
+	  padding: 0 1em;
+	  text-align: right;
+	  margin-top: -2.6em;
+	  background-color: transparent;
+  }
+	
+	header#masthead nav label.menu-toggle,
+	header#masthead nav input.menu-toggle {
+		display: none;
+	}
+	
+	header#masthead div.menu-main-menu-container > ul.menu {
+		text-align: right;
+	}
+	
+	header#masthead div.menu-main-menu-container > ul.menu > li {
+		display: inline-block;
+		position: relative;
+		margin: 0 1em; 
+		text-align: left;
+	}
+	
+	header#masthead div.menu-main-menu-container > ul.menu > li > a {
+		font-size: 1.3em;
+	}
+	
+	header#masthead div.menu-main-menu-container > ul.menu > li > ul.sub-menu {
+		display: none;
+	}
+	
+	header#masthead div.menu-main-menu-container > ul.menu > li:hover > ul.sub-menu {
+		display: block;
+		position: absolute;
+		z-index: 1000;
+		right: -2em;
+		width: fit-content;
+		background-color: var(--bg);
+		box-shadow: 0 0 10px 5px var(--bg);
+	}
+	
+	header#masthead div.menu-main-menu-container > ul.menu > li:hover > ul.sub-menu > li {
+		width: auto;
+	  left: 0;
+	  width: fit-content;
+		padding: 0;
+		margin: 0;
+	}
+	
+	header#masthead div.menu-main-menu-container > ul.menu > li:hover > ul.sub-menu > li a {
+		white-space: nowrap;
+		font-size: 1em;
+		letter-spacing: -.5px;
+	}
+
+
+}
+
 /* Various
 --------------------------------------------- */