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
--
GitLab