From 5df70ad45d346313e08d0d581596d8bf08c54aa9 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 26 Jan 2019 12:07:13 +0100
Subject: [PATCH] bright asidenav that spans whole height

---
 templates/default-layout.hamlet          |   8 +-
 templates/default-layout.lucius          |  24 +++--
 templates/widgets/asidenav.hamlet        |   5 ++
 templates/widgets/asidenav.lucius        | 107 +++++++++++++++++++++--
 templates/widgets/breadcrumbs.lucius     |  14 +--
 templates/widgets/navbar.hamlet          |   4 -
 templates/widgets/navbar.lucius          | 101 +++------------------
 templates/widgets/pageactionprime.lucius |   2 +-
 8 files changed, 131 insertions(+), 134 deletions(-)

diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet
index f9885fac9..c9c6c69e7 100644
--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@@ -1,13 +1,13 @@
+$if not isModal
+<!-- secondary navigation at the side -->
+^{asidenav}
+
 $if not isModal
   <!-- navigation -->
   ^{navbar}
 
 <div .main>
 
-  $if not isModal
-    <!-- secondary navigation at the side -->
-    ^{asidenav}
-
   <div .main__content>
 
     $if not isModal
diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index c5e76804c..74753907e 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -7,7 +7,8 @@
   --color-lightblack: #1A2A36;
   --color-lightwhite: #fcfffa;
   --color-grey: #B1B5C0;
-  --color-grey-light: #f4f5f6;
+  --color-grey-light: #efefef;
+  --color-grey-medium: #9A989E;
   --color-font: #34303a;
   --color-fontsec: #5b5861;
 
@@ -45,7 +46,8 @@ body {
 
 body {
   /* DEFAULT LMU THEME */
-  --color-primary: #0a9342;
+  --color-lmu-green: #0a9342;
+  --color-primary: var(--color-lmu-green);
   --color-light: #31cc72;
   --color-lighter: #35db7a;
   --color-dark: #087536;
@@ -160,15 +162,12 @@ h4 {
 .main {
   position: relative;
   min-height: calc(100vh - var(--header-height));
-  padding: 20px;
-  overflow: hidden;
 }
 
 @media (max-width: 768px) {
 
   .main {
     min-height: calc(100vh - var(--header-height-collapsed));
-    padding: 10px;
   }
 }
 
@@ -178,6 +177,7 @@ h4 {
   transition: padding-left .2s ease-out;
   max-width: 1200px;
   margin: 0 auto;
+  margin-top: var(--header-height);
 
   > .container {
     margin: 20px 0;
@@ -198,16 +198,15 @@ h4 {
 
 .logged-in {
   .main__content {
-    margin: 0;
     max-width: none;
-    padding-left: 0;
+    margin-left: 0;
   }
 }
 
 @media (min-width: 425px) {
   .logged-in:not(.modal) {
     .main__content {
-      padding-left: calc(var(--asidenav-width-md, 50px) + 10px);
+      margin-left: var(--asidenav-width-md, 50px);
     }
   }
 }
@@ -215,7 +214,7 @@ h4 {
 @media (min-width: 769px) {
   .logged-in:not(.modal) {
     .main__content {
-      padding-left: calc(var(--asidenav-width-lg, 20%) + 20px);
+      margin-left: var(--asidenav-width-lg, 20%);
     }
   }
 }
@@ -223,14 +222,13 @@ h4 {
 @media (min-width: 1200px) {
   .logged-in:not(.modal) {
     .main__content {
-      padding-left: calc(var(--asidenav-width-xl, 250px) + 20px);
+      margin-left: var(--asidenav-width-xl, 250px);
     }
   }
 }
 
-/* sepcial case for breadcrumbs */
-.breadcrumbs__container + .main__content-body {
-  padding-top: 0;
+.main__content-body {
+  padding: 40px;
 }
 
 .pseudo-focus {
diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index fe8a7e8f5..ac8a1de6b 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@@ -1,5 +1,10 @@
 $newline never
 <aside .main__aside>
+  <div .asidenav__logo>
+    <a href="/" .asidenav__logo-link>
+      <span .asidenav__logo-link-item.asidenav__logo-lmu>LMU
+      <span .asidenav__logo-link-item.asidenav__logo-uni2work>UNI2WORK
+
   <div .asidenav>
     $forall tid <- favouriteTerms
       <div .asidenav__box.js-show-hide>
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 6f05668a7..9c3d3746d 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -1,7 +1,6 @@
 .main__aside {
-  position: absolute;
+  position: fixed;
   display: none;
-  background-color: var(--color-dark);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   z-index: 1;
   top: 0;
@@ -12,6 +11,28 @@
   transition: all .2s ease-out;
   width: var(--asidenav-width-lg, 20%);
   height: 100%;
+
+  &::before {
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-dark);
+    opacity: 0.05;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -2;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-grey-light);
+  }
 }
 
 .logged-in {
@@ -58,7 +79,7 @@
 }
 
 .asidenav {
-  color: white;
+  color: var(--color-font);
 }
 
 .asidenav__box {
@@ -84,24 +105,94 @@
       left: auto;
       right: 20px;
       top: 30px;
-      color: white;
+      color: var(--color-font);
     }
   }
 }
 
+/* LOGO */
+
+.asidenav__logo {
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+
+  .asidenav__logo {
+    display: none;
+  }
+}
+
+.asidenav__logo-link {
+  flex: 1;
+  top: 10px;
+  left: 20px;
+  height: 80px;
+  padding: 0 20px;
+  display: flex;
+  flex-basis: var(--asidenav-width-xl, 250px);
+  font-size: 16px;
+  align-items: center;
+  color: var(--color-dark);
+  transform-origin: left;
+}
+
+.asidenav__logo-link-item {
+  font-weight: bold;
+  display: flex;
+  align-items: flex-end;
+  height: calc(100% - 4px);
+  padding: 0 6px 4px;
+  border: 1px solid var(--color-dark);
+  letter-spacing: 2px;
+}
+
+.asidenav__logo-lmu {
+  font-family: var(--font-logo);
+  font-size: 30px;
+}
+
+.asidenav__logo-uni2work {
+  min-width: 70px;
+  margin-left: 12px;
+  font-weight: normal;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+@media (max-width: 1199px) {
+
+  .asidenav__logo-link {
+    flex-basis: var(--asidenav-width-lg, 20%);
+    font-size: 16px;
+  }
+
+  .asidenav__logo-lmu {
+    display: none;
+  }
+
+  .asidenav__logo-uni2work {
+    margin-left: 0;
+  }
+}
+
+/* LIST-ITEM */
+
 .asidenav__list-item {
   position: relative;
-  color: var(--color-lightwhite);
+  color: var(--color-font);
   min-height: 50px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
 
   &:not(.asidenav__list-item--active):hover {
-    background-color: var(--color-darker);
+    background-color: var(--color-lightwhite);
 
     > .asidenav__link-wrapper {
-      color: var(--color-lightwhite);
+      color: var(--color-font);
     }
   }
 
@@ -149,7 +240,7 @@
   align-items: center;
   padding: 7px 10px;
   justify-content: flex-start;
-  color: var(--color-lightwhite);
+  color: var(--color-font);
   width: 100%;
   z-index: 1;
 }
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index f817215e1..de82ec0d7 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -1,23 +1,11 @@
 .breadcrumbs__container {
   position: relative;
   color: var(--color-lightwhite);
-  margin-top: -11px;
-  margin-right: -20px;
-  margin-bottom: 20px;
-  margin-left: -42px;
-  padding: 4px 13px;
-  padding-left: 42px;
+  padding: 4px 40px;
   background-color: var(--color-dark);
   line-height: 30px;
 }
 
-@media (min-width: 768px) {
-
-  .breadcrumbs__container {
-    margin-top: -22px;
-  }
-}
-
 .breadcrumbs__link {
   color: var(--color-lightwhite);
 
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index 08aaab6e5..86f1a3246 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -3,8 +3,6 @@ $newline never
   <div .navbar-shadow>
   <nav .navbar.js-sticky-navbar>
 
-    <a href="/" .navbar__logo>
-
     <ul .navbar__list.list--inline.navbar__list-left>
       $# manually add favorites to navbar for small screens
       <li .navbar__list-item.navbar__list-item--favorite>
@@ -41,5 +39,3 @@ $newline never
                 <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
                 <div .navbar__link-label>_{SomeMessage menuItemLabel}
           $of _
-
-  <div .navbar__pushdown>
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 6a49d2099..f645d256b 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -33,7 +33,7 @@
   justify-content: flex-start;
   width: 100%;
   top: 0;
-  left: 0;
+  left: var(--asidenav-width-xl);
   height: var(--header-height);
   background: var(--color-darker); /* Old browsers */
   background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
@@ -47,93 +47,21 @@
   transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
 }
 
-@media (max-width: 768px) {
-
-  .navbar {
-    padding: 0px;
-    margin-right: 0;
-  }
-}
-
-.navbar__logo {
-  top: 10px;
-  left: 20px;
-  height: 80px;
-  padding: 0 20px;
-  display: flex;
-  flex-basis: var(--asidenav-width-xl, 250px);
-  font-size: 16px;
-  align-items: center;
-  color: var(--color-lightwhite);
-  transform-origin: left;
-  transition: all .2s ease-out;
-
-  &:hover {
-    color: var(--color-lightwhite);
-  }
-
-  &::before {
-    content: 'LMU';
-    font-family: var(--font-logo);
-    font-weight: bold;
-    letter-spacing: 2px;
-    display: flex;
-    align-items: flex-end;
-    font-size: 30px;
-    min-width: 70px;
-    height: calc(100% - 4px);
-    padding: 0 6px 4px;
-  }
-
-  &::after {
-    content: 'Uni2work';
-    margin-left: 12px;
-    font-weight: normal;
-    letter-spacing: 2px;
-    display: flex;
-    align-items: flex-end;
-    text-transform: uppercase;
-    width: 100%;
-    height: calc(100% - 4px);
-    padding: 0 6px 4px;
-  }
-}
-
-@media (min-width: 769px) {
-
-  .navbar__logo::before,
-  .navbar__logo::after {
-    border: 1px solid var(--color-lmu-box-border);
-  }
-}
-
 @media (max-width: 1199px) {
-
-  .navbar__logo {
-    flex-basis: var(--asidenav-width-lg, 20%);
-    font-size: 16px;
-  }
-}
-
-@media (max-width: 1024px) {
-
-  .navbar__logo {
-    font-size: 14px;
-
-    &::before {
-      content: none;
-    }
-
-    &::after {
-      margin-left: 0;
-    }
+  .navbar {
+    left: var(--asidenav-width-lg);
   }
 }
 
 @media (max-width: 768px) {
+  .navbar {
+    left: var(--asidenav-width-md);
+  }
+}
 
-  .navbar__logo {
-    display: none;
+@media (max-width: 425px) {
+  .navbar {
+    left: 0;
   }
 }
 
@@ -348,10 +276,6 @@
   .navbar__link-wrapper {
     height: var(--header-height-collapsed);
   }
-
-  .navbar__logo {
-    top: 5px;
-  }
 }
 
 .navbar__pushdown {
@@ -386,9 +310,4 @@
   .navbar__link-wrapper {
     height: var(--header-height-collapsed);
   }
-
-  .navbar__logo {
-    top: 5px;
-    height: var(--header-height-collapsed);
-  }
 }
diff --git a/templates/widgets/pageactionprime.lucius b/templates/widgets/pageactionprime.lucius
index 9cd08c1db..7aad3eed0 100644
--- a/templates/widgets/pageactionprime.lucius
+++ b/templates/widgets/pageactionprime.lucius
@@ -1,6 +1,6 @@
 .page-nav-prime {
   margin: 10px 0 20px;
-  background-color: var(--color-grey-light);
+  background-color: var(--color-lightwhite);
 }
 
 .pagenav__list-item {