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.
<style>.nav-banner { margin-top: -1px; }
.close { top: 50%; right: 0%; transform: translate(0%, -50%); }</style>
<p class="nav-banner db-ns dn tc center pa3 pl4 pr4 bg-mxc-very-light-grey relative" id="navBanner">Introducing <strong>THE MUSIC MAKERS</strong> a new podcast season from Makerviews - <a href="/podcast/" class="link mxc-grey hover-mid-grey b">Listen here!</a><span class="close pa3 pl4 pr4 hover-mid-grey absolute pointer">×</span></p>
<!-- mobile only, shorter cta -->
<p class="nav-banner dn-ns db tc center pa3 pl4 pr4 bg-mxc-very-light-grey hover-mid-grey relative" id="navBanner"><a href="/podcast/" class="link mxc-grey b"><strong>THE MUSIC MAKERS</strong> podcast season</a><span class="close pa3 pl4 pr4 hover-mid-grey absolute pointer">×</span></p>
<nav class="cf pa5-ns pa4">
<a class="no-underline no-hover-underline hover-mid-grey mxc-black f1-l f2-m f3 b fl-ns league-spartan no-underline" href="/" title="Home"><span class="no-underline">Makerviews</span></a>
<div class="fr-ns w-auto-ns w-100 pt0-ns pt3">
<a class="no-underline-ns underline hover-mid-grey mxc-black f6 f5-ns dib mr3-ns mr2" href="/blog/" title="Blog">Blog</a>
<a class="no-underline-ns underline hover-mid-grey mxc-black f6 f5-ns dib mr3-ns mr2" href="/podcast/" title="Podcast">Podcast</a>
<a class="no-underline-ns 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><span class="link">Woodworking</span> - <span class="no-underline">43 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#entrepreneur">
<h3><span class="link">Entrepreneur</span> - <span class="no-underline">16 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#design">
<h3><span class="link">Design</span> - <span class="no-underline">68 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/tags/#outdoors">
<h3><span class="link">Outdoors</span> - <span class="no-underline">5 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/miniviews/">
<h3><span class="link">Miniviews</span> - <span class="no-underline">78 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/brands/">
<h3><span class="link">Brands</span> - <span class="no-underline">4 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/story/">
<h3><span class="link">Story</span> - <span class="no-underline">2 posts</span></h3>
</a>
<a class="dummy-media-object" href="/blog/podcast/">
<h3><span class="link">podcast</span> - <span class="no-underline">6 posts</span></h3>
</a>
</div>
<div class="dummy-column">
<h2>Recent</h2>
<a class="dummy-media-object" href="/podcast/musicmakerspodcast/2025/01/08/phillip-lammonds-the-music-makers-podcast-interview/">
<img src="/assets/podcast/images/phillip-lammonds-artist-photo-kengrayimages.jpg" alt="Phillip Lammonds - THE MUSIC MAKERS"/>
<h3>Phillip Lammonds interview
<br>
<small>1/8/2025 • <span class="link">Music</span></small>
</h3>
</a>
<a class="dummy-media-object" href="/podcast/musicmakerspodcast/2024/12/19/maya-de-vitry-the-music-makers-podcast-episode/">
<img src="/assets/podcast/images/maya-de-vitry-music-in-portland_cjuliavarga.jpg" alt="Maya de Vitry - THE MUSIC MAKERS"/>
<h3>Maya de Vitry interview
<br>
<small>12/19/2024 • <span class="link">Music</span></small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2021/11/08/aja-smart-strand-texture-fiber-artist-interview/">
<img src="/assets/images/blog/aja-smart-macrame-fiber-maker-headshot.jpg" alt="I'm a Maker Because...with Aja Smart"/>
<h3>Aja Smart interview
<br>
<small>11/8/2021 • <span class="link">Design</span></small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2021/10/21/andrew-phelan-andy-spoons-interview/">
<img src="/assets/images/blog/andy-spoons-andrew-phelan-maker-headshot.jpg" alt="I'm a Maker Because...with Andy Spoons"/>
<h3>Andrew Phelan interview
<br>
<small>10/21/2021 • <span class="link">Woodworking</span></small>
</h3>
</a>
<a class="dummy-media-object" href="/miniviews/2021/10/18/amanda-krolczyk-plaid-beaver-interview/">
<img src="/assets/images/blog/amanda-krolczyk-plaid-beaver-co-artist-headshot.jpg" alt="I'm a Maker Because...with Amanda Krolczyk"/>
<h3>Amanda Krolczyk interview
<br>
<small>10/18/2021 • <span class="link">Woodworking</span></small>
</h3>
</a>
</div>
<small class="mxc-light-grey fr db-ns dn">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>
<script>
var closebtns = document.getElementsByClassName("close");
var i;
if (window.location.pathname.includes('/blog/makingit/')) {
var navBanner = document.getElementById("navBanner");
navBanner.style.display = 'none';
} else {
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
}
</script>