@@ -29,17 +47,17 @@
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequuntur debitis deleniti dolore dolorum eligendi expedita harum impedit inventore itaque iusto neque odio odit quia recusandae, repudiandae saepe voluptas voluptates. Accusantium atque cum, debitis, delectus dignissimos ea error fuga fugit labore maiores nam nulla numquam soluta, suscipit vel veritatis voluptatibus!
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aut, consectetur consequuntur culpa dolorum ducimus eaque eligendi enim eveniet fugiat illum laborum maiores mollitia obcaecati odio perspiciatis, quae tempora! Ex nemo nulla similique sint!
-
+
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, dolor dolorem earum enim est et libero minima ratione, recusandae repellat temporibus tenetur totam unde voluptatem voluptatum? Asperiores atque consectetur distinctio eum fugit nisi non officiis, praesentium recusandae tempora veniam voluptate.
diff --git a/resources/css/main.scss b/resources/css/main.scss
index 59880f8..c58a5aa 100644
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -30,6 +30,14 @@ html, body {
padding-bottom: 0;
}
+.hidden {
+ display: none;
+}
+
+.flex {
+ display: flex;
+}
+
#header {
// Layout, details and children is set in partials/header.scss
height: 10vh;
@@ -39,6 +47,27 @@ html, body {
}
}
+.dropdown {
+ position: fixed;
+ z-index: 2;
+ background-color: #706fff;
+ width: 100vw;
+ height: 90vh;
+ animation: slide-in-right 550ms;
+ flex-direction: column;
+ align-items: center;
+
+ .dropdown-nav-item {
+ color: white;
+ font: 600 28px "Montserrat", sans-serif;
+ text-decoration: none;
+ }
+}
+
+.dropdown_close_animation {
+ animation: 550ms slide-in-left;
+}
+
#container {
height: 90vh;
display: grid;
diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss
index e390736..a50f668 100644
--- a/resources/css/partials/header.scss
+++ b/resources/css/partials/header.scss
@@ -1,5 +1,17 @@
@use "../variables.scss";
@use "../mixins.scss";
+@use "sass:math";
+
+$dropdown-toggle_l_width_no_unit: 36;
+$dropdown-toggle_s_width_no_unit: 28;
+
+$dropdown-toggle_l_width: $dropdown-toggle_l_width_no_unit * 1px;
+$dropdown-toggle_l_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_l_width_no_unit, 2))) * 1px;
+$dropdown-toggle_l_second_bar: math.div($dropdown-toggle_l_width - 4, 2);
+$dropdown-toggle_s_width: $dropdown-toggle_s_width_no_unit * 1px;
+$dropdown-toggle_s_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_s_width_no_unit, 2))) * 1px;
+$dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
+
#header {
// Height is set in main.scss
@@ -47,23 +59,100 @@
}
}
- .menu {
+ #toggle {
display: none;
- filter: invert(1);
- height: 56px;
- width: auto;
+ }
- img {
- height: 56px;
- width: auto;
+ .dropdown-toggle {
+ margin: 0 auto 0;
+ width: $dropdown-toggle_l_width;
+ height: $dropdown-toggle_l_width;
+ position: relative;
+
+ .bar {
+ padding: 0;
+ width: $dropdown-toggle_l_width;
+ height: 4px;
+ background-color: variables.$clr_brand;
+ display: block;
+ border-radius: 4px;
+ transition: all 0.4s ease-in-out;
+ position: absolute;
+ }
+
+ .bar1 {
+ transform-origin: 5%;
+ }
+
+ .bar4 {
+ transform-origin: 5%;
}
@include mixins.header_overflow2 {
- img {
- height: 36px;
+ width: $dropdown-toggle_s_width;
+ height: $dropdown-toggle_s_width;
+
+ .bar {
+ width: $dropdown-toggle_s_width;
}
- height: 36px;
}
+ }
+
+ .bar1 {
+ top: 0;
+ }
+
+ .bar2,
+ .bar3 {
+ top: $dropdown-toggle_l_second_bar;
+
+ @include mixins.header_overflow2 {
+ top: $dropdown-toggle_s_second_bar;
+ }
+ }
+
+ .bar3 {
+ right: 0;
+ }
+
+ .bar4 {
+ bottom: 0;
+ }
+
+ .toggle:checked + label > .dropdown-toggle > .bar1{
+ transform: rotate(45deg);
+ height: 3px;
+ width: $dropdown-toggle_l_cross_width;
+
+ @include mixins.header_overflow2 {
+ width: $dropdown-toggle_s_cross_width;
+ }
+ }
+
+ .toggle:checked + label > .dropdown-toggle > .bar3{
+ transform: rotate(45deg);
+ height: 3px;
+ background-color: transparent;
+ }
+
+ .toggle:checked + label > .dropdown-toggle > .bar2{
+ transform: rotate(-45deg);
+ height: 3px;
+ background-color: transparent;
+ }
+
+ .toggle:checked + label > .dropdown-toggle > .bar4{
+ transform: rotate(-45deg);
+ height: 3px;
+ width: $dropdown-toggle_l_cross_width;
+
+ @include mixins.header_overflow2 {
+ width: $dropdown-toggle_s_cross_width;
+ }
+ }
+
+ #toggle-label {
+ display: none;
@include mixins.header_overflow {
display: block;
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index 6904a2e..f1486ac 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -67,7 +67,7 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
- margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
+ margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
}
@@ -86,7 +86,7 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
- margin-left: math.div(variables.$px_horizontalPadding2, 10);
+ margin-left: math.div(variables.$px_horizontalPadding3, 10);
}
}
@@ -103,7 +103,7 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
- margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
+ margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
}
}
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
new file mode 100644
index 0000000..443a69a
--- /dev/null
+++ b/resources/scripts/main.js
@@ -0,0 +1,13 @@
+function toggleDropdown() {
+ let target = document.getElementsByClassName('dropdown')[0];
+ if (target.classList.contains('hidden')) {
+ target.classList.remove('hidden');
+ target.classList.add('flex');
+ //document.getElementById('container').style.display = 'none';
+ }
+ else {
+ target.classList.add('dropdown_close_animation');
+ target.classList.add('hidden');
+ target.classList.remove('flex');
+ }
+}
\ No newline at end of file
diff --git a/resources/styles/main.css b/resources/styles/main.css
index d2cbe72..1b9da6e 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -58,7 +58,7 @@
}
@media screen and (max-width: 850px) {
.table .vertical-separator {
- margin-right: 90px;
+ margin-right: 18px;
}
}
.table .reverse {
@@ -75,7 +75,7 @@
}
@media screen and (max-width: 850px) {
.table .reverse img {
- margin-left: 10px;
+ margin-left: 2px;
}
}
.table .reverse p {
@@ -92,7 +92,7 @@
}
@media screen and (max-width: 850px) {
.table .reverse .vertical-separator {
- margin-left: 90px;
+ margin-left: 18px;
}
}
.table .square img {
@@ -198,26 +198,94 @@
display: none;
}
}
-#header .menu {
+#header #toggle {
display: none;
- filter: invert(1);
- height: 56px;
- width: auto;
}
-#header .menu img {
- height: 56px;
- width: auto;
+#header .dropdown-toggle {
+ margin: 0 auto 0;
+ width: 36px;
+ height: 36px;
+ position: relative;
+}
+#header .dropdown-toggle .bar {
+ padding: 0;
+ width: 36px;
+ height: 4px;
+ background-color: #1d60b5;
+ display: block;
+ border-radius: 4px;
+ transition: all 0.4s ease-in-out;
+ position: absolute;
+}
+#header .dropdown-toggle .bar1 {
+ transform-origin: 5%;
+}
+#header .dropdown-toggle .bar4 {
+ transform-origin: 5%;
}
@media screen and (max-width: 850px) {
- #header .menu {
- height: 36px;
+ #header .dropdown-toggle {
+ width: 28px;
+ height: 28px;
}
- #header .menu img {
- height: 36px;
+ #header .dropdown-toggle .bar {
+ width: 28px;
}
}
+#header .bar1 {
+ top: 0;
+}
+#header .bar2,
+#header .bar3 {
+ top: 16px;
+}
+@media screen and (max-width: 850px) {
+ #header .bar2,
+#header .bar3 {
+ top: 12px;
+ }
+}
+#header .bar3 {
+ right: 0;
+}
+#header .bar4 {
+ bottom: 0;
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar1 {
+ transform: rotate(45deg);
+ height: 3px;
+ width: 50px;
+}
+@media screen and (max-width: 850px) {
+ #header .toggle:checked + label > .dropdown-toggle > .bar1 {
+ width: 39px;
+ }
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar3 {
+ transform: rotate(45deg);
+ height: 3px;
+ background-color: transparent;
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar2 {
+ transform: rotate(-45deg);
+ height: 3px;
+ background-color: transparent;
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar4 {
+ transform: rotate(-45deg);
+ height: 3px;
+ width: 50px;
+}
+@media screen and (max-width: 850px) {
+ #header .toggle:checked + label > .dropdown-toggle > .bar4 {
+ width: 39px;
+ }
+}
+#header #toggle-label {
+ display: none;
+}
@media screen and (max-width: 1200px) {
- #header .menu {
+ #header #toggle-label {
display: block;
}
}
@@ -302,6 +370,14 @@ html, body {
padding-bottom: 0;
}
+.hidden {
+ display: none;
+}
+
+.flex {
+ display: flex;
+}
+
#header {
height: 10vh;
}
@@ -311,6 +387,26 @@ html, body {
}
}
+.dropdown {
+ position: fixed;
+ z-index: 2;
+ background-color: #706fff;
+ width: 100vw;
+ height: 90vh;
+ animation: slide-in-right 550ms;
+ flex-direction: column;
+ align-items: center;
+}
+.dropdown .dropdown-nav-item {
+ color: white;
+ font: 600 28px "Montserrat", sans-serif;
+ text-decoration: none;
+}
+
+.dropdown_close_animation {
+ animation: 550ms slide-in-left;
+}
+
#container {
height: 90vh;
display: grid;
