From 166a988bc961c9efeb89e838d64c359a1ec2f8bd Mon Sep 17 00:00:00 2001
From: John Hess <john@jthess.com>
Date: Fri, 7 Jun 2024 16:07:53 -0500
Subject: [PATCH] breadcrumb for informational page

---
 _includes/breadcrumb.html         |  6 ++++++
 _layouts/informational.html       |  4 +++-
 _scss/pages/home.scss             | 27 ++++++++++++++++++++++++++-
 assets/css/butter-dir-listing.css |  2 +-
 assets/js/butter-dir-listing.js   |  2 +-
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 _includes/breadcrumb.html

diff --git a/_includes/breadcrumb.html b/_includes/breadcrumb.html
new file mode 100644
index 0000000..2d79c7b
--- /dev/null
+++ b/_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>
\ No newline at end of file
diff --git a/_layouts/informational.html b/_layouts/informational.html
index ab49972..953434a 100644
--- a/_layouts/informational.html
+++ b/_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 }}
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 277b71a..cc64854 100644
--- a/_scss/pages/home.scss
+++ b/_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;
diff --git a/assets/css/butter-dir-listing.css b/assets/css/butter-dir-listing.css
index 2166219..f541592 100644
--- a/assets/css/butter-dir-listing.css
+++ b/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;
diff --git a/assets/js/butter-dir-listing.js b/assets/js/butter-dir-listing.js
index 8452db5..284832f 100644
--- a/assets/js/butter-dir-listing.js
+++ b/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);