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">37 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#design">
<h3>Design - <span class="link">48 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">65 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/2020/01/10/halley-immelt-ice-dust-pottery-maker-interview/">
<img src="/assets/images/blog/halley-immlet-pottery-maker-headshot.jpg" alt="I'm a Maker Because...with Halley Immelt"/>
<h3>Halley Immelt interview
<br>
<small>1/10/2020 • Pottery</small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2020/01/05/johnny-tromboukis-woodworks-maker-interview/">
<img src="/assets/images/blog/johnny-tromboukis-woodworks-headshot.jpg" alt="I'm a Maker Because...with Johnny Tromboukis"/>
<h3>Johnny Tromboukis interview
<br>
<small>1/5/2020 • Woodworking</small>
</h3>
</a>
<a class="dummy-media-object" href="/blog/makingit/aspen-vo-nbc-making-it-s2-contestant-interview/">
<img src="/assets/images/making-it/aspen-vo-maker-nbc-making-it.jpg" alt="Making It Interview...with Aspen Vo"/>
<h3>Aspen Vo interview
<br>
<small>12/23/2019 • Design</small>
</h3>
</a>
<a class="dummy-media-object" href="/blog/makingit/lilly-jimenez-nbc-making-it-s2-contestant-interview/">
<img src="/assets/images/making-it/lilly-jimenez-maker-contestant-nbc-making-it.jpg" alt="Making It Interview...with Lilly Jimenez"/>
<h3>Lilly Jimenez interview
<br>
<small>12/16/2019 • Design</small>
</h3>
</a>
<a class="dummy-media-object" href="/blog/makingit/matt-kawika-ortiz-nbc-making-it-s2-contestant-interview/">
<img src="/assets/images/making-it/matt-ortiz-maker-from-hawaii-nbc-making-it.jpg" alt="Making It Interview...with Matt Kawika Ortiz"/>
<h3>Matt Kawika Ortiz interview
<br>
<small>12/15/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>