Add back original styles, create separate landing-header html

1 files changed, 121 insertions, 9 deletions

diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 1d0d1960..372e5975 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -399,18 +399,130 @@ li {
   color: inherit;
 }
 
-// Override bootstrap
-.nav > li > a {
-  padding: 0 10px;
-  text-decoration: none;
-}
+.header {
+  z-index: 1;
+  background: $main-background-color;
+  position: relative;
+  width: 100%;
+  padding: 0 25px;
+  border-bottom: 1px solid $border-color;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  white-space: nowrap;
+  padding-left: 40px;
+
+  @media all and (max-width: $mobile-width) {
+    height: auto;
+    padding-left: 5px;
+  }
+
+  img {
+    position: absolute;
+    height: 50px;
+    margin-left: -8px;
+
+    @media all and (max-width: $mobile-width) {
+      margin-left: -2px;
+    }
+  }
+
+  p {
+    font-size: 20px;
+    color: $black;
+    display: inline-block;
+    padding: 10px 0;
+    padding-left: 55px;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  ul {
+    text-align: right;
+    list-style-type: none;
+    display: inline-block;
+
+    @media all and (max-width: $mobile-width) {
+      display: none;
+    }
+  }
+
+  @media all and (max-width: $mobile-width) {
+    &.active {
+      display: block;
+
+      ul {
+        display: block;
+        text-align: left;
+        padding: 0;
+        width: 100%;
+      }
+
+      li {
+        display: block;
+        padding: 10px 0;
+      }
+    }
+  }
+
+  li {
+    display: inline-block;
+    line-height: 20px;
+    margin: 0 10px;
+    vertical-align: middle;
+  }
+
+  input {
+    box-sizing: content-box;
+    border: 1px solid $search-border;
+    border-radius: $border-radius;
+    background-color: $white;
+    -webkit-appearance: none;
+    padding: 7px 11px 7px 28px;
+    margin: -20;
+    width: 190px;
+    background-image: url("<%= @items['/assets/images/icon_search.svg'].path %>");
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-position: 7px 8px;
+
+    @media(max-width:1099px) {
+      width: 130px;
+    }
+  }
+
+  .nav-container {
+    margin: auto 0;
+  }
+
+  .nav-toggle {
+    display: none;
+
+    @media all and (max-width: $mobile-width) {
+      display: inline-block;
+      position: absolute;
+      top: 15px;
+      right: 15px;
+    }
+  }
+
+  // Override bootstrap
+  .nav > li > a {
+    padding: 0 10px;
+    text-decoration: none;
+  }
+
+  // Override bootstrap
+  .nav > li > a:focus, .nav > li > a:hover {
+    text-decoration: none;
+    background-color: transparent;
+  }
 
-// Override bootstrap
-.nav > li > a:focus, .nav > li > a:hover {
-  text-decoration: none;
-  background-color: transparent;
 }
 
+
 // Home page //
 
 .landing {