M _data/navigation.yml → _data/navigation.yml

@@ -1,10 +1,10 @@
 - name: home
   link: /
 - name: music
-  link: /music
+  link: /music/
 - name: art
-  link: /art
+  link: /art/
 - name: other
-  link: /other
+  link: /other/
 - name: about
-  link: /about
+  link: /about/

M _includes/navigation.html → _includes/navigation.html

@@ -1,7 +1,7 @@
 <nav>
 	<ul>
 		{% for item in site.data.navigation %}
-		<li><a href="{{ item.link }}">{{ item.name }}</a></li>
+		<li><a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a></li>
 		{% endfor %}
 	</ul>
 	<img src="/assets/img/aaoth-logo.png" alt="aaoth">

M _sass/main.scss → _sass/main.scss

@@ -23,6 +23,10 @@ a:hover {
 	color: #999;
 }
 
+.current {
+	color: #333;
+}
+
 nav {
 	display: flex;
 	font: 400 1.5em $title-font;