2 files changed, 95 insertions, 0 deletions
diff --git a/assets/_sass/partials/_burger-menu.scss b/assets/_sass/partials/_burger-menu.scss
new file mode 100644
index 0000000..2bea84c
--- /dev/null
+++ b/assets/_sass/partials/_burger-menu.scss
@@ -0,0 +1,68 @@
+.toggleBurger {
+  display: none;
+
+  &:checked {
+    & ~ .site-navigation {
+      @include translate(0, 0);
+    }
+    & ~ .toggleBurgerWrapper {
+      span {
+        background: transparent;
+        &:before {
+          top: 0;
+          @include rotate(135deg);
+        }
+        &:after {
+          top: 0;
+          @include rotate(-135deg);
+        }
+      }
+    }
+  }
+}
+
+.toggleBurgerWrapper {
+  display: none;
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: 25px;
+  height: 30px;
+  cursor: pointer;
+  z-index: 100;
+  @include no-select();
+
+  span {
+    position: absolute;
+    top: 50%;
+    height: 2px;
+    width: 100%;
+    background: var(--grey-222);
+
+    @include transition(all .3s ease);
+    @include translate(0, -50%);
+
+    &:before,
+    &:after {
+      position: absolute;
+      height: 2px;
+      width: 100%;
+      background: var(--grey-222);
+      content: "";
+
+      @include transition(all .3s ease);
+    }
+    &:before {
+      top: -6px;
+    }
+    &:after {
+      top: 6px;
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .toggleBurgerWrapper {
+    display: block;
+  }
+}
diff --git a/assets/_sass/partials/_header-separator.scss b/assets/_sass/partials/_header-separator.scss
new file mode 100644
index 0000000..4c264df
--- /dev/null
+++ b/assets/_sass/partials/_header-separator.scss
@@ -0,0 +1,27 @@
+.header-content-separator {
+  position: relative;
+  margin: 40px auto;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--grey-ccc);
+
+  &:before {
+    position: absolute;
+    left: -8px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--grey-ccc);
+    content: "";
+  }
+  &:after {
+    position: absolute;
+    left: 8px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--grey-ccc);
+    content: "";
+  }
+}