From c5e948d7d2af9b5e052a7173ebbd8c907e3d6fab Mon Sep 17 00:00:00 2001
From: Jason Woofenden <jason@jasonwoof.com>
Date: Mon, 2 Nov 2015 19:25:29 -0500
Subject: [PATCH] style mobile menu

---
 style.styl    |   40 ++++++++++++++++++++++++++++++++++++++--
 template.html |   12 +++++++-----
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/style.styl b/style.styl
index 2807eb5..e8c5d3d 100644
--- a/style.styl
+++ b/style.styl
@@ -16,6 +16,7 @@ sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
 mobile_menu_width = 600px // switch to mobile menu when screen gets this small
 
 // fonts
+font_size_large = 18px
 font_size_normal = 15px
 font_size_small = 13px
 font_size_tiny = 11px
@@ -354,9 +355,44 @@ table.evenodd
 #mobile_menu_check
 	display: none;
 @media screen and (max-width: (mobile_menu_width))
-	#mobile_menu_check:not(:checked) + ul
+	#mobile_menu_check:not(:checked) + div
 		display: none
+	#mobile_menu_check:checked + div
+		display: block
+		position: relative
+		> ul
+			z-index: 1000
+			background: white
+			background: rgba(255, 255, 255, 0.95)
+			display: block
+			position: absolute
+			top: 100%
+			width: 96%
+			left: 2%
+			margin: 0
+			padding: 0
+			border-bottom-left-radius: 4px
+			border-bottom-right-radius: 4px
+			box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
+			li
+				padding: 15px
+				& + li
+					padding-top: 0
+				a
+					font-size: 18px
+				white-space: nowrap
+
+			// undo space_evenly stuff:
+			&:before, &:after
+				display: none
+				content: none
+				margin: 0
+				padding: 0
+			> *
+				position: static
+				top: 0
+
 	nav#site-nav ul > li, #mobile_menu_button
 		display: block
-		background: #eee
 		padding: 3px 10px 4px 17px
+		font-size: font_size_large
diff --git a/template.html b/template.html
index 7ab8d1f..0d63311 100644
--- a/template.html
+++ b/template.html
@@ -21,11 +21,13 @@
 		<!--~$navbar_items once_if {~-->
 			<nav id="site-nav">
 				<form action="#" method="get">
-				<label for="mobile_menu_check" id="mobile_menu_button">&#9776; Menu</label>
-				<input type="checkbox" name="mobile_menu_check" id="mobile_menu_check">
-				<ul><!--~$navbar_items {~-->
-					<li><a href="~filename~">~title html~</a></li><!--~}~-->
-				</ul>
+					<label for="mobile_menu_check" id="mobile_menu_button">&#9776; Menu</label>
+					<input type="checkbox" name="mobile_menu_check" id="mobile_menu_check">
+					<div>
+						<ul><!--~$navbar_items {~-->
+							<li><a href="~filename~">~title html~</a></li><!--~}~-->
+						</ul>
+					</div>
 				</form>
 			</nav>
 		<!--~}~-->
-- 
1.7.10.4