navbar responsive rework

templates/default-layout.lucius

@@ -129,6 +129,21 @@ h4 {
   margin: 0;
 }
 
+@media (max-width: 768px) {
+
+  h1 {
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+}
+
 /* LAYOUT */
 .main {
   min-height: calc(100vh - var(--header-height));

templates/widgets/navbar.hamlet

@@ -2,33 +2,33 @@ $newline never
 <div .navbar-container>
   <nav .navbar.js-sticky-navbar>
 
-    <div .navbar__logo>
+    <a href="/" .navbar__logo>
 
-    <ul .navbar-left__list.list--inline>
+    <ul .navbar__list.list--inline>
         $forall menuType <- menuTypes
           $case menuType
             $of NavbarAside (MenuItem label mIcon route _)
-              <li .navbar-left__list-item :highlight route:.navbar-left__list-item--active>
+              <li .navbar__list-item :highlight route:.navbar__list-item--active>
-                <a .navbar-left__link-wrapper href=@{route}>
+                <a .navbar__link-wrapper href=@{route}>
                   <i .fas.fa-#{fromMaybe "none" mIcon}>
-                  <div .navbar-left__link-label>#{label}
+                  <div .navbar__link-label>#{label}
             $of _
 
-    <ul .navbar-right__list.list--inline>
+    <ul .navbar__list.list--inline>
       $forall menuType <- menuTypes
         $case menuType
           $of NavbarRight (MenuItem label mIcon route _)
-            <li .navbar-right__list-item :Just route == mcurrentRoute:.navbar-right__list-item--active>
+            <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
-              <a .navbar-right__link-wrapper href=@{route}>
+              <a .navbar__link-wrapper href=@{route}>
                 $if isJust mIcon
                   <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-                <div .navbar-right__link-label>#{label}
+                <div .navbar__link-label>#{label}
           $of NavbarSecondary (MenuItem label mIcon route _)
-            <li .navbar-right__list-item.navbar-right__list-item--secondary :Just route == mcurrentRoute:.navbar-right__list-item--active>
+            <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
-              <a .navbar-right__link-wrapper href=@{route}>
+              <a .navbar__link-wrapper href=@{route}>
                 $if isJust mIcon
                   <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-                <div .navbar-right__link-label>#{label}
+                <div .navbar__link-label>#{label}
           $of _
 
   <div .navbar__pushdown>

templates/widgets/navbar.lucius

@@ -6,8 +6,8 @@
   justify-content: space-between;
   width: 100%;
   height: var(--header-height);
-  padding-right: 5vw;
+  padding-right: 2vw;
-  padding-left: 20px;
+  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,24 +21,32 @@
   transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
 }
 
-@media (max-width: 768px) {
+@media (min-width: 1200px) {
 
   .navbar {
-    padding-left: 90px;
+    padding-left: 340px;
   }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 768px) {
 
   .navbar {
-    padding-left: 20px;
+    padding: 0px;
   }
 }
 
 .navbar__logo {
+  position: absolute;
+  top: 15px;
+  left: 20px;
   transition: all .2s ease;
   transform-origin: left;
   width: 0px;
+  color: var(--color-lightwhite);
+
+  &:hover {
+    color: var(--color-lightwhite);
+  }
 
   &::before {
     content: 'UniWorkY';
@@ -49,41 +57,22 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
 
   .navbar__logo {
     transform: scale(0.7);
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 768px) {
 
   .navbar__logo {
-    transform: scale(0.3);
+    display: none;
   }
 }
 
-.navbar-right__list {
+/* links */
-  align-self: flex-end;
+.navbar__link-wrapper {
-  white-space: nowrap;
-}
-
-.navbar-right__list-item {
-  position: relative;
-  transition: background-color .1s ease;
-
-  .glyphicon {
-    position: relative;
-    width: 100%;
-    height: 20px;
-  }
-
-  .glyphicon::before {
-    height: 20px;
-  }
-}
-
-.navbar-right__link-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -93,54 +82,110 @@
   transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
 }
 
-.navbar-right__link-label {
+.navbar__link-label {
   transition: opacity .2s ease;
   padding: 0 13px;
   text-transform: uppercase;
 }
 
-.navbar-right__list-item--secondary {
+@media (max-width: 768px) {
+
+  .navbar__link-label {
+    padding: 0 7px;
+  }
+}
+
+@media (max-width: 500px) {
+
+  .navbar__link-label {
+    display: none;
+  }
+}
+
+/* navbar list */
+.navbar__list {
+  white-space: nowrap;
+}
+
+/* list item */
+.navbar__list-item {
+  position: relative;
+  transition: background-color .1s ease;
+
+  .glyphicon {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .glyphicon::before {
+    height: 20px;
+  }
+
+  .fas {
+    height: 20px;
+  }
+}
+
+@media (max-width: 500px) {
+
+  .navbar__list-item {
+    width: 50px;
+  }
+}
+
+.navbar__list-item--secondary {
   margin-left: 20px;
   color: var(--color-grey);
 }
-.navbar-right__list-item--secondary + .navbar-right__list-item--secondary {
+
+@media (max-width: 768px) {
+
+  .navbar__list-item--secondary {
+    margin-left: 0;
+  }
+}
+
+.navbar__list-item--secondary + .navbar__list-item--secondary {
   margin-left: 0;
   border-left: 0;
 }
 
-.navbar-right__list-item--active {
+.navbar__list-item--active {
   background-color: var(--color-lightwhite);
   color: var(--color-dark);
 
-  .navbar-right__link-wrapper {
+  .navbar__link-wrapper {
     color: var(--color-dark);
   }
 }
-.navbar-right__list-item--active .navbar-right__link-wrapper {
+
+.navbar__list-item--active .navbar__link-wrapper {
   pointer-events: none;
   color: var(--color-dark);
 }
 
-.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-wrapper {
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
   background-color: var(--color-darker);
   color: var(--color-lightwhite);
 }
-.navbar-right__list-item--secondary .navbar-right__link-wrapper {
+
+.navbar__list-item--secondary .navbar__link-wrapper {
   color: var(--color-grey);
 }
 
-/* left navbar list */
+/* sticky state */
-.navbar-left__list {
-  color: white;
-}
-
 .navbar--sticky {
   height: var(--header-height-collapsed);
   z-index: 100;
 
-  .navbar-right__link-wrapper {
+  .navbar__link-wrapper {
     height: var(--header-height-collapsed);
   }
+
+  .navbar__logo {
+    top: 5px;
+  }
 }
 
 .navbar__pushdown {
@@ -160,7 +205,7 @@
     height: var(--header-height-collapsed);
   }
 
-  .navbar-right__link-wrapper {
+  .navbar__link-wrapper {
     height: var(--header-height-collapsed);
   }
 }