Add rudimentary breadcrumb at top of page

styles/components/_portfolio_layout.scss

@@ -4,6 +4,15 @@
   }
 }
 
+.portfolio-breadcrumbs {
+  margin-bottom: $gap * 2;
+  color: $color-gray-medium;
+  font-size: $h5-font-size;
+  .icon {
+    @include icon-color($color-gray-medium);
+  }
+}
+
 .portfolio-navigation {
   @include panel-margin;
   margin-bottom: $gap * 4;

styles/core/_variables.scss

@@ -62,7 +62,7 @@ $color-black-light:          #212121;
 
 $color-gray-dark:            #323a45;
 $color-gray:                 #5b616b;
-$color-gray-medium:          #757575;
+$color-gray-medium:          #9b9b9b;
 $color-gray-light:           #aeb0b5;
 $color-gray-lighter:         #d6d7d9;
 $color-gray-lightest:        #f1f1f1;

templates/portfolios/breadcrumbs.html

@@ -1 +1,13 @@
-{{ portfolio.name }}
+{% from "components/icon.html" import Icon %}
+
+<div class="row portfolio-breadcrumbs">
+  <div class="portfolio-breadcrumbs__home">
+    {{ Icon("briefcase") }}
+    <span>
+      {{ portfolio.name }} Portfolio
+    </span>
+  </div>
+  <div class="portfolio-breadcrumbs__crumb">
+  </div>
+</div
+>