From 43b6f161780458ac43e104042781e895c99e86fd Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.co.uk>
Date: Tue, 24 Mar 2015 20:40:53 +0000
Subject: [PATCH] Changed active classes to be done via SASS

---
 .../opdavies/_layouts/default.html.twig       |  1 +
 .../opdavies/_partials/main-menu.html.twig    | 12 ++---
 .../opdavies/opdavies/assets/css/styles.css   | 49 +++++++++++++------
 .../opdavies/assets/scss/modules/_header.scss | 28 +++++++----
 4 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/source/themes/opdavies/opdavies/_layouts/default.html.twig b/source/themes/opdavies/opdavies/_layouts/default.html.twig
index dde7465f..011bdaad 100644
--- a/source/themes/opdavies/opdavies/_layouts/default.html.twig
+++ b/source/themes/opdavies/opdavies/_layouts/default.html.twig
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="{% if page.front == true %}{{ site.description }}{% else %}{{ page.description }}{% endif %}">
     <title>{% if (page.front == true) and (site.subtitle) %}{{ site.subtitle }}{% else %}{{ page.title }}{% endif %} | {{ site.title }}</title>
+    
     <link rel="stylesheet" href="{{ site.url }}/{{ theme_path('assets/css/styles.css') }}">
   </head>
   <body{% if page.nav %} class="{{ page.nav }}"{% endif %}>
diff --git a/source/themes/opdavies/opdavies/_partials/main-menu.html.twig b/source/themes/opdavies/opdavies/_partials/main-menu.html.twig
index 1dca706c..478c8c57 100644
--- a/source/themes/opdavies/opdavies/_partials/main-menu.html.twig
+++ b/source/themes/opdavies/opdavies/_partials/main-menu.html.twig
@@ -1,10 +1,10 @@
 <nav class="main-menu" role="navigation">
   <ul>
-    <li><a href="{{ site.url }}"{% if page.nav == 'about' %} class="active"{% endif %}>About</a></li>
-    <li><a href="{{ site.url }}/work"{% if page.nav == 'work' %} class="active"{% endif %}>Work</a></li>
-    <li><a href="{{ site.url }}/services"{% if page.nav == 'services' %} class="active"{% endif %}>Services</a></li>
-    <li><a href="{{ site.url }}/talks"{% if page.nav == 'talks' %} class="active"{% endif %}>Talks</a></li>
-    <li><a href="{{ site.url }}/blog"{% if page.nav == 'blog' %} class="active"{% endif %}>Blog</a></li>
-    <li><a href="{{ site.url }}/contact"{% if page.nav == 'contact' %} class="active"{% endif %}>Contact</a></li>
+    <li><a href="{{ site.url }}" class="about">About</a></li>
+    <li><a href="{{ site.url }}/work" class="work">Work</a></li>
+    <li><a href="{{ site.url }}/services" class="services">Services</a></li>
+    <li><a href="{{ site.url }}/talks" class="talks">Talks</a></li>
+    <li><a href="{{ site.url }}/blog" class="blog">Blog</a></li>
+    <li><a href="{{ site.url }}/contact" class="contact">Contact</a></li>
   </ul>
 </nav>
\ No newline at end of file
diff --git a/source/themes/opdavies/opdavies/assets/css/styles.css b/source/themes/opdavies/opdavies/assets/css/styles.css
index 9ec3f541..4ca9c86a 100644
--- a/source/themes/opdavies/opdavies/assets/css/styles.css
+++ b/source/themes/opdavies/opdavies/assets/css/styles.css
@@ -117,6 +117,22 @@ header[role="banner"] {
           content: " ";
           display: block;
           clear: both; } }
+    header[role="banner"] .inner .main-menu ul {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      overflow: hidden;
+      *zoom: 1; }
+      header[role="banner"] .inner .main-menu ul li {
+        list-style-image: none;
+        list-style-type: none;
+        margin-left: 0;
+        display: inline-block;
+        vertical-align: middle;
+        *vertical-align: auto;
+        *zoom: 1;
+        *display: inline;
+        white-space: nowrap; }
     header[role="banner"] .inner .main-menu a {
       border-bottom: 1px solid #064771;
       color: white;
@@ -138,22 +154,23 @@ header[role="banner"] {
         header[role="banner"] .inner .main-menu a {
           margin: 0 0 0 .5em; } }
 
-.main-menu ul {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  *zoom: 1; }
-  .main-menu ul li {
-    list-style-image: none;
-    list-style-type: none;
-    margin-left: 0;
-    display: inline-block;
-    vertical-align: middle;
-    *vertical-align: auto;
-    *zoom: 1;
-    *display: inline;
-    white-space: nowrap; }
+body.about .main-menu a.about {
+  border-bottom-color: white; }
+
+body.work .main-menu a.work {
+  border-bottom-color: white; }
+
+body.services .main-menu a.services {
+  border-bottom-color: white; }
+
+body.talks .main-menu a.talks {
+  border-bottom-color: white; }
+
+body.blog .main-menu a.blog {
+  border-bottom-color: white; }
+
+body.contact .main-menu a.contact {
+  border-bottom-color: white; }
 
 body {
   font-size: 0.875em;
diff --git a/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss b/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss
index b7e6f723..595f25c0 100644
--- a/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss
+++ b/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss
@@ -11,15 +11,21 @@ header[role="banner"] {
       @include container(960px);
     }
 
-    .main-menu a {
-      border-bottom: 1px solid #064771;
-      color: white;
-      display: block;
-      margin: 0 .5em 0 0;
-      text-decoration: none;
+    .main-menu {
+      ul {
+        @include inline-block-list;
+      }
 
-      &.active {
-        border-color: white;
+      a {
+        border-bottom: 1px solid #064771;
+        color: white;
+        display: block;
+        margin: 0 .5em 0 0;
+        text-decoration: none;
+
+        &.active {
+          border-color: white;
+        }
       }
     }
 
@@ -40,6 +46,8 @@ header[role="banner"] {
   }
 }
 
-.main-menu ul {
-  @include inline-block-list;
+@each $class in about, work, services, talks, blog, contact {
+  body.#{$class} .main-menu a.#{$class} {
+    border-bottom-color: white;
+  }
 }
\ No newline at end of file