From 9a3ad65dbf07985ed7054e6584041c2240bb5a61 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 24 Jun 2018 21:44:28 +0200
Subject: [PATCH] new design for breadrumbs. more clearly visible now

---
 templates/default-layout.lucius      |  2 +-
 templates/widgets/breadcrumbs.hamlet |  2 +-
 templates/widgets/breadcrumbs.lucius | 66 ++++++++++++----------------
 3 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 045c95312..c847f086e 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -172,7 +172,7 @@ h4 {
 }
 
 .main__content-body {
-  padding: 10px 40px 60px;
+  padding: 0 40px 60px;
 }
 
 @media (max-width: 768px) {
diff --git a/templates/widgets/breadcrumbs.hamlet b/templates/widgets/breadcrumbs.hamlet
index 6bf4e9e7f..0d51fea84 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__last-item>#{title}
+    <li .breadcrumbs__item>#{title}
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index 9ac639551..87adc2e70 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -1,30 +1,42 @@
 .breadcrumbs__container {
   position: relative;
-  align-self: flex-end;
-  background-color: var(--color-dark);
-  color: white;
-  transition: margin-bottom .2s ease;
+  color: var(--color-font);
+  margin-left: 40px;
+  margin-top: 20px;
 }
 
-.breadcrumbs__container--animated {
-  transition: left .2s ease;
+@media (max-width: 768px) {
+
+  .breadcrumbs__container {
+    margin-left: 20px;
+  }
 }
 
 .breadcrumbs__link {
-  color: var(--color-lightwhite);
 
   &:hover {
-    color: var(--color-lightwhite);
+    color: var(--color-fontsec);
   }
 }
 
 .breadcrumbs__item {
-  padding-left: 25px;
   padding-right: 14px;
   position: relative;
   line-height: 28px;
   opacity: 0.8;
   z-index: 1;
+  margin-right: 10px;
+
+  &:last-child {
+    margin-right: 0;
+    font-weight: 800;
+    color: var(--color-dark);
+    top: 1px;
+
+    &::after {
+      content: none;
+    }
+  }
 
   --color-separator: var(--color-primary);
 
@@ -36,37 +48,13 @@
   &::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);
+    top: 11px;
+    right: 0;
+    width: 7px;
+    height: 7px;
+    border-bottom: 1px solid var(--color-separator);
+    border-right: 1px 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;
-  }
-}