diff --git a/components/RichText/styles.module.scss b/components/RichText/styles.module.scss index e858400f..1410fd7c 100644 --- a/components/RichText/styles.module.scss +++ b/components/RichText/styles.module.scss @@ -23,7 +23,7 @@ .htmlContent h1 { @include heading-2; - @include desktop-large-up { + @include desktop-up { @include heading-1; } @@ -39,7 +39,7 @@ .htmlContent h2 { @include heading-3; - @include desktop-large-up { + @include desktop-up { @include heading-2; } diff --git a/components/StoryCards/HighlightedStoryCard.module.scss b/components/StoryCards/HighlightedStoryCard.module.scss index 9d5a6491..9760b6ad 100644 --- a/components/StoryCards/HighlightedStoryCard.module.scss +++ b/components/StoryCards/HighlightedStoryCard.module.scss @@ -53,7 +53,7 @@ @include heading-2; @include ensure-max-text-height(4, $line-height-m); - @include desktop-large-up { + @include desktop-up { @include heading-1-xxl; @include ensure-max-text-height(2, $line-height-xl); } diff --git a/modules/Story/HeaderRenderer/HeaderRenderer.module.scss b/modules/Story/HeaderRenderer/HeaderRenderer.module.scss index 8b1623d9..e92b4735 100644 --- a/modules/Story/HeaderRenderer/HeaderRenderer.module.scss +++ b/modules/Story/HeaderRenderer/HeaderRenderer.module.scss @@ -4,7 +4,7 @@ .prezly-slate-heading--heading-1 { @include heading-2; - @include desktop-large-up { + @include desktop-up { @include heading-1; } diff --git a/styles/mixins/_container.scss b/styles/mixins/_container.scss index 65a7c3db..36aa8d0b 100644 --- a/styles/mixins/_container.scss +++ b/styles/mixins/_container.scss @@ -15,11 +15,6 @@ padding-right: $grid-spacing-desktop; max-width: $grid-container-max-width; } - - @include desktop-large-up { - padding-left: $grid-spacing-desktop-large; - padding-right: $grid-spacing-desktop-large; - } } /* diff --git a/styles/mixins/_responsive.scss b/styles/mixins/_responsive.scss index 956a87e5..2d3e507b 100644 --- a/styles/mixins/_responsive.scss +++ b/styles/mixins/_responsive.scss @@ -1,31 +1,25 @@ @import "../variables/breakpoints"; @mixin mobile-only { - @media screen and (max-width: $breakpoint-tablet) { + @media screen and (max-width: $breakpoint-tablet - 1px) { @content; } } @mixin tablet-up { - @media screen and (min-width: $breakpoint-tablet + 1px) { + @media screen and (min-width: $breakpoint-tablet) { @content; } } @mixin tablet-only { - @media screen and (min-width: $breakpoint-tablet + 1px) and (max-width: $breakpoint-desktop) { + @media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-desktop) { @content; } } @mixin desktop-up { - @media screen and (min-width: $breakpoint-desktop + 1px) { - @content; - } -} - -@mixin desktop-large-up { - @media screen and (min-width: $breakpoint-desktop-large + 1px) { + @media screen and (min-width: $breakpoint-desktop) { @content; } } diff --git a/styles/variables/_breakpoints.scss b/styles/variables/_breakpoints.scss index 3ae0f575..3acd8e8c 100644 --- a/styles/variables/_breakpoints.scss +++ b/styles/variables/_breakpoints.scss @@ -1,5 +1,4 @@ -$breakpoint-tablet: 414px; -$breakpoint-desktop: 768px; -$breakpoint-desktop-large: 1024px; +$breakpoint-tablet: 768px; +$breakpoint-desktop: 1024px; $breakpoint-cards-small: 600px; $breakpoint-cards-medium: 940px; diff --git a/styles/variables/_spacing.scss b/styles/variables/_spacing.scss index eddb19d0..bae3928d 100644 --- a/styles/variables/_spacing.scss +++ b/styles/variables/_spacing.scss @@ -19,6 +19,5 @@ $grid-gutter-tablet: 2.5rem; // 40px $grid-spacing-tablet: 2.5rem; // 40px $grid-gutter-desktop: 2.5rem; // 40px $grid-spacing-desktop: 2.5rem; // 40px -$grid-spacing-desktop-large: 5rem; // 80px $grid-container-max-width: 1280px; // 1120px + 80px spacing on the sides