added navigation support

zutrinken · Mar 3, 2015 · 95a063d · 95a063d
1 parent 7a459be
commit 95a063d
Show file tree

Hide file tree

Showing 14 changed files with 245 additions and 52 deletions.
diff --git a/assets/css/icons.css b/assets/css/icons.css
@@ -1,10 +1,10 @@
 @font-face {
 	font-family: 'icons';
-	src:	url('../fonts/icons.eot?59582296');
-	src:	url('../fonts/icons.eot?59582296#iefix') format('embedded-opentype'),
-			url('../fonts/icons.woff?59582296') format('woff'),
-			url('../fonts/icons.ttf?59582296') format('truetype'),
-			url('../fonts/icons.svg?59582296#icons') format('svg');
+	src:	url('../fonts/icons.eot?51058516');
+	src:	url('../fonts/icons.eot?51058516#iefix') format('embedded-opentype'),
+			url('../fonts/icons.woff?51058516') format('woff'),
+			url('../fonts/icons.ttf?51058516') format('truetype'),
+			url('../fonts/icons.svg?51058516#icons') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -35,4 +35,5 @@
 .ic-facebook:before { content: '\e806'; } /* '' */
 .ic-arrow-right:before { content: '\e807'; } /* '' */
 .ic-arrow-left:before { content: '\e808'; } /* '' */
-.ic-twitter:before { content: '\e809'; } /* '' */
+.ic-twitter:before { content: '\e809'; } /* '' */
+.ic-menu:before { content: '\e80a'; } /* '' */
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -401,15 +401,16 @@ img {
 	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
 }
 .blog-logo {
-	position: relative;
-	z-index: 10;
+	position: fixed;
+	max-width: 2em;
+	left: 0;
+	top: 0;
+	margin: 1em;
+	z-index: 200;
 }
 .blog-logo img {
 	display: block;
 	margin: 0 auto;
-	padding: 1em;
-	max-width: 20em;
-	max-height: 4em;
 }
 .blog-name {
 	position: relative;
@@ -465,22 +466,19 @@ img {
    ========================================================================== */
 
 #navigation {}
-
-#home-link {
+.nav-button {
 	position: fixed;
-	left: 0;
 	top: 0;
 	margin: 1em;
 	z-index: 200;
+}	
+.nav-button#home-button {
+	left: 0;
 }
-#rss-link {
-	position: fixed;
+.nav-button#menu-button {
 	right: 0;
-	top: 0;
-	margin: 1em;
-	z-index: 200;
 }
-#navigation a {
+.nav-button a {
 	display: block;
 	height: 1.5em;
 	margin-bottom: 1em;
@@ -498,26 +496,26 @@ img {
 	-webkit-border-radius: 2em;
 	border-radius: 2em;
 }
-#navigation a:hover,
-#navigation a:focus {
+.nav-button a:hover,
+.nav-button a:focus {
 	color: #f26a3d;
 	border-color: #f26a3d;
 }
-.cover-active #navigation a {
+.cover-active .nav-button a {
 	color: #fff;
 	border-color: rgba(255,255,255,0.5);
 	background: transparent;
 }
-.cover-active #navigation a:hover,
-.cover-active #navigation a:focus {
+.cover-active .nav-button a:hover,
+.cover-active .nav-button a:focus {
 	color: #fff;
 	border-color: #fff;
 }
-#navigation a i {
+.nav-button a i {
 	display: inline-block;
 	color: inherit;
 }
-#navigation a i:before {
+.nav-button a i:before {
 	position: relative;
 	width: auto;
 	top: -2px;
@@ -526,6 +524,132 @@ img {
 	line-height: 1.6em;
 }
 
+/* ==========================================================================
+   Menu
+   ========================================================================== */
+
+#menu {
+	position: fixed;
+	width: 100%;
+	height: 0;
+	top: 0;
+	right: 0;
+	background: #f26a3d;
+	background: rgba(242,97,48,.95);
+	z-index: 400;
+	overflow: hidden;
+	opacity: 0;
+	font-family: 'Fira Sans', sans-serif;
+	-webkit-transition: opacity ease .4s;
+	transition: opacity ease .4s;
+}
+.menu-active #menu {
+	height: 100%;
+	opacity: 1;
+}
+#menu .close-button {
+	position: absolute;
+	width: 2em;
+	height: 2em;
+	top: 0;
+	right: 0;
+	margin: 1em;
+	border: 1px solid #fff;
+	color: transparent;
+	cursor: pointer;
+	-webkit-transition: all ease 0.3s;
+	transition: all ease 0.3s;
+	-webkit-border-radius: 2em;
+	border-radius: 2em;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+#menu .close-button:hover,
+#menu .close-button:focus {
+	-webkit-transform: rotate(180deg);
+	transform: rotate(180deg);
+}
+#menu .close-button:after,
+#menu .close-button:before {
+	position: absolute;
+	width: 1em;
+	height: 1px;
+	left: 50%;
+	top: 50%;
+	margin-left: -0.5em;
+	content: '';
+	background: #fff;
+}
+#menu .close-button:after {
+	-webkit-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+#menu .close-button:before {
+	-webkit-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+}
+#menu ul {
+	position: relative;
+	width: 50%;
+	top: 50%;
+	margin: auto;
+	padding: 0;
+	text-align: center;
+	-webkit-transform: translateY(-100%) rotateX(-45deg);
+	transform: translateY(-100%) rotateX(-45deg);
+	-webkit-transition: all ease .8s;
+	transition: all ease .8s;
+}
+.menu-active #menu ul {
+	-webkit-transform: translateY(-50%) rotateX(0);
+	transform: translateY(-50%) rotateX(0);
+}
+#menu li {
+	position: relative;
+	font-size: 1.5em;
+	line-height: 0.666em;
+}
+#menu li:before {
+	position: absolute;
+	width: 50%;
+	height: 1px;
+	left: 25%;
+	bottom: 0;
+	margin: auto;
+	content: '';
+	background: rgba(255,255,255,0.5);
+}
+#menu li:last-child:before {
+	display: none;
+}
+#menu li.active {}
+#menu li a {
+	display: inline-block;
+	padding: 0.5em 1em;
+	color: #fff;
+	color: rgba(255,255,255,0.75);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	font-weight: 400;
+}
+#menu li a:hover,
+#menu li a:focus {
+	color: #fff;
+}
+.menu-active #menu li a {
+	padding: 1em;
+}
+#menu li a i {
+	position: relative;
+	top: -0.25em;
+	font-size: 0.5em;
+	color: inherit;
+}
+#menu li.active a {
+	color: #fff;
+	font-weight: 500;
+}
+
 /* ==========================================================================
    Reading Progress
    ========================================================================== */
@@ -1061,8 +1185,8 @@ img {
    ========================================================================== */
 
 @media only screen and (max-width: 960px) {
-	#home-link,
-	#rss-link {
+	.blog-logo,
+	.nav-button {
 		position: absolute;
 	}
 	#blog-author {
@@ -1105,6 +1229,9 @@ img {
 	#main-nav a {
 		margin: 16px;
 	}
+	#menu ul {
+		width: 75%;
+	}
 	.post-author-avatar {
 		margin: -0.25em 0 0 0.5em;
 	}

diff --git a/assets/fonts/icons.eot b/assets/fonts/icons.eot
diff --git a/assets/fonts/icons.svg b/assets/fonts/icons.svg
diff --git a/assets/fonts/icons.ttf b/assets/fonts/icons.ttf
diff --git a/assets/fonts/icons.woff b/assets/fonts/icons.woff
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -3,6 +3,26 @@ jQuery(function($) {
 	var body = $('body');
 	var viewport = $(window);
 
+	/* ==========================================================================
+	   Menu
+	   ========================================================================== */
+
+	function menu() {
+		body.toggleClass('menu-active');
+	};
+
+	$('#menu').on({
+		'click': function() {
+			menu();
+		}
+	});
+
+	$('.menu-button').on({
+		'click': function() {
+			menu();
+		}
+	});
+
 	/* ==========================================================================
 	   Parallax cover
 	   ========================================================================== */

diff --git a/author.hbs b/author.hbs
@@ -5,12 +5,20 @@
 <header id="blog-header"{{#if cover}} class="has-cover"{{else}}{{#if @blog.cover}} class="has-cover"{{/if}}{{/if}}>
 	<div class="inner">
 		<nav id="navigation">
-			<span id="home-link">
-				<a href="{{@blog.url}}" title="Home"><i class="ic ic-arrow-left"></i> Home</a>
+			{{#if @blog.logo}}
+			<span class="blog-logo">
+				<a href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>
 			</span>
-			<span id="rss-link">
-				<a href="{{@blog.url}}/author/{{name}}/rss/" title="{{name}} Feed"><i class="ic ic-rss"></i> {{name}}</a>
+			{{else}}
+			<span id="home-button" class="nav-button">
+				<a class="home-button" href="{{@blog.url}}" title="Home"><i class="ic ic-arrow-left"></i> Home</a>
 			</span>
+			{{/if}}
+			{{#if @blog.navigation}}
+			<span id="menu-button" class="nav-button">
+				<a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
+			</span>
+			{{/if}}
 		</nav>
 		{{#if cover}}
 		<div class="blog-cover cover" style="background-image: url('{{cover}}');"></div>

diff --git a/default.hbs b/default.hbs
@@ -17,6 +17,8 @@
 
 <body class="{{body_class}}">
 
+	{{navigation}}
+
 	<section id="wrapper">
 		<div id="ajax-container">
 			{{{body}}}

diff --git a/index.hbs b/index.hbs
@@ -3,16 +3,17 @@
 <header id="blog-header"{{#if @blog.cover}} class="has-cover"{{/if}}>
 	<div class="inner">
 		<nav id="navigation">
-			<span id="home-link">
-				<!--<a href="{{@blog.url}}/about/" title="About">About</a>-->
+			{{#if @blog.logo}}
+			<span class="blog-logo">
+				<a href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>
 			</span>
-			<span id="rss-link">
-				<a href="{{@blog.url}}/rss/" title="Feed"><i class="ic ic-rss"></i> Feed</a>
+			{{/if}}
+			{{#if @blog.navigation}}
+			<span id="menu-button" class="nav-button">
+				<a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
 			</span>
+			{{/if}}
 		</nav>
-		{{#if @blog.logo}}
-<!-- 		<span class="blog-logo"><a href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a></span> -->
-		{{/if}}
 		<h1 class="blog-name"><a href="{{@blog.url}}">{{@blog.title}}</a></h1>
 		{{#if @blog.description}}
 		<span class="blog-description">{{@blog.description}}</span>

diff --git a/page.hbs b/page.hbs
@@ -5,12 +5,20 @@
 <header id="post-header"{{#if image}} class="has-cover" {{/if}}>
 	<div class="inner">
 		<nav id="navigation">
-			<span id="home-link">
-				<a href="{{@blog.url}}" title="Home"><i class="ic ic-arrow-left"></i> Home</a>
+			{{#if @blog.logo}}
+			<span class="blog-logo">
+				<a href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>
 			</span>
-			<span id="rss-link">
-				<a href="{{@blog.url}}/rss/" title="Feed"><i class="ic ic-rss"></i> Feed</a>
+			{{else}}
+			<span id="home-button" class="nav-button">
+				<a class="home-button" href="{{@blog.url}}" title="Home"><i class="ic ic-arrow-left"></i> Home</a>
 			</span>
+			{{/if}}
+			{{#if @blog.navigation}}
+			<span id="menu-button" class="nav-button">
+				<a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
+			</span>
+			{{/if}}
 		</nav>
 		<h1 class="post-title">{{{title}}}</h1>
 		{{#if image}}<div class="post-cover cover" style="background-image: url('{{image}}');"></div>{{/if}}

diff --git a/partials/navigation.hbs b/partials/navigation.hbs
@@ -0,0 +1,9 @@
+<div id="menu">
+	<a class="close-button">Close</a>
+	<ul>
+		{{#foreach navigation}}
+		<li class="nav-{{slug}}{{#if current}} active{{/if}}" role="presentation"><a href="{{url absolute="true"}}">{{label}}</a></li>
+		{{/foreach}}
+		<li class="nav-rss"><a href="{{@blog.url}}/rss/"><i class="ic ic-rss"></i> Subscribe</a></li>
+	</ul>
+</div>