navbar now with lmu-boxes

src/Foundation.hs

@@ -725,7 +725,7 @@ pageActions (HomeR) =
 --   ,
     NavbarAside $ MenuItem
       { menuItemLabel = "AdminDemo"
-      , menuItemIcon  = Nothing
+      , menuItemIcon  = Just "book"
       , menuItemRoute = AdminTestR
       , menuItemAccessCallback' = return True
       }

templates/default-layout.lucius

@@ -46,7 +46,18 @@ body {
   --color-darker: #274a65;
   --color-link: var(--color-dark);
   --color-link-hover: var(--color-darker);
+  --color-lmu-box-border: transparent;
 
+  /* WIP LMU THEME */
+  &.theme--lmu {
+    --color-lmu-box-border: var(--color-lightwhite);
+    --color-primary: #0a9342;
+    --color-dark: #087536;
+    --color-darker: #075728;
+    --color-link: var(--color-font);
+    --color-link-hover: var(--color-font);
+    --header-height: 100px;
+  }
 
   &.theme--neutral-blue {
     --color-primary: #3E606F;

templates/widgets/navbar.hamlet

@@ -4,7 +4,7 @@ $newline never
 
     <a href="/" .navbar__logo>
 
-    <ul .navbar__list.list--inline>
+    <ul .navbar__list.list--inline.navbar__list-left>
         $forall menuType <- menuTypes
           $case menuType
             $of NavbarAside (MenuItem label mIcon route _)

templates/widgets/navbar.lucius

@@ -3,11 +3,10 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   width: 100%;
   height: var(--header-height);
   padding-right: 2vw;
-  padding-left: calc(24% + 40px);
   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 */
@@ -21,13 +20,6 @@
   transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
 }
 
-@media (min-width: 1200px) {
-
-  .navbar {
-    padding-left: 340px;
-  }
-}
-
 @media (max-width: 768px) {
 
   .navbar {
@@ -36,31 +28,67 @@
 }
 
 .navbar__logo {
-  position: absolute;
+  top: 10px;
-  top: 15px;
   left: 20px;
-  transition: all .2s ease;
+  height: 80px;
-  transform-origin: left;
+  padding: 0 20px;
-  width: 0px;
+  display: flex;
+  flex-basis: 300px;
+  font-size: 16px;
+  align-items: center;
   color: var(--color-lightwhite);
+  transform-origin: left;
+  transition: all .2s ease;
 
   &:hover {
     color: var(--color-lightwhite);
   }
 
   &::before {
-    content: 'Uni2work';
+    content: 'LMU';
     font-family: var(--font-logo);
-    font-size: 42px;
     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;
+    box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+  }
+
+  &::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;
+    box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+  }
+}
+
+@media (max-width: 1200px) {
+
+  .navbar__logo {
+    flex-basis: 24%;
+    font-size: 16px;
   }
 }
 
 @media (max-width: 1024px) {
 
   .navbar__logo {
-    transform: scale(0.7);
+    font-size: 14px;
+
+    &::before {
+      content: none;
+    }
   }
 }
 
@@ -75,21 +103,30 @@
 .navbar__link-wrapper {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-end;
-  align-items: center;
+  align-items: flex-start;
-  height: var(--header-height);
+  height: 80px;
+  min-width: 90px;
   color: var(--color-lightwhite);
   transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
+  box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
 }
 
 .navbar__link-label {
   transition: opacity .2s ease;
-  padding: 0 13px;
+  padding: 4px 6px;
   text-transform: uppercase;
 }
 
 @media (max-width: 768px) {
 
+  .navbar__link-wrapper {
+    box-shadow: none;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
   .navbar__link-label {
     padding: 0 7px;
   }
@@ -112,6 +149,10 @@
   position: relative;
   transition: background-color .1s ease;
 
+  + .navbar__list-item {
+    margin-left: 12px;
+  }
+
   .glyphicon {
     position: relative;
     width: 20px;
@@ -120,10 +161,22 @@
 
   .glyphicon::before {
     height: 20px;
+    margin-left: 6px;
   }
 
   .fas {
     height: 20px;
+    margin-left: 8px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .navbar__list-item {
+
+    .fas {
+      margin-left: 0;
+    }
   }
 }
 
@@ -134,15 +187,29 @@
   }
 }
 
+.navbar__list-left {
+  flex: 5;
+  padding-left: 40px;
+}
+
 .navbar__list-item--secondary {
   margin-left: 20px;
   color: var(--color-grey);
+
+  .navbar__link-wrapper {
+    color: var(--color-grey);
+    box-shadow: 0 0 0 1px inset var(--color-grey);
+  }
 }
 
 @media (max-width: 768px) {
 
   .navbar__list-item--secondary {
     margin-left: 0;
+
+    .navbar__link-wrapper {
+      box-shadow: none;
+    }
   }
 }
 
@@ -169,10 +236,6 @@
   color: var(--color-lightwhite);
 }
 
-.navbar__list-item--secondary .navbar__link-wrapper {
-  color: var(--color-grey);
-}
-
 /* sticky state */
 .navbar--sticky {
   height: var(--header-height-collapsed);
@@ -209,7 +272,7 @@
   }
 }
 
-@media (max-height: 768px) {
+@media (max-height: 500px) {
 
   .navbar,
   .navbar__pushdown {
@@ -222,5 +285,6 @@
 
   .navbar__logo {
     top: 5px;
+    height: var(--header-height-collapsed);
   }
 }