com web/people: Steal the phpweb mobile menu \o/: include/header.inc styles.css

Commit: cd864f5822923be73fb13d19d8bfd6c9a70596e3 Author: Hannes Magnusson <bjori@mongodb.com> Thu, 12 Dec 2013 13:17:46 -0800 Parents: 8b2ea4ca2820f9c9129c4b70a0c057646fe7ed28 Branches: master Link: http://git.php.net/?p=web/people.git;a=commitdiff;h=cd864f5822923be73fb13d19d8bfd6c9a70596e3 Log: Steal the phpweb mobile menu \o/ Changed paths: M include/header.inc M styles.css Diff: diff --git a/include/header.inc b/include/header.inc index b8a1c08...88c650f 100644 --- a/include/header.inc +++ b/include/header.inc @@ -13,6 +13,8 @@ <body> <header> + <div id="mainmenu-toggle-overlay"></div> + <input type="checkbox" id="mainmenu-toggle"> <nav class="fullscreen"> <div class="mainscreen"> <a href="/" class="home"><img src="//php.net/images/logo.php" width="48" height="24" alt="php"><span class="subdomain">people</span></a> diff --git a/styles.css b/styles.css index feb5b58..a22cf21 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,4 @@ /* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */ - /* {{{ widths blatantly stolen from bootstrap */ .fullscreen { width: 940px; @@ -21,6 +20,48 @@ body { margin: 50px 0 0 0; } +#mainmenu-toggle-overlay, #mainmenu-toggle { + display: none; +} +#mainmenu-toggle:checked + nav { + /* This just has to be big enough to cover whatever's in nav. */ + max-height: 50em; +} +@media (max-width:465px) { + + #mainmenu-toggle-overlay { + background: #669 url(http://php..net/images/mobile-menu.png) no-repeat center center; + float: right; + display: block; + height: 32px; + width: 34px; + margin-top: 10px; + margin-right: 10px; + border-radius: 5px; + } + #mainmenu-toggle { + height: 32px; + width: 34px; + line-height: 32px; + margin-top: 10px; + margin-right: -34px; + float: right; + border-bottom: 0 none; + display: inline-block; + opacity: 0; + } + nav { + max-height: 0; + overflow: hidden; + display: block; + } + nav ul, nav li, nav a { + display: block; + } + header { + position: absolute; + } +} @media (max-width: 767px) { .fullscreen { width: auto; @@ -64,11 +105,12 @@ body { } /* }}} */ + body { - background-color: #eeeef6; color: #444; font-family: Tahoma, Arial, sans-serif, serif, monospace; background-color: #fff; + height: 100%; } header { top: 0px; @@ -83,7 +125,6 @@ header { } footer { width: 100%; - position: absolute; border-top: .25em solid #99C; background-color: #262626; } @@ -137,6 +178,7 @@ section *[id] { section.fullscreen { /* Force the content below the fixed header */ display: block; + height: 100%; } .secondscreen { vertical-align: top;