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">33 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#design">
<h3>Design - <span class="link">32 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">57 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/05/28/maker-interview-ryan-popoff-popov-leather-goods/">
<img src="/assets/images/blog/ryan-popoff-leather-maker-headshot.jpg" alt="I'm a Maker Because...with Ryan Popoff"/>
<h3>Ryan Popoff interview
<br>
<small>5/28/2019 • Leather</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/03/18/maker-interview-tamar-hannah-3x3-custom-woodworking/">
<img src="/assets/images/blog/tamar-hannah-3x3-custom-woodworking.jpg" alt="I'm a Maker Because...with Tamar Hannah"/>
<h3>Tamar Hannah interview
<br>
<small>3/18/2019 • Woodworking</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/03/15/maker-interview-nes-croft-musician/">
<img src="/assets/images/blog/nes-croft-musician-photo.jpg" alt="I'm a Maker Because...with Nes Croft"/>
<h3>Nes Croft interview
<br>
<small>3/15/2019 • Music</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/03/08/maker-interview-david-roost-roostmade-co/">
<img src="/assets/images/blog/david-roost-roostmade-co-wood-finishes.jpg" alt="I'm a Maker Because...with David Roost"/>
<h3>David Roost interview
<br>
<small>3/8/2019 • Woodworking</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/02/04/maker-interview-anne-laure-le-cunff/">
<img src="/assets/images/blog/anne-laure-le-cunff-maker-headshot.jpg" alt="I'm a Maker Because...with Anne-Laure"/>
<h3>Anne-Laure interview
<br>
<small>2/4/2019 • Design</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>