breadcrumbs

convert.sh

@@ -11,12 +11,14 @@ rm -rf ./_site
 
 generate_crumbs() {
     HTML_PATH="$1"
-    PARTS=$(echo "$HTML_PATH" |  sed -e 's/\(\/index\)\.html$//' | cut -d'/' -f3- | sed -e 's/\// /g')
+    ROOT="/"
+    [ -n "$SITE_ROOT" ] && ROOT="$SITE_ROOT"
+    PARTS=$(echo "$HTML_PATH" |  sed -e 's/\(\/index\)\?\.html$//' | cut -d'/' -f3- | sed -e 's/\// /g')
 
     echo '<nav class="crumbs"><ol>' >> "$HTML_PATH"
 
-    FULL_PATH="$SITE_ROOT"
-    printf '<li class="crumb"><a href="%s">Home</a></li>' "$SITE_ROOT" >> "$HTML_PATH"
+    FULL_PATH="$ROOT"
+    printf '<li class="crumb"><a href="%s">Home</a></li>' "$ROOT" >> "$HTML_PATH"
     for PART in $PARTS; do
         FULL_PATH="$FULL_PATH/$PART"
         printf '<li class="crumb"><a href="%s">%s</a></li>' "$FULL_PATH" "$PART" >> "$HTML_PATH"

css/base.css

@@ -36,6 +36,32 @@ code {
     font-family: "Ubuntu Mono", monospace;
 }
 
+nav {
+    border-bottom: 1px solid black;
+}
+
+.crumbs ol {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.crumb {
+    display: inline-block;
+}
+
+.crumb a::after {
+    display: inline-block;
+    color: black;
+    content: ">";
+    font-size: 0.8em;
+    font-weight: bold;
+    padding: 0 3px;
+}
+
+.crumb:last-child a::after {
+    display: none;
+}
+
 @media (prefers-color-scheme: dark) {
     html {
         color: gainsboro;
@@ -55,6 +81,14 @@ code {
     a:visited {
         color: #ffb9ff;
     }
+
+    nav {
+        border-bottom-color: gainsboro;
+    }
+
+    .crumb a::after {
+        color: gainsboro;
+    }
 }
 
 @media screen and (max-width: 980px) {