refactor: media queries

lxndrblz · Feb 12, 2022 · 13383f6 · 13383f6
1 parent 9d78804
commit 13383f6
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 40 deletions.
diff --git a/assets/scss/modules/_config.scss b/assets/scss/modules/_config.scss
@@ -16,3 +16,12 @@
     @content;
   }
 }
+
+@mixin desktop_and_print {
+  @include desktop {
+    @content;
+  }
+  @include print {
+    @content;
+  }
+}
diff --git a/assets/scss/partials/components/_archive.scss b/assets/scss/partials/components/_archive.scss
@@ -1,7 +1,7 @@
 .archive {
   width: 100%;
 
-  @media screen and (min-width: 961px), print {
+  @include desktop_and_print {
     width: $content-width;
   }
 

diff --git a/assets/scss/partials/components/_footer.scss b/assets/scss/partials/components/_footer.scss
@@ -23,19 +23,13 @@
 
   &__sidebar {
     display: none;
-    @include desktop{
-      display: inline-block;
-    }
-    @include print{
+    @include desktop_and_print{
       display: inline-block;
     }
   }
 
   &__base {
-    @include desktop{
-      display: none;
-    }
-    @include print{
+    @include desktop_and_print{
       display: none;
     }
   }

diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
@@ -6,7 +6,7 @@
   padding-bottom: 0px;
   padding-top: 48px;
 
-  @media screen and (min-width: 961px), print {
+  @include desktop_and_print {
     padding: 48px;
   }
 
@@ -58,7 +58,7 @@
         padding: 32px 32px 0px 32px;
         max-width: inherit;
 
-        @media screen and (min-width: 961px), print {
+        @include desktop_and_print {
           width: 60%;
           object-fit: contain;
           max-width: none;
@@ -69,15 +69,15 @@
       }
 
       &--left {
-        @media screen and (min-width: 961px), print {
+        @include desktop_and_print {
           margin-right: auto;
           margin-left: 0;
           border-bottom-left-radius: 0.5em;
         }
       }
 
       &--right {
-        @media screen and (min-width: 961px), print {
+        @include desktop_and_print {
           margin-right: 0;
           margin-left: auto;
           border-bottom-right-radius: 0.5em;
@@ -89,7 +89,7 @@
   &__description {
     background-color: $accent;
     padding: 32px;
-    @media screen and (min-width: 961px), print {
+    @include desktop_and_print {
       padding: 48px;
       box-shadow: $shadow;
       background-color: $accent;
@@ -101,7 +101,7 @@
       margin-top: -24px;
       border-bottom: $border;
 
-      @media screen and (min-width: 961px), print {
+      @include desktop_and_print {
         border-bottom: 0px;
         width: 60%;
         margin-top: -48px;
@@ -111,7 +111,7 @@
     }
 
     &--right {
-      @media screen and (min-width: 961px), print {
+      @include desktop_and_print {
         margin-left: auto;
       }
     }

diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
@@ -5,7 +5,7 @@
   &-wrapper {
     width: 100%;
 
-    @media screen and (min-width: 961px), print {
+    @include desktop_and_print {
       width: $content-width;
     }
   }

diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
@@ -3,7 +3,7 @@
   background-size: cover;
   background-color: var(--bg-color);
 
-  @media screen and (min-width: 961px), print {
+  @include desktop_and_print {
     border-right: 1px solid $primary-lighter;
     z-index: 3;
     height: 100vh;
@@ -22,13 +22,13 @@
   &-wrapper {
     width: 100%;
 
-    @media screen and (min-width: 961px), print {
+    @include desktop_and_print {
       width: $sidebar-width;
     }
   }
 
   &__content {
-    @media screen and (min-width: 961px), print {
+    @include desktop_and_print {
       display: flex;
       flex-direction: column;
       flex-grow: 1;

diff --git a/assets/scss/partials/layout/_header.scss b/assets/scss/partials/layout/_header.scss
@@ -1,31 +1,16 @@
 .header {
-  width: $content-width;
+  width: 100%;
   position: fixed;
   right: 0;
   z-index: 3;
   background-color: $accent;
-}
 
-@media screen and (min-width: 961px), print {
-  .header {
+  @include desktop {
     border-bottom: $border;
-  }
-}
-@media screen and (max-width: 960px) {
-  .header {
-    width: 100%;
-  }
-}
-
-@media (min-width: 1921px) {
-  .header {
-    position: fixed;
     width: $content-width;
   }
-}
 
-@media print {
-  .header {
+  @include print {
     display: none;
   }
-}
+}
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
@@ -34,7 +34,7 @@
   }
 }
 
-@media screen and (min-width: 961px), print {
+@include desktop_and_print {
   .nav {
     display: flex;
     justify-content: space-between;