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