diff --git a/css/index.css b/css/index.css index 6d1966d..83ceb71 100644 --- a/css/index.css +++ b/css/index.css @@ -19,6 +19,13 @@ body { margin-bottom: 1rem; } +/* header menu hides on mobile screen, no padding needed anymore */ +@media screen and (max-width:40em) { + .header { + padding-bottom:0.7rem; + } +} + .header .headline { text-align:left; color: #ffe; @@ -68,6 +75,37 @@ body { transition: all 0.35s ease-in-out; } +.mobile-menu { + /* background-color:#f3f3f0; */ + list-style: none; + margin: -0.5em -1em; +} + +.mobile-menu li { + padding:0; +} + +.mobile-menu li a { + display:block; + width:100%; + height:100%; + margin:0; + padding:0.3em; + padding-left: 1em; + font-size: 1.1em; + font-weight:bold; + text-transform:uppercase; +} + +.mobile-menu li a.is-active { + background-color:#d6d6d4; +} + +.mobile-menu li a:hover { + background-color: #ededea; + transition: all 0.35s ease-in-out; +} + .columns { padding:0 10px; } diff --git a/index.html b/index.html index 3812995..3d3f1a1 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ <header class="header"> <a class="#header"><img src="images/logo-green.png"></a> <h2 class="tagline show-for-medium">The friendly neighborhood tech community</h2> - <ul class="header-subnav"> + <ul class="header-subnav show-for-medium"> <li><a href="#">Zom.bi</a></li> <li><a href="#" class="is-active">Blog</a></li> <li><a href="#">Wiki</a></li> @@ -28,6 +28,19 @@ </ul> </header> + <div class="row show-for-small-only"> + <div class="columns small-12"> + <div class="whitebox"> + <ul class="mobile-menu"> + <li><a href="#">Zom.bi</a></li> + <li><a href="#" class="is-active">Blog</a></li> + <li><a href="#">Wiki</a></li> + <li><a href="#">Mumble</a></li> + </ul> + </div> + </div> + </div> + <div class="row main"> <div class="medium-9 columns content-box"> <!-- Post begin -->