From df3799dbd10b5143f37fa008ed96dd4fec66e625 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@satellytes.com>
Date: Sat, 9 Jun 2018 19:03:08 +0200
Subject: [PATCH] moved breadcrumbs into page content area

---
 templates/default-layout.hamlet      |  5 ++
 templates/default-layout.lucius      | 17 ++++---
 templates/widgets/asidenav.lucius    |  1 -
 templates/widgets/breadcrumbs.hamlet |  4 +-
 templates/widgets/breadcrumbs.lucius | 76 ++++++++++++++++++++++++++--
 templates/widgets/navbar.hamlet      |  4 --
 templates/widgets/navbar.lucius      |  2 +-
 7 files changed, 90 insertions(+), 19 deletions(-)

diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet
index 52b1e584b..ff4969f75 100644
--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@@ -13,6 +13,10 @@
       $with status2 <- bool status "info" (status == "")
         <div class="alert alert-#{status2}">#{msg}
 
+    <!-- breadcrumbs -->
+    $if not $ Just HomeR == mcurrentRoute
+      ^{breadcrumbs}
+
     $maybe headline <- contentHeadline
       <h1>
         ^{headline}
@@ -21,4 +25,5 @@
     ^{pageactionprime}
 
     <!-- actual content -->
+
     ^{widget}
diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index feaf8624c..86434ab58 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -92,6 +92,15 @@ a:visited {
   transition: color .2s ease, background-color .2s ease;
 }
 
+a {
+  color: var(--color-link);
+}
+
+a:hover {
+  color: var(--color-link-hover);
+}
+
+
 ul {
   list-style-type: none;
 }
@@ -180,14 +189,6 @@ th {
   p {
     margin: 10px 0;
   }
-
-  a {
-    color: var(--color-link);
-  }
-
-  a:hover {
-    color: var(--color-link-hover);
-  }
 }
 
 .pseudo-focus {
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 5505784c2..4fe8dcdc1 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -14,7 +14,6 @@
 
 .asidenav {
   width: 300px;
-  margin-top: 20px;
   color: white;
 
   .js-show-hide__target {
diff --git a/templates/widgets/breadcrumbs.hamlet b/templates/widgets/breadcrumbs.hamlet
index fd2ab3529..ca7501f63 100644
--- a/templates/widgets/breadcrumbs.hamlet
+++ b/templates/widgets/breadcrumbs.hamlet
@@ -1,7 +1,7 @@
+$newline never
 <div .breadcrumbs__container>
   <ul .breadcrumbs__list.list--inline>
     $forall bc <- parents
       <li .breadcrumbs__item>
         <a .breadcrumbs__link href="@{fst bc}">#{snd bc}
-        &gt;
-    <li .breadcrumbs__item--active>#{title}
+    <li .breadcrumbs__item.breadcrumbs__item--active>#{title}
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index b110eb0e3..d6407b59e 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -3,12 +3,82 @@
   color: white;
   z-index: 10;
   align-self: flex-end;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   transition: margin-bottom .2s ease;
+  margin-left: -40px;
+  margin-right: -40px;
+  background-color: var(--color-dark);
 }
 .breadcrumbs__container--animated {
   transition: left .2s ease;
 }
-.breadcrumbs__container .breadcrumbs__link {
-  color: white;
+.breadcrumbs__link {
+  color: var(--color-lightwhite);
+  z-index: 2;
+}
+
+.breadcrumbs__item {
+  padding-left: 10px;
+  padding-right: 4px;
+  position: relative;
+  line-height: 28px;
+
+  &:nth-child(even) {
+    background-color: var(--color-light);
+  }
+
+  &:first-child {
+    padding-left: 20px;
+  }
+
+  &:nth-child(even) {
+    background-color: var(--color-light);
+
+    &::before {
+      border-left-color: var(--color-primary) !important;
+    }
+
+    &::after {
+      border-left-color: var(--color-light) !important;
+    }
+  }
+
+  &:nth-child(odd) {
+    background-color: var(--color-primary);
+
+    &::before {
+      border-left-color: var(--color-light) !important;
+    }
+
+    &::after {
+      border-left-color: var(--color-primary) !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 var(--color-light);
+    }
+  }
+
+  &:last-child {
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: -14px;
+      border-top: 14px solid transparent;
+      border-bottom: 14px solid transparent;
+      border-left: 14px solid var(--color-light);
+    }
+  }
 }
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index 5a0674eae..a3f115ba9 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -2,10 +2,6 @@ $newline never
 <div .navbar-container>
   <nav .navbar.js-sticky-navbar>
 
-    <!-- breadcrumbs -->
-    $if not $ Just HomeR == mcurrentRoute
-      ^{breadcrumbs}
-
     <ul .navbar__list.list--inline>
       $forall menuType <- menuTypes
         $case menuType
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 35b73a1e8..58462741b 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -7,7 +7,6 @@
   width: 100%;
   height: var(--header-height);
   padding-right: 5vw;
-  padding-left: 90px;
   background: var(--color-darker); /* Old browsers */
   background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */
@@ -18,6 +17,7 @@
   left: 0;
   overflow: hidden;
   transition: height 0.2s ease;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
 }
 
 .navbar__list {