update: breadcrump getting useful

Author: proxyerium

assets/css/layouts.css

@@ -1,27 +1,39 @@
 .signage {
     display: flex;
     flex-direction: row;
+    white-space: nowrap;
 
     background-color: #111111;
-    padding: 2rem 2rem 2rem 1rem;
+    padding: 1rem 2rem 1rem 1rem;
 
 
     * {
         font-family: var(--font-mono);
         font-size: 32px;
     }
 
-    nav {
+    .breadcrump {
+        display: inline-flex;
+
         &::before{
             content: "";
             border-left: #fff solid .4rem;
             padding: .5rem;
         }
+        & :first-child::before{
+            content: "~";
+        }
+        & :not(:last-child):after{
+            content: "/";
+        }
+
+        a {
+            text-decoration-line: none;
+            color: magenta;
+        }
     }
-    a {
-        text-decoration-line: none;
-        color: magenta;
-    }
+
+
     h1 {
         color: #fff;
         &::after{
@@ -31,6 +43,8 @@
     }
 
 }
+
+
 .home {
     display: grid;
     justify-content: center;
@@ -71,8 +85,9 @@
 
 .single {
     grid-template-rows: min-content auto;
-}
-.single.breadcrumb {
-    place-self: center;
-    margin: 1rem 0;
+
+    .breadcrumb {
+        place-self: center;
+        margin: 1rem 0;
+    }
 }

layouts/partials/signage.html

@@ -1,7 +1,11 @@
 <nav class="signage">
-    <nav id="breadcrump">
-        <a href="/">~</a><!--
-        --><a href="..">{{ substr .RelPermalink 0 -1 }}</a>
+    <nav class="breadcrump">
+        <!-- Ancestors -->
+        {{ range after 0 .Ancestors.Reverse }}
+            <a href="{{ .RelPermalink }}">{{ .File.ContentBaseName }}</a>
+        {{ end }}
+        <!-- Current -->
+        <a href="{{ .RelPermalink }}">{{.File.ContentBaseName }}</a>
     </nav>
 
     <h1>$&nbsp;proxyerium</h1>