From a6b928b42b3b55a7b5f36a1d2f892e86c2776968 Mon Sep 17 00:00:00 2001
From: jaina heartles <me@heartles.xyz>
Date: Wed, 14 Dec 2022 03:13:09 -0800
Subject: [PATCH] Basic styling for breadcrumbs

---
 .../controllers/web/drive/directory.tmpl.html  | 18 ++++++++++++++----
 static/site.css                                |  5 +++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/main/controllers/web/drive/directory.tmpl.html b/src/main/controllers/web/drive/directory.tmpl.html
index aaafe36..f6d59bf 100644
--- a/src/main/controllers/web/drive/directory.tmpl.html
+++ b/src/main/controllers/web/drive/directory.tmpl.html
@@ -1,10 +1,20 @@
 <div class="drive">
   <ol class="breadcrumbs">
-    <li><a href="{.mount_path}/{.base_drive_path}/">/</a></li>
+    <li>
+      <a href="{.mount_path}/{.base_drive_path}/">
+        <i class="fa-solid fa-cloud"></i>
+        <span class="directory">/</span>
+      </a>
+    </li>
     {#for .breadcrumbs |$crumb, $i| =}
-      <li><a href="{.mount_path}/{.base_drive_path}
-        {= #for @slice(.breadcrumbs, 0, $i) |$c|}/{$c}{/for =}
-      /{$crumb}">{$crumb}</a></li>
+      <i class="fa-solid fa-chevron-right"></i>
+      <li>
+        <a href="{.mount_path}/{.base_drive_path}
+          {= #for @slice(.breadcrumbs, 0, $i) |$c|}/{$c}{/for =}
+        /{$crumb}">
+          {$crumb}
+        </a>
+      </li>
     {/for =}
   </ol>
   <table class="directory-listing">
diff --git a/static/site.css b/static/site.css
index 5106b6b..1a172eb 100644
--- a/static/site.css
+++ b/static/site.css
@@ -218,6 +218,11 @@ button:hover, a.button:hover {
   }
 }
 
+.drive .breadcrumbs {
+  list-style: none;
+  display: flex;
+}
+
 .drive .icons {
   display: flex;
   justify-content: flex-end;