From 95be3fe2ed02ed5b1b8bd9983f1d48056a47bfb9 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Fri, 30 Dec 2022 20:33:07 -0300
Subject: [PATCH 1/2] refactor(header): created mixin for media queries

---
 src/settings/styles/utils/exports.scss                |  1 +
 src/settings/styles/utils/helpers/_mixin.scss         | 11 +++++++++++
 src/settings/styles/utils/resources/_breakpoints.scss |  6 ++++++
 3 files changed, 18 insertions(+)
 create mode 100644 src/settings/styles/utils/resources/_breakpoints.scss

diff --git a/src/settings/styles/utils/exports.scss b/src/settings/styles/utils/exports.scss
index 026d749..20d5303 100644
--- a/src/settings/styles/utils/exports.scss
+++ b/src/settings/styles/utils/exports.scss
@@ -1,4 +1,5 @@
 @import './resources/colors';
 @import './resources/fonts';
+@import './resources/breakpoints';
 @import './helpers/mixin';
 @import './helpers/functions';
diff --git a/src/settings/styles/utils/helpers/_mixin.scss b/src/settings/styles/utils/helpers/_mixin.scss
index 48acbe9..e92efed 100644
--- a/src/settings/styles/utils/helpers/_mixin.scss
+++ b/src/settings/styles/utils/helpers/_mixin.scss
@@ -3,3 +3,14 @@
 	height: #{$size};
 }
 
+@mixin mq($point, $type, $custom) {
+	@if map-has-key($breakpoints, $point) {
+		@media screen and (#{$type}-width: #{map-get($breakpoints, $point)}) {
+			@content;
+		}
+	} @else if map-has-key($breakpoints, $point) == false && $custom == true {
+		@media screen and (#{$type}-width: #{$custom}) {
+			@content;
+		}
+	}
+} ;
diff --git a/src/settings/styles/utils/resources/_breakpoints.scss b/src/settings/styles/utils/resources/_breakpoints.scss
new file mode 100644
index 0000000..a136c45
--- /dev/null
+++ b/src/settings/styles/utils/resources/_breakpoints.scss
@@ -0,0 +1,6 @@
+// desenvolvimento focado em mobile-first
+
+$breakpoints: (
+	'md': 1025px,
+	'lg': 2500px,
+) !default;
-- 
2.34.1


From 7a11a7f872711feaafd07d8748f60c6e30726ac7 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Sat, 31 Dec 2022 02:54:05 -0300
Subject: [PATCH 2/2] refactor(header): created data styles for containers in
 header

---
 src/settings/styles/utils/exports.scss        |  1 -
 src/settings/styles/utils/helpers/_mixin.scss | 12 -----
 .../styles/utils/resources/_breakpoints.scss  |  6 ---
 src/template/Header/index.module.scss         | 53 +++++++++++++++----
 4 files changed, 43 insertions(+), 29 deletions(-)
 delete mode 100644 src/settings/styles/utils/resources/_breakpoints.scss

diff --git a/src/settings/styles/utils/exports.scss b/src/settings/styles/utils/exports.scss
index 20d5303..026d749 100644
--- a/src/settings/styles/utils/exports.scss
+++ b/src/settings/styles/utils/exports.scss
@@ -1,5 +1,4 @@
 @import './resources/colors';
 @import './resources/fonts';
-@import './resources/breakpoints';
 @import './helpers/mixin';
 @import './helpers/functions';
diff --git a/src/settings/styles/utils/helpers/_mixin.scss b/src/settings/styles/utils/helpers/_mixin.scss
index e92efed..80ec28f 100644
--- a/src/settings/styles/utils/helpers/_mixin.scss
+++ b/src/settings/styles/utils/helpers/_mixin.scss
@@ -2,15 +2,3 @@
 	width: #{$size};
 	height: #{$size};
 }
-
-@mixin mq($point, $type, $custom) {
-	@if map-has-key($breakpoints, $point) {
-		@media screen and (#{$type}-width: #{map-get($breakpoints, $point)}) {
-			@content;
-		}
-	} @else if map-has-key($breakpoints, $point) == false && $custom == true {
-		@media screen and (#{$type}-width: #{$custom}) {
-			@content;
-		}
-	}
-} ;
diff --git a/src/settings/styles/utils/resources/_breakpoints.scss b/src/settings/styles/utils/resources/_breakpoints.scss
deleted file mode 100644
index a136c45..0000000
--- a/src/settings/styles/utils/resources/_breakpoints.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// desenvolvimento focado em mobile-first
-
-$breakpoints: (
-	'md': 1025px,
-	'lg': 2500px,
-) !default;
diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss
index 043edf4..9aac3c5 100644
--- a/src/template/Header/index.module.scss
+++ b/src/template/Header/index.module.scss
@@ -1,5 +1,12 @@
 @use '../../settings/styles/utils/helpers/functions' as function;
 
+$containers: (
+	'xs': 339px,
+	'sm': 988px,
+	'md': 1080px,
+	'xl': 2299.68px,
+);
+
 .header {
 	position: sticky;
 	top: 0;
@@ -32,23 +39,36 @@
 
 .content {
 	@media only screen and (min-width: 1025px) {
-		width: #{function.fluid(1080px, 1280px)};
+		width: #{function.fluid(map-get($containers, 'md'), 1280px)};
 		padding: 0;
 		margin: 0 auto 22px;
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: #{function.fluid(2299.68px, 2500px)};
+		width: #{function.fluid(map-get($containers, 'xl'), 2500px)};
 	}
 }
 
 .logo {
+	$content: (
+		'md': 136px,
+		'xl': 265.62px,
+	);
+
+	// prettier-ignore
 	@media only screen and (min-width: 1025px) {
-		width: function.fluid(136px, 1080px);
+		width: function.fluid(
+			map-get($content, 'md'), 
+			map-get($containers, 'md')
+		);
 	}
 
+	// prettier-ignore
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(265.62px, 2299.68px);
+		width: function.fluid(
+			map-get($content, 'xl'), 
+			map-get($containers, 'xl')
+		);
 	}
 }
 
@@ -174,7 +194,7 @@
 		transition: 300ms ease;
 
 		&-content {
-			width: function.fluid(988px, 1024px);
+			width: function.fluid(map-get($containers, 'sm'), 1024px);
 			height: 100vh;
 		}
 	}
@@ -189,7 +209,7 @@
 .menu {
 	@media only screen and (max-width: 768px) {
 		&-content {
-			width: function.fluid(339px, 375px);
+			width: function.fluid(map-get($containers, 'xs'), 375px);
 			height: 100vh;
 		}
 	}
@@ -265,7 +285,7 @@
 			justify-content: flex-start;
 			gap: 55px;
 
-			width: function.fluid(1080px, 1280px);
+			width: function.fluid(map-get($containers, 'md'), 1280px);
 			padding: 14px 0;
 			margin: 0 auto;
 
@@ -286,18 +306,31 @@
 
 	@media screen and (min-width: 2500px) {
 		.list {
-			width: function.fluid(2299.68px, 2500px);
+			width: function.fluid(map-get($containers, 'xl'), 2500px);
 		}
 	}
 }
 
 .search-top {
+	$content: (
+		'md': 264px,
+		'xl': 515.62px,
+	);
+
+	// prettier-ignore
 	@media only screen and (min-width: 1025px) {
-		width: function.fluid(264px, 1080px);
+		width: function.fluid(
+			map-get($content, 'md'), 
+			map-get($containers, 'md')
+		);
 	}
 
+	// prettier-ignore
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(515.62px, 2299.68px);
+		width: function.fluid(
+			map-get($content, 'xl'), 
+			map-get($containers, 'xl')
+		);
 	}
 }
 
-- 
2.34.1