Main navigation
The website's main navigation, written as an include to be referenced within Jekyll's layouts. Wrapped in a border for this demo purpose.
<nav class="cf pa4-ns pt3 pl3 pr2 pb3">
<a class="no-underline no-hover-underline hover-mid-grey mxc-black f4 f2-ns b fl cb-ns league-spartan no-underline" href="/" title="Home"><span class="no-underline">Makerviews</span></a>
<div class="fr pt2-ns">
<a class="no-underline hover-mid-grey mxc-black f6 f5-ns dib mr3-ns mr2" href="/blog/" title="Blog">Blog</a>
<a class="no-underline hover-mid-grey mxc-black f6 f5-ns dib mr3-ns mr2" href="/podcast/" title="Podcast">Podcast</a>
<a class="no-underline hover-mid-grey mxc-black f6 f5-ns dib mr3-ns mr2" href="/about/" title="About">About</a>
<div class="cf mt1">
<link rel="stylesheet" type="text/css" href="/assets/css/fullscreen-search.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/fullscreen-search-component.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="container db-ns dn">
<div id="fullscreen-search" id="search-container" class="fullscreen-search">
<form class="fullscreen-search-form overpass">
<input class="fullscreen-search-input overpass" id="search-input" type="search" placeholder="Search..."/>
<button class="fullscreen-search-submit" type="submit">Search</button>
</form>
<div class="fullscreen-search-content">
<div class="dummy-column">
<article id="results-container"></article>
<script src="/assets/js/search-script.js" type="text/javascript"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json'
})
</script>
</div>
<div class="dummy-column">
<h2>Interests & Categories</h2>
<a class="dummy-media-object" href="/blog/tags/#woodworking">
<h3>Woodworking - <span class="link">35 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#design">
<h3>Design - <span class="link">38 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#outdoors">
<h3>Outdoors - <span class="link">5 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#photography">
<h3>Photography - <span class="link">2 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/miniviews/">
<h3>Miniviews - <span class="link">63 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/brands/">
<h3>Brands - <span class="link">4 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/story/">
<h3>Story - <span class="link">2 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/podcast/">
<h3>podcast - <span class="link">4 posts</span></h3>
</a>
</div>
<div class="dummy-column">
<h2>Recent</h2>
<a class="dummy-media-object" href="/miniviews/2019/10/28/char-miller-king-woodenmaven-woodworking-interview/">
<img src="/assets/images/blog/char-miller-king-wooden-maven-woodworker-headshot.jpg" alt="I'm a Maker Because...with Char Miller-King"/>
<h3>Char Miller-King interview
<br>
<small>10/28/2019 • Woodworking</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/10/25/kc-mack-provisions-maker-interview/">
<img src="/assets/images/blog/kc-mack-provisions-handmade-leather-maker-baseball-gloves.jpg" alt="I'm a Maker Because...with KC Mack"/>
<h3>KC Mack interview
<br>
<small>10/25/2019 • Leather</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/10/05/rose-leveque-handmade-pottery-maker-interview/">
<img src="/assets/images/blog/rose-leveque-pottery-maker-interview-photo.jpg" alt="I'm a Maker Because...with Rose Le Veque"/>
<h3>Rose Le Veque interview
<br>
<small>10/5/2019 • Pottery</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/08/25/marvin-jobs-cavalier-goods-co-leatherwork/">
<img src="/assets/images/blog/marvin-jobs-cavalier-leather-goods-co-maker-photo.jpg" alt="I'm a Maker Because...with Marvin Jobs"/>
<h3>Marvin Jobs interview
<br>
<small>8/25/2019 • Leather</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/08/25/jessica-brewer-maiden-montana-jewelry-maker/">
<img src="/assets/images/blog/jessica-brewer-maiden-montana-jewelry-earring-designer.jpg" alt="I'm a Maker Because...with Jessica Brewer"/>
<h3>Jessica Brewer interview
<br>
<small>8/25/2019 • Jewelry</small>
</h3>
</a>
</div>
<small class="mxc-light-grey fr">Press esc key to exit search.</small>
</div><!-- /fullscreen-search-content -->
<span class="fullscreen-search-close"></span>
</div>
<div class="overlay"></div>
</div>
<script src="/assets/js/classie.js"></script>
<script>
(function() {
var fullscreenSearch = document.getElementById( 'fullscreen-search' ),
input = fullscreenSearch.querySelector( 'input.fullscreen-search-input' ),
ctrlClose = fullscreenSearch.querySelector( 'span.fullscreen-search-close' ),
isOpen = isAnimating = false,
// show/hide search area
toggleSearch = function(evt) {
// return if open and the input gets focused
if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;
if( isOpen ) {
classie.remove( fullscreenSearch, 'open' );
// trick to hide input text once the search overlay closes
// todo: hardcoded times, should be done after transition ends
if( input.value !== '' ) {
setTimeout(function() {
classie.add( fullscreenSearch, 'hideInput' );
setTimeout(function() {
classie.remove( fullscreenSearch, 'hideInput' );
input.value = '';
}, 300 );
}, 500);
}
input.blur();
}
else {
classie.add( fullscreenSearch, 'open' );
}
isOpen = !isOpen;
};
// events
input.addEventListener( 'focus', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
// esc key closes search overlay
// keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
if( keyCode === 27 && isOpen ) {
toggleSearch(ev);
}
} );
/***** for demo purposes only: don't allow to submit the form *****/
fullscreenSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
})();
</script>
</div>
</div>
</nav>