EbookFoundation
/
gutenbergsite
mirror of https://github.com/EbookFoundation/gutenbergsite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6 from Guy-Sowden/master 

Better mobile menubar ui
master
Haocheng Zhao 2020-09-16 10:40:57 -04:00 committed by GitHub
parent a3becfab0f 7ecbf3c224
commit cf4b2f97a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_includes/menu.html
View File

@ -5,7 +5,8 @@
</a>
<!-- </div>-->
<div id="menu">
<label for="tm" id="toggle-menu">Menu<span class="drop-icon">&#9662;</span></label>
<label for="tm" id="toggle-menu"><span class="drop-icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="hamburger-menu" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
</svg></span></label>
<input type="checkbox" id="tm" />
<ul class="main-menu cf">
<li>

17
gutenberg/new_nav.css
View File

@ -5,6 +5,7 @@ nav {
position: fixed;
right: 0;
top: 0;
min-height: 80px;
z-index: 999;
height: 40px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
@ -50,6 +51,11 @@ nav {
display: inline-block;
border: none;
}
.hamburger-menu{
margin: 20px;
width: 30px;
height: 30px;
}
nav .donate {
color: black;
font-size: 16px;
@ -80,6 +86,7 @@ nav {
height: auto;
font-size: 12px;
position: absolute;
overflow: hidden;
}
nav .donate {
display: none;
@ -90,6 +97,12 @@ nav {
display: inline-block;
padding: 5px;
}
#main_logo{
padding-left: 5vw;
}
#tm:checked + .main-menu {
margin-top: 80px;
}
}
#menu {
@ -129,7 +142,6 @@ nav {
#toggle-menu {
border-width: 0 0 1px;
}
#menu .sub-menu {
border-width: 1px 1px 0;
margin: 0 1em;
@ -182,7 +194,7 @@ nav {
}
#menu label.drop-icon, #toggle-menu span.drop-icon {
padding: 1em;
padding: 0em 1em 1em 1em;
font-size: 1em;
text-align: center;
background-color: rgba(0, 0, 0, .125);
@ -358,3 +370,4 @@ nav {
*/