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
#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