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

start spiking out a more responsive header/nav

This commit is contained in:
Coby Chapple 2013-03-15 13:25:35 +00:00
parent 02785d09a9
commit 7dcc0ba820
4 changed files with 85 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
site/_includes/header.html
View File

@ -1,6 +1,9 @@
<header>
<nav class="mobile-nav show-on-mobiles">
{% include primary-nav-items.html %}
</nav>
<div class="grid">
<div class="unit one-quarter center-on-mobiles">
<div class="unit one-third center-on-mobiles">
<h1>
<a href="{{ site.url }}/">
<span>Jekyll</span>
@ -8,18 +11,8 @@
</a>
</h1>
</div>
<nav class="unit three-quarters center-on-mobiles">
<ul class="grid">
<li class="unit one-third {% if page.overview %}current{% endif %}">
<a href="{{ site.url }}/">Overview</a>
</li>
<li class="unit one-third {% unless page.overview %}current{% endunless %}">
<a href="{{ site.url }}/docs">Documentation</a>
</li>
<li class="unit one-third">
<a href="https://github.com/mojombo/jekyll">View on GitHub</a>
</li>
</ul>
<nav class="main-nav unit two-thirds hide-on-mobiles">
{% include primary-nav-items.html %}
</nav>
</div>
</header>

11
site/_includes/primary-nav-items.html Normal file
View File

@ -0,0 +1,11 @@
<ul>
<li class="{% if page.overview %}current{% endif %}">
<a href="{{ site.url }}/">Overview</a>
</li>
<li class="{% unless page.overview %}current{% endunless %}">
<a href="{{ site.url }}/docs">Doc<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">umentation</span></a>
</li>
<li class="">
<a href="https://github.com/mojombo/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
</li>
</ul>

10
site/css/gridism.css
View File

@ -69,6 +69,10 @@
.pull-left { float: left; }
.pull-right { float: right; }
.show-on-mobiles {
display: none;
}
/* Responsive Stuff */
@media screen and (max-width: 568px) {
/* Stack anything that isn’t full-width on smaller screens */
@ -89,6 +93,12 @@
.hide-on-mobiles {
display: none !important;
}
.show-on-mobiles {
display: block !important;
}
a .show-on-mobiles {
display: inline !important;
}
}
/* Expand the wrap a bit further on larger screens */

58
site/css/style.css
View File

@ -38,6 +38,64 @@ nav li {
display: inline-block;
}
.main-nav {
margin-top: 52px;
text-align: center;
}
.main-nav ul {
display: inline-block;
}
.main-nav li {
margin-left: 10px;
}
.main-nav li a {
border-radius: 5px;
font-weight: 800;
font-size: 14px;
padding: 0.5em 1em;
text-shadow: none;
text-transform: uppercase;
transition: all .25s;
-moz-transition: all .25s;
-webkit-transition: all .25s;
}
.main-nav li a:hover {
background: #252525;
box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1);
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.main-nav li.current a {
background: #fc0;
color: #222;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5);
text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.mobile-nav ul {
overflow: hidden;
width: 100%;
display: table;
}
.mobile-nav a {
float: left;
width: 100%;
background: #fc0;
color: #333;
box-shadow: inset 0 0 3px #c00;
text-align: center;
}
.mobile-nav li {
display: table-cell;
width: 33.3%;
}
/* Footer */
body > footer {