moved breadcrumbs into page content area

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}

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 {

templates/widgets/asidenav.lucius

@@ -14,7 +14,6 @@
 
 .asidenav {
   width: 300px;
-  margin-top: 20px;
   color: white;
 
   .js-show-hide__target {

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.breadcrumbs__item--active>#{title}
-    <li .breadcrumbs__item--active>#{title}

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 {
+.breadcrumbs__link {
-  color: white;
+  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);
+    }
+  }
 }

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

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 {