From 4d61aab05870b4ecdba98134e95afdd7af0b78d6 Mon Sep 17 00:00:00 2001
From: oupala <oupala@users.noreply.github.com>
Date: Wed, 29 May 2019 14:31:44 +0200
Subject: [PATCH] feat: css styling for breadcrumb

Add cdd styling inspired from the following website:

https://css-tricks.com/triangle-breadcrumbs/
---
 apaxy/theme/apaxy.js    |  2 +-
 apaxy/theme/header.html |  2 +-
 apaxy/theme/style.css   | 50 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/apaxy/theme/apaxy.js b/apaxy/theme/apaxy.js
index b2e70c6..608b377 100644
--- a/apaxy/theme/apaxy.js
+++ b/apaxy/theme/apaxy.js
@@ -91,7 +91,7 @@ arr.forEach(function(value){
         }
         cont++;
 });
-document.getElementById("breadcrumbs").innerHTML = bread;
+document.getElementById("breadcrumb").innerHTML = bread;
 if (uri.substring(uri.length-1) != '/'){
         var indexes = document.getElementsByClassName('indexcolname'),
         i = indexes.length;
diff --git a/apaxy/theme/header.html b/apaxy/theme/header.html
index 297a9f0..1c30e70 100644
--- a/apaxy/theme/header.html
+++ b/apaxy/theme/header.html
@@ -1,7 +1,7 @@
 <div class="wrapper">
 <!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
 
-<ol class="breadcrumb" id="breadcrumbs">
+<ol class="breadcrumb" id="breadcrumb">
 </ol>
 
 <input type="search" id="filter" placeholder="filter contents" />
diff --git a/apaxy/theme/style.css b/apaxy/theme/style.css
index 2415c5f..7aa1103 100644
--- a/apaxy/theme/style.css
+++ b/apaxy/theme/style.css
@@ -253,3 +253,53 @@ tr.parent a[href^="/"] {
 .errorCode {
 	font-size: 80px;
 }
+
+/*------------------------------------*\
+    Breadcrumb
+\*------------------------------------*/
+
+.breadcrumb {
+    white-space: nowrap;
+    padding: 0;
+    margin: 0;
+}
+.breadcrumb li {
+    display: inline-block;
+    line-height: 26px;
+    margin: 0 9px 0 -10px;
+    padding: 0 15px;
+    position: relative;
+}
+.breadcrumb li::before,
+.breadcrumb li::after {
+    border-right: 1px solid #666666;
+    content: '';
+    display: block;
+    height: 50%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: -1;
+    transform: skewX(45deg);
+}
+.breadcrumb li::after {
+    bottom: 0;
+    top: auto;
+    transform: skewX(-45deg);
+}
+
+.breadcrumb li:last-of-type::before,
+.breadcrumb li:last-of-type::after {
+    display: none;
+}
+
+.breadcrumb li a {
+   letter-spacing: -1px;
+   text-decoration: none;
+}
+
+.breadcrumb li:nth-of-type(1) a { color: hsl(0, 0%, 70%); }
+.breadcrumb li:nth-of-type(2) a { color: hsl(0, 0%, 65%); }
+.breadcrumb li:nth-of-type(3) a { color: hsl(0, 0%, 50%); }
+.breadcrumb li:nth-of-type(4) a { color: hsl(0, 0%, 45%); }