Improve navigation bar

Author: emilbaehr

_includes/header.html

@@ -13,16 +13,20 @@
 			{% else %}
 				<img class="headerIcon" src="{{ site.app_icon }}">
 			{% endif %}
+			<div class="divider"></div>
 		</div>
 		<p class="headerName">{{ site.app_name }}</p>
 	</div>
 	<nav class="scroll">
 		<ul>
+			{% for page in site.pages %}
+				{% if page.include_in_header == true %}
+				<li><a href="{{ page.url | relative_url }}" target="_self">{{ page.title }}</a></li>
+				{% endif %}
+			{% endfor %}
 			{% if site.presskit_download_link %}
-			<li><a href="{{ site.presskit_download_link }}">Press Kit</a></li>
+				<li><a href="{{ site.presskit_download_link }}">Press Kit</a></li>
 			{% endif %}
-			<li><a href="{{ page.url | relative_url }}">Changelog</a></li>
-			<li><a href="{{ page.url | relative_url }}">Privacy Policy</a></li>
 		</ul>
 	</nav>
 </header>

_pages/changelog.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: What's New
+include_in_header: true
 ---
 
 # Changelog

_pages/privacypolicy.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Privacy Policy
+include_in_header: false
 ---
 
 **Last updated**  

_sass/layout.scss

@@ -20,6 +20,14 @@
 	background-color: rgba($header-color, $header-transparency);
 }
 
+@media only screen and (max-width: 768px) {
+
+	.headerBackground {
+		height: 80px;
+	}
+
+}
+
 .subPageHeaderBackground {
 	background-color: #fff;
 }
@@ -40,26 +48,10 @@
 		"f f f f f f f f f f f f";
 }
 
-.page {
-	margin-top: 30px;
-	margin-bottom: 70px;
-	grid-column: 3/11;
-}
-
-@media only screen and (max-width: 768px) {
-
-	.page {
-		margin-top: 30px;
-		margin-bottom: 70px;
-		grid-column: 1/-1;
-	}
-	
-} 
-
 @media only screen and (max-width: 1070px) {
 
 	.container {					// Set up the container for the site content
-		grid-template-rows: 115px 811px auto auto;
+		grid-template-rows: 80px 811px auto auto;
 	}
 }
 
@@ -68,7 +60,7 @@
 	.container {
 		grid-column-gap: 0px;
 		grid-template-columns: 1;
-		grid-template-rows: 115px auto auto auto auto;
+		grid-template-rows: 80px auto auto auto auto;
 		grid-template-areas: 
 			"h h h h h h h h h h h h"
 			"i i i i i i i i i i i i"
@@ -78,6 +70,22 @@
 	}
 }
 
+.page {
+	margin-top: 30px;
+	margin-bottom: 70px;
+	grid-column: 3/11;
+}
+
+@media only screen and (max-width: 768px) {
+
+	.page {
+		margin-top: 30px;
+		margin-bottom: 70px;
+		grid-column: 1/-1;
+	}
+	
+} 
+
 header {
 	grid-area: h;
 	display: flex;
@@ -96,12 +104,13 @@ header {
 	white-space: nowrap;
 	display: flex;
 	font-weight: bold;
-	padding-bottom: 0px;
+	margin-left: 15px;
 }
 
 @media only screen and (max-width: 768px) {
 
 	.logo {
+		height: 80px;
 		margin-right: 0px;
 	}
 
@@ -116,9 +125,20 @@ header {
 	height: 50px;
 	-webkit-clip-path: url(#shape);
 	clip-path: url(#shape);
-	margin-right: 15px;
 }
 
+@media only screen and (max-width: 768px) {
+
+	.divider {
+		position: relative;
+		min-width: 1px;
+		max-width: 1px;
+		background-color:rgba(#ffffff, 0.1);
+		display: inline-block;
+		margin-left: 15px;
+	}	
+	
+} 
 
 
 // Navigation Links
@@ -127,7 +147,7 @@ header {
 	width: 100%;
 	align-items: center;
 	justify-content: flex-end;
-
+	
 	margin-left: 15px;
 	height: 115px;
 
@@ -141,6 +161,7 @@ header {
 @media only screen and (max-width: 768px) {
 
 	.scroll {
+		height: 80px;
 		justify-content: flex-start;
 	}	
 
@@ -162,6 +183,14 @@ nav > ul li {
 	padding-left: 30px;
 }
 
+@media only screen and (max-width: 768px) {
+
+	nav > ul li {
+		padding-left: 20px;
+	}
+
+}
+
 nav > ul li:first-child {
 	padding-left: 0px;
 }