Tidy up navigation code

- use SASS variables for colours and spacing
- make navigation an include not a macro (because it doesn’t take any
  parameters)

app/assets/stylesheets/app.scss

@@ -40,20 +40,10 @@
   }
 }
 
-
-
 #global-header #logo {
-      white-space: nowrap;
+  white-space: nowrap;
 }
 
-
-.column-three-quarters {
-  @include grid-column(3/4);
-}
-
-
-
-
 a:visited {
-    color: #005ea5;
+  color: $link-colour;
 }

app/assets/stylesheets/components/navigation.scss

@@ -1,23 +1,26 @@
-#navigation {
+.navigation {
-  padding: 50px 0 0 0;
-}
 
-#navigation li {
+  padding: $gutter 0 0 0;
-  @include core-16();
-  margin: 3px 0;
-}
 
-#navigation ul {
+  li {
-  border-bottom: 1px solid #777;
+    @include core-16();
-  margin: 0 20px 0 0;
+    margin: 3px 0;
-  list-style-type: none;
+  }
-  padding: 0;
-}
 
-#navigation a:link,a:visited {
+  ul {
-  text-decoration: none;
+    border-bottom: 1px solid $border-colour;
-}
+    margin: 0 20px 0 0;
+    list-style-type: none;
+    padding: 0;
+  }
 
-#navigation a:hover {
+  a:link,
-    color: #2e8aca;
+  a:visited {
-}
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: $link-hover-colour;
+  }
+
+}

app/templates/main_nav.html

@@ -1,5 +1,4 @@
-{% macro main_nav() %}
+<nav class="navigation">
-  <nav id="navigation">
   <h3><a href="{{ url_for('.dashboard') }}">Service name</a></h3>
   <ul>
     <li><a href="{{ url_for('.sendsms') }}">Send text messages</a></li>
@@ -16,5 +15,4 @@
   <ul>
     <li><a href="/user-profile">Your details</a></li>
   </ul>
-  </nav>
+</nav>
-{% endmacro %}

app/templates/withnav_template.html

@@ -4,7 +4,7 @@
 {% block fullwidth_content %}
 	<div class="grid-row">
 	  <div class="column-one-quarter">
-	    {{ main_nav() }}
+	    {% include "main_nav.html" %}
 	  </div>
 	  <div class="column-three-quarters">
 	    {% block maincolumn_content %}{% endblock %}