get nyavbar kind of working

3 years ago · 1879d2ef09
parent 62cd366a52
commit 1879d2ef09
3 changed files with 44 additions and 8 deletions
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@ -0,0 +1,4 @@
+- name: Home
+  link: /
+- name: About
+  link: /about/
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -11,6 +11,16 @@
 <body>
 	<header>
 		<h1>{{ site.title }}</h1>
+
+		<nav>
+			<ul>
+				{% for item in site.data.navigation %}
+					<li{% if page.url == item.link %} class="current"{% endif %}>
+						<a href="{{ item.link }}">{{ item.name }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</nav>
 	</header>
 	<main>
 		{{ content }}
--- a/_sass/style.scss
+++ b/_sass/style.scss
@ -15,12 +15,8 @@ body {
 	margin: 0;
 }

-header, footer {
-	padding: 20px;
-}
-
-header {
-	border-bottom: thin solid $color-primary;
+footer {
+	padding: 20px 0;
 }

 footer {
@ -32,7 +28,33 @@ h1, h2, h3, h4, h5, h6 {
 }

 h1 {
-	max-width: $content-width;
-	margin: 0 auto;
+	text-align: center;
+	margin: 20px 0;
 	font-weight: 400;
 }
+
+a {
+	color: $color-primary;
+}
+
+nav {
+	border-top: thin solid $color-primary;
+	border-bottom: thin solid $color-primary;
+
+	ul {
+		list-style-type: none;
+		padding: 0;
+		margin: 0 auto;
+		max-width: $content-width;
+
+		li {
+			display: inline-block;
+
+			a {
+				padding: 20px;
+				display: inline-block;
+			}
+		}
+	}
+}
+