1 files changed, 110 insertions, 0 deletions
diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss
new file mode 100644
index 0000000..0843c1d
--- /dev/null
+++ b/assets/scss/layouts/_header.scss
@@ -0,0 +1,110 @@
+.banner .nav li {
+  @extend .nav-item;
+}
+
+.banner .nav a {
+  @extend .nav-link;
+}
+
+.navbar-text {
+  margin-left: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-brand {
+    font-size: $font-size-xl;
+  }
+
+  .navbar-text {
+    margin-left: 1.25rem;
+  }
+}
+
+.navbar-nav {
+  flex-direction: row;
+}
+
+.nav-item {
+  margin-left: 1.25rem;
+}
+
+@include media-breakpoint-up(md) {
+  .nav-item {
+    margin-left: 0.5rem;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .nav-item:first-child {
+    margin-left: 0;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .navbar .container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.navbar {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid $gray-200;
+
+  /* margin-top: 3px; */
+}
+
+.header-bar {
+  border-top: 3px solid;
+  border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
+  border-image-slice: 1;
+}
+
+.home .navbar {
+  border-bottom: 0;
+}
+
+.navbar-brand {
+  margin-top: -0.15625rem;
+}
+
+.navbar-form {
+  margin-top: 0.25rem;
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-brand {
+    margin-right: 1rem !important;
+  }
+
+  .main-nav .nav-item:first-child .nav-link,
+  .social-nav .nav-item:first-child .nav-link {
+    padding-left: 0;
+  }
+
+  .main-nav .nav-item:last-child .nav-link,
+  .social-nav .nav-item:last-child .nav-link {
+    padding-right: 0;
+  }
+
+  .navbar-form {
+    margin-top: 0;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+}
+
+.form-control.is-search {
+  padding-right: calc(1.5em + 0.75rem);
+  background: $gray-100;
+  border: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}