Basic styling for breadcrumbs

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">

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;