refactor: media queries

Alexander Bilz

12.25.2022 13383f64edc1fc620bd17670a5505ef63e8dd1cd

refactor: media queries

 assets/scss/modules/_config.scss

@@ -16,3 +16,12 @@
    @content;
  }
}

@mixin desktop_and_print {
  @include desktop {
    @content;
  }
  @include print {
    @content;
  }
}

 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;
  }


 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;
    }
  }

 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;
      }
    }

 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;
    }
  }

 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;

 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;
  }
}

 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;