From 96090b933e1d1394dbfcc754ea7165656a76403f Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Wed, 20 Jan 2021 22:22:57 +0100
Subject: [PATCH] =?UTF-8?q?moved=20burger=20menu=20in=20se=C3=83perate=20c?=
 =?UTF-8?q?ss=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/_menuMobile.scss | 68 +++++++++++++++++++++++++++++++++++++++++
 scss/_mobile.scss     | 70 +------------------------------------------
 scss/_var.scss        |  4 ++-
 scss/style.scss       |  3 +-
 4 files changed, 74 insertions(+), 71 deletions(-)
 create mode 100644 scss/_menuMobile.scss

diff --git a/scss/_menuMobile.scss b/scss/_menuMobile.scss
new file mode 100644
index 0000000..9bef85e
--- /dev/null
+++ b/scss/_menuMobile.scss
@@ -0,0 +1,68 @@
+#burgerMenu {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: none;
+  cursor: pointer;
+
+  .bar1, .bar2, .bar3 {
+    width: 35px;
+    height: 5px;
+    background-color: $text-color;
+    margin: 6px 0;
+    transition: 0.4s;
+  }
+  &.change .bar1 {
+    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+    transform: rotate(-45deg) translate(-9px, 6px);
+  }
+
+  &.change .bar2 {opacity: 0;}
+
+  &.change .bar3 {
+    -webkit-transform: rotate(45deg) translate(-8px, -8px);
+    transform: rotate(45deg) translate(-8px, -8px);
+  }
+}
+
+@media only screen and (max-width: $mobile-max-width) {
+  #burgerMenu{
+    display: inline-block;
+  }
+
+  .visible{
+    display: inline-grid !important;
+  }
+
+  #mainMenuContainer{
+    display: none;
+
+    text-align: left;
+    background-color: $back-color-3;
+    width: 100%;
+
+    a {
+      text-align: left;
+      border-bottom: #111721 solid 2px;
+      width: 100%;
+    }
+
+    .dropdown-content{
+      display: block;
+      position: relative;
+      left: 0;
+      transform: none;
+      width: 100%;
+      a{
+        padding-left: 40px;
+      }
+    }
+  }
+  #mainMenu{
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
\ No newline at end of file
diff --git a/scss/_mobile.scss b/scss/_mobile.scss
index 451a627..2fdb68e 100644
--- a/scss/_mobile.scss
+++ b/scss/_mobile.scss
@@ -1,32 +1,4 @@
-#burgerMenu {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: none;
-  cursor: pointer;
-
-  .bar1, .bar2, .bar3 {
-    width: 35px;
-    height: 5px;
-    background-color: $text-color;
-    margin: 6px 0;
-    transition: 0.4s;
-  }
-  &.change .bar1 {
-    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
-    transform: rotate(-45deg) translate(-9px, 6px);
-  }
-
-  &.change .bar2 {opacity: 0;}
-
-  &.change .bar3 {
-    -webkit-transform: rotate(45deg) translate(-8px, -8px);
-    transform: rotate(45deg) translate(-8px, -8px);
-  }
-}
-
-
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: $mobile-max-width) {
   #homeImage{
     float: none;
   }
@@ -58,44 +30,4 @@
   article{
     width: 95%;
   }
-
-  #burgerMenu{
-    display: inline-block;
-  }
-
-  .visible{
-    display: inline-grid !important;
-  }
-
-  #mainMenuContainer{
-    display: none;
-
-    text-align: left;
-    background-color: $back-color-3;
-    width: 100%;
-
-    a {
-      text-align: left;
-      border-bottom: #111721 solid 2px;
-      width: 100%;
-    }
-
-    .dropdown-content{
-      display: block;
-      position: relative;
-      left: 0;
-      transform: none;
-      width: 100%;
-      a{
-        padding-left: 40px;
-      }
-    }
-  }
-  #mainMenu{
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
 }
\ No newline at end of file
diff --git a/scss/_var.scss b/scss/_var.scss
index 85c6b3b..0058ee9 100644
--- a/scss/_var.scss
+++ b/scss/_var.scss
@@ -5,4 +5,6 @@ $accent-color: #1cb09a;
 $content-footer-div-color: #03A8F4;
 
 $darker-color: 5%;
-$darker-color-2: 2%;
\ No newline at end of file
+$darker-color-2: 2%;
+
+$mobile-max-width: 600px;
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index 9f9bf57..0d90460 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -11,4 +11,5 @@
 @import "comments";
 @import "footer";
 @import "content";
-@import "mobile";
\ No newline at end of file
+@import "mobile";
+@import "menuMobile";
\ No newline at end of file