Updated spacing, added navigation links to the footer

Author: curiositry

assets/css/main.css

@@ -153,8 +153,7 @@ a {
   color: #dd4814;
   transition: color ease 0.3s;
 }
-
-a:hover {
+a:hover, a:active, a.active{
   color: orange;
 }
 
@@ -202,7 +201,7 @@ strong, bold, b{
 .post-content > h4,
 .post-content > h5,
 .post-content > h5{
-  margin-top: 1.65rem;
+  margin-top: 3.3rem;
   margin-bottom: 1.1rem;
 }
 
@@ -1331,6 +1330,20 @@ aside.note:before{
   color:#aaa;
 }
 
+.site-footer nav li{
+  display:inline;
+
+}
+
+.site-footer nav li:after{
+  content:"•";
+  color:#aaa;
+  margin:.55rem;
+}
+.site-footer nav li:last-child:after{
+  content:"";
+}
+
 .site-footer a{
   color:  lightslategray;
   text-decoration: none;

default.hbs

@@ -32,6 +32,14 @@
       <a class="subscribe icon-feed" href="{{@blog.url}}/rss/">
        <span class="tooltip">Subscribe!</span>
       </a>
+<!--  Uncomment if you want a copy of your navigation in the footer. It’s pretty cool, and gives your visitors something to do when they finish an article other than commenting, sharing, or closing the tab.    -->
+<!--
+      <nav role="navigation">
+        <ul>
+          {{>navigation-links}}
+        </ul>
+      </nav>
+-->
       <section>
         <span class="print-data copyright-notice">
           &copy; {{date format="YYYY"}}

partials/menu.hbs

@@ -2,6 +2,7 @@
 THE MENU: Enabling this partial creates a hamburger icon that opens a menu. It’s responsive, lightweight, and works with javascript disabled.
 -->
 
+
 <!-- Trigger element, which is hidden -->
 <input type="checkbox" id="menu-trigger" />
 
@@ -14,19 +15,18 @@ THE MENU: Enabling this partial creates a hamburger icon that opens a menu. It
     <!--
     Edit these links before enabling the menu! … or make sure you have an about and contact       page.
     -->
-    <li><a href="{{@blog.url}}">Home</a></li>
-    <li><a href="{{@blog.url}}/about">About</a></li>
-    <li><a href="{{@blog.url}}/contact">Contact</a></li>
+    {{>navigation-links}}
   </ul>
 </nav>
 
 <!--
 This makes the rest of the page move down with the menu for style points, but is              optional. The menu works fine with pure css.
 -->
 <script>
-var navTrigger = document.getElementById("menu-trigger");
-var bodyTag = document.getElementsByTagName("body")[0];
-var menu = document.getElementById("menu");
+  var navTrigger = document.getElementById("menu-trigger");
+  var menu = document.getElementById("menu");
+  var bodyTag = document.getElementsByTagName("body")[0];
+
 
 navTrigger.onclick = function () {
   if(navTrigger.checked){

partials/navigation-links.hbs

@@ -0,0 +1,3 @@
+<li><a href="{{@blog.url}}">Home</a></li>
+<li><a href="{{@blog.url}}/about">About</a></li>
+<li><a href="{{@blog.url}}/contact">Contact</a></li>