From b11ade054feab3f5571a1759e57003fa723152fc Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 10 Jun 2018 00:08:24 +0200
Subject: [PATCH] breadcrumbs with only last item colorized

---
 templates/widgets/breadcrumbs.hamlet |  2 +-
 templates/widgets/breadcrumbs.lucius | 98 +++++++++++-----------------
 2 files changed, 40 insertions(+), 60 deletions(-)

diff --git a/templates/widgets/breadcrumbs.hamlet b/templates/widgets/breadcrumbs.hamlet
index ca7501f63..6bf4e9e7f 100644
--- a/templates/widgets/breadcrumbs.hamlet
+++ b/templates/widgets/breadcrumbs.hamlet
@@ -4,4 +4,4 @@ $newline never
     $forall bc <- parents
       <li .breadcrumbs__item>
         <a .breadcrumbs__link href="@{fst bc}">#{snd bc}
-    <li .breadcrumbs__item.breadcrumbs__item--active>#{title}
+    <li ..breadcrumbs__item.breadcrumbs__last-item>#{title}
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index 7a1b604ab..5dc759413 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -6,7 +6,6 @@
   margin-left: -40px;
   margin-right: -40px;
   margin-bottom: 10px;
-  padding-left: 30px;
   transition: margin-bottom .2s ease;
 }
 
@@ -23,76 +22,57 @@
 }
 
 .breadcrumbs__item {
-  padding-left: 10px;
-  padding-right: 4px;
+  padding-left: 25px;
+  padding-right: 14px;
   position: relative;
   line-height: 28px;
   opacity: 0.8;
   z-index: 1;
 
-  --color-bg-odd: transparent;
-  --color-bg-odd-after: var(--color-dark);
-  --color-bg-even: var(--color-primary);
-  --color-bg-even-after: var(--color-primary);
+  --color-separator: var(--color-primary);
 
   &:hover {
     opacity: 1;
   }
 
   &:first-child {
-    padding-left: 20px;
+    padding-left: 50px;
   }
 
-  &:nth-child(even) {
-    background-color: var(--color-bg-even);
-
-    &::before {
-      border-left-color: var(--color-bg-odd-after) !important;
-    }
-
-    &::after {
-      border-left-color: var(--color-bg-even-after) !important;
-    }
-  }
-
-  &:nth-child(odd) {
-    background-color: var(--color-bg-odd);
-
-    &::before {
-      border-left-color: var(--color-bg-even-after) !important;
-    }
-
-    &::after {
-      border-left-color: var(--color-bg-odd-after) !important;
-    }
-  }
-
-  &:not(:first-child) {
-    padding-left: 25px;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      border-top: 14px solid transparent;
-      border-bottom: 14px solid transparent;
-      border-left: 14px solid transparent;
-      z-index: 10;
-    }
-  }
-
-  &:last-child {
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: -14px;
-      border-top: 14px solid transparent;
-      border-bottom: 14px solid transparent;
-      border-left: 14px solid transparent;
-      z-index: 10;
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    right: -13px;
+    width: 18px;
+    height: 18px;
+    border-bottom: 2px solid var(--color-separator);
+    border-right: 2px solid var(--color-separator);
+    transform: rotate(-45deg);
+    z-index: 10;
+  }
+}
+
+.breadcrumbs__last-item {
+  padding-right: 20px;
+  background-color: var(--color-separator);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: -8px;
+    width: 18px;
+    height: 18px;
+    background-color: var(--color-dark);
+    border-bottom: 2px solid var(--color-primary);
+    border-right: 2px solid var(--color-primary);
+    transform: rotate(-45deg);
+    z-index: 10;
+  }
+
+  &::after {
+    background-color: var(--color-separator);
+    right: -8px;
   }
 }