dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds mobile styling for menu at sub 600px viewport widths

This commit is contained in:
Joel Glovier 2014-02-17 16:36:21 -05:00
parent 3e6f2d8cef
commit 893b664f34
2 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/site_template/_includes/header.html
View File

@ -5,8 +5,11 @@
<a class="site-title" href="/">{{ site.name }}</a> <a class="site-title" href="/">{{ site.name }}</a>
<nav class="site-nav"> <nav class="site-nav">
<a class="page-link" href="/about">About</a> <span class="menu-icon">&#9776;</span>
<a class="page-link" href="/projects">Projects</a> <div class="trigger">
<a class="page-link" href="/about">About</a>
<a class="page-link" href="/projects">Projects</a>
</div>
</nav> </nav>
</div> </div>

55
lib/site_template/css/main.css
View File

@ -64,7 +64,9 @@ a:visited { color: #205caa; }
line-height: 56px; line-height: 56px;
} }
.site-nav > a { .site-nav .menu-icon { display: none; }
.site-nav .page-link {
margin-left: 20px; margin-left: 20px;
color: #727272; color: #727272;
letter-spacing: -.5px; letter-spacing: -.5px;
@ -281,4 +283,53 @@ a:visited { color: #205caa; }
.highlight .vc { color: #008080 } /* Name.Variable.Class */ .highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */ .highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */ .highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
/* media queries */
/* ----------------------------------------------------------*/
@media screen and (max-width: 600px) {
.wrap { padding: 0 12px; }
.site-nav {
position: fixed;
z-index: 10;
top: 14px; right: 8px;
background-color: white;
border-radius: 5px;
border: 1px solid #e8e8e8;
cursor: pointer;
}
.site-nav .menu-icon {
display: block;
font-size: 24px;
color: #505050;
float: right;
width: 36px;
text-align: center;
line-height: 36px;
}
.site-nav .trigger {
clear: both;
margin-bottom: 5px;
display: none;
}
.site-nav:hover .trigger,
.site-nav:active .trigger {
display: block;
}
.site-nav .page-link {
display: block;
text-align: right;
line-height: 1.25;
padding: 5px 10px;
margin: 0;
}
}