deploy: b780169745c17f9fc971299e923e5ca5669b5a22

1 files changed, 72 insertions, 0 deletions

diff --git a/css/partials/header.css b/css/partials/header.css
new file mode 100644
index 00000000..f9b7ba40
--- /dev/null
+++ b/css/partials/header.css
@@ -0,0 +1,72 @@
+.header {
+  border: $line-secondary solid $color-text-primary;
+}
+.header-inner {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-top: $margin-l-0;
+  margin-bottom: $margin-m-0;
+}
+.header-inner #menu-btn {
+  display: none;
+}
+.header-inner .site-nav {
+  flex-grow: 1;
+  overflow-x: auto;
+}
+.menu-list {
+  text-align: right;
+  display: flex;
+}
+.menu-list .menu-item {
+  position: relative;
+  margin-left: $margin-l-0;
+}
+.menu-list:before {
+  content: "";
+  flex-grow: 1;
+}
+.menu-item-active:after {
+  border-bottom: solid $line-secondary;
+  width: 100%;
+}
+.logo-img {
+  max-height: $line-height-heading-h1;
+  width: auto;
+  max-width: 100%;
+  display: flex;
+}
+@media (max-width: 688px) {
+  .header-inner {
+    flex-wrap: wrap;
+  }
+  .header-inner #menu-btn {
+    display: block !important;
+    text-align: right;
+    width: 50%;
+  }
+  .header-inner #menu-btn .icon {
+    float: right;
+  }
+  .header-inner .site-brand-container {
+    width: 50%;
+  }
+  .header-inner .site-nav {
+    width: 100%;
+  }
+  .header-inner .site-nav .menu-list {
+    height: 0;
+    overflow: hidden;
+  }
+  .header-inner .site-nav .menu-list .menu-item {
+    margin-right: 0;
+    margin-left: auto;
+    margin-top: $margin-m-0;
+  }
+  .header-inner .site-nav .active {
+    margin-top: $margin-m-1;
+    height: auto;
+    flex-direction: column;
+  }
+}