style mobile menu

diff --git a/style.styl b/style.styl
index 2807eb5..e8c5d3d 100644 (file)
--- 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 (file)
--- 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>
                <!--~}~-->