From 13383f64edc1fc620bd17670a5505ef63e8dd1cd Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Sat, 12 Feb 2022 11:25:17 +0000
Subject: [PATCH] refactor: media queries
---
assets/scss/partials/components/_sidebar.scss | 6 +-
assets/scss/modules/_config.scss | 9 ++++
assets/scss/partials/components/_archive.scss | 2
assets/scss/partials/components/_footer.scss | 10 +----
assets/scss/partials/components/_portfolio.scss | 14 +++---
assets/scss/partials/components/_post.scss | 2
assets/scss/partials/layout/_nav.scss | 2
assets/scss/partials/layout/_header.scss | 23 ++---------
8 files changed, 28 insertions(+), 40 deletions(-)
diff --git a/assets/scss/modules/_config.scss b/assets/scss/modules/_config.scss
index 110da80..46505a6 100644
--- 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
index 03c8509..68200d2 100644
--- 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
index 44ef7e6..1c03581 100644
--- 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
index 2f6c9d1..789e72a 100644
--- 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,7 +69,7 @@
}
&--left {
- @media screen and (min-width: 961px), print {
+ @include desktop_and_print {
margin-right: auto;
margin-left: 0;
border-bottom-left-radius: 0.5em;
@@ -77,7 +77,7 @@
}
&--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
index a78c85e..f50f1cd 100644
--- 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
index 03b8b0e..63ec0fb 100644
--- 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
index 40cf667..8de1747 100644
--- 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;
}
-}
+}
\ No newline at end of file
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
index 4782ce7..b6e1ac1 100644
--- 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;
--
Gitblit v1.10.0