new design for breadrumbs. more clearly visible now

templates/default-layout.lucius

@@ -172,7 +172,7 @@ h4 {
 }
 
 .main__content-body {
-  padding: 10px 40px 60px;
+  padding: 0 40px 60px;
 }
 
 @media (max-width: 768px) {

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}

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;
-  }
-}