Mixin for desktop

mate-academy · Feb 19, 2024 · 65c3270 · 65c3270
1 parent 22585c1
commit 65c3270
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 140 deletions.
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -1,13 +1,11 @@
+@use '../utils/mixins' as *;
+
 .header {
   background-color: black;
   background-image: url(/src/images/header-background.jpg);
   background-repeat:no-repeat;
   background-size: cover;
 
-  // display: flex;
-  // flex-direction: column;
-  // justify-content: space-between;
-
   min-height: 100vh;
   padding: 0 20px 80px;
   box-sizing: border-box;
@@ -19,7 +17,7 @@
   grid-template-rows: 1fr 1fr;
   gap: 20px;
 
-  @media (min-width: 1020px) {
+  @include for-desktop{
     grid-template-columns: repeat(12, 63px);
     grid-template-rows: 1fr 1fr;
     gap: 24px;
@@ -30,7 +28,7 @@
     grid-column: 1 / 3;
     grid-row : 1 / 2;
 
-    @media (min-width: 1020px) {
+    @include for-desktop {
       grid-column: 1 / 13;
   }
 }
@@ -40,7 +38,7 @@
   grid-column: 1 / 3;
   grid-row: 2 / 3;
 
-  @media (min-width: 1020px) {
+  @include for-desktop {
     grid-column: 1 / 13;
   }
 }

diff --git a/src/styles/utils/extends.css b/src/styles/utils/extends.css
diff --git a/src/styles/utils/extends.css.map b/src/styles/utils/extends.css.map
diff --git a/src/styles/utils/mixins.css b/src/styles/utils/mixins.css
diff --git a/src/styles/utils/mixins.css.map b/src/styles/utils/mixins.css.map
diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss
@@ -1,3 +1,10 @@
+@mixin for-desktop() {
+  @media (min-width: 1020px) {
+    @content;
+  }
+}
+
+
 @mixin hover($_property, $_toValue) {
   transition: #{$_property} 0.3s;
   &:hover {

diff --git a/src/styles/utils/reset.css b/src/styles/utils/reset.css
diff --git a/src/styles/utils/reset.css.map b/src/styles/utils/reset.css.map
diff --git a/src/styles/utils/vars.css b/src/styles/utils/vars.css
diff --git a/src/styles/utils/vars.css.map b/src/styles/utils/vars.css.map