Add active collection

Author: jgthms

_includes/menu.html

@@ -36,12 +36,12 @@
   <nav class="menu-collections">
     <p><strong>Collections</strong></p>
     <ul>
-      <li><a class="menu-collection-link" href="{{site.url}}/animations/">Animations</a></li>
-      <li><a class="menu-collection-link" href="{{site.url}}/box-model/">Box model</a></li>
-      <li><a class="menu-collection-link" href="{{site.url}}/flexbox/">Flexbox</a></li>
-      <li><a class="menu-collection-link" href="{{site.url}}/positioning/">Positioning</a></li>
-      <li><a class="menu-collection-link" href="{{site.url}}/transitions/">Transitions</a></li>
-      <li><a class="menu-collection-link" href="{{site.url}}/typography/">Typography</a></li>
+      <li><a class="menu-collection-link{% if page.collection_name == 'Animations' %} menu-collection-link--active{% endif %}" href="{{site.url}}/animations/">Animations</a></li>
+      <li><a class="menu-collection-link{% if page.collection_name == 'Box model' %} menu-collection-link--active{% endif %}" href="{{site.url}}/box-model/">Box model</a></li>
+      <li><a class="menu-collection-link{% if page.collection_name == 'Flexbox' %} menu-collection-link--active{% endif %}" href="{{site.url}}/flexbox/">Flexbox</a></li>
+      <li><a class="menu-collection-link{% if page.collection_name == 'Positioning' %} menu-collection-link--active{% endif %}" href="{{site.url}}/positioning/">Positioning</a></li>
+      <li><a class="menu-collection-link{% if page.collection_name == 'Transitions' %} menu-collection-link--active{% endif %}" href="{{site.url}}/transitions/">Transitions</a></li>
+      <li><a class="menu-collection-link{% if page.collection_name == 'Typography' %} menu-collection-link--active{% endif %}" href="{{site.url}}/typography/">Typography</a></li>
     </ul>
   </nav>
   <nav id="menu-nav" class="menu-nav">

box-model.html

@@ -1,6 +1,6 @@
 ---
 layout: collection
-collection_name: "Box Model"
+collection_name: "Box model"
 description: "define the size and behavior of the HTML element"
 ---
 

css/website.css

@@ -9,6 +9,3 @@
   strong
     color: $plum-invert
     font-weight: $weight-bold
-
-.heading-description
-  margin-top: 1rem

sass/heading.sass

@@ -34,12 +34,17 @@
   li
     display: inline-block
     vertical-align: top
-  a
-    border-radius: 2px
-    padding: 2px 4px
-    &:hover
-      background: $alpha
-      color: $alpha-invert
+
+.menu-collection-link
+  border-radius: 2px
+  padding: 2px 4px
+  &:hover
+    background: $alpha
+    color: $alpha-invert
+
+.menu-collection-link--active
+  background: $alpha
+  color: $alpha-invert
 
 .menu-nav
   align-items: stretch