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