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">30 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#design">
<h3>Design - <span class="link">27 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">52 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/01/12/maker-interview-bria-hammock-designer-go-slo-wyo/">
<img src="/assets/images/blog/bria-hammock-go-slo-designer-headshot.jpg" alt="I'm a Maker Because...with Bria Hammock"/>
<h3>Bria Hammock interview
<br>
<small>1/12/2019 • Design</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2019/01/03/maker-quotes-inspirational-motivational-quote/">
<img src="/assets/images/blog/maker-quotes-2019-inspirational-motivational-makerviews.jpg" alt="Maker Quotes 2019 - Motivational Quotes"/>
<h3>Maker Quotes 2019 - Motivational Quotes
<br>
<small>1/3/2019 • Business</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2018/12/13/maker-interview-caleb-wojcik-diy-video-creator/">
<img src="/assets/images/blog/caleb-wojcik-diy-video-guy-interview-headshot.jpg" alt="I'm a Maker Because...with Caleb Wojcik"/>
<h3>Caleb Wojcik interview
<br>
<small>12/13/2018 • Design</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2018/12/13/maker-interview-sadie-mae-john-woodworking/">
<img src="/assets/images/blog/sadie-mae-john-awesome-orange-interview-headshot.jpg" alt="I'm a Maker Because...with Sadie Mae John"/>
<h3>Sadie Mae John interview
<br>
<small>12/13/2018 • Woodworking</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2018/12/13/maker-interview-ben-stafford-illustrator-designer/">
<img src="/assets/images/blog/ben-stafford-illustrator-interview-shot.jpg" alt="I'm a Maker Because...with Ben Stafford"/>
<h3>Ben Stafford interview
<br>
<small>12/13/2018 • 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>