breadcrumb for informational page

_includes/breadcrumb.html

@@ -0,0 +1,6 @@
+<div class="breadcrumb-name">
+    <a href="../">
+        <img class="back" src="{{ site.baseurl }}/assets/images/next.svg">
+    </a>
+    {{ include.page_name }}
+</div>

_layouts/informational.html

@@ -2,7 +2,9 @@
 layout: basic
 ---
 
-< {{ page.breadcrumb }} <hr />
+<div class="top-nav">
+    {% include breadcrumb.html page_name=page.breadcrumb %}
+</div>
 
 <div class="informational-container">
     {{ content }}

_scss/pages/home.scss

@@ -140,11 +140,18 @@ a:active {
 // Informational Layout Styles
 // --------------------------------
 
+.top-nav {
+  max-width: 860px;
+  margin: 0px auto;
+  display: flex;
+  align-items: center;
+}
+
 .informational-container {
   width: 100%;
   max-width: 680px;
   margin: 0 auto;
-  padding: 10px;
+  padding: 0 10px;
   img.hero {
     width: 100%;
   }
@@ -196,6 +203,24 @@ a:active {
 // Copied from butter-dir-listing.css
 // ----------------------------------
 
+.breadcrumb-name {
+  display: flex;
+  align-items: center;
+  height: 34px;
+  margin: 10px;
+  a {
+      display: flex;
+      align-items: center;
+  
+  }
+  img.back {
+      width: 18px;
+      height: 18px;
+      rotate: 180deg;
+      margin-right: 10px;
+  }
+}
+
 .filerow {
   display: flex;
   align-items: center;

assets/css/butter-dir-listing.css

@@ -43,7 +43,7 @@ div.foot {
     font-size: 14px;
 }
 
-.folder-name {
+.breadcrumb-name {
     display: flex;
     align-items: center;
     height: 34px;

assets/js/butter-dir-listing.js

@@ -135,7 +135,7 @@ window.onload = function () {
 
     // Secondary header
     const secondaryHeader = document.createElement('div');
-    secondaryHeader.classList.add('folder-name');
+    secondaryHeader.classList.add('breadcrumb-name');
     secondaryHeader.innerHTML = `<a href="../"><img class="back" src="${inferredBaseURL}assets/images/next.svg"></a>`;
     secondaryHeader.innerHTML += `${thisDirsName}`;
     listDiv.parentNode.insertBefore(secondaryHeader, listDiv);