From 27831224095f8a72ee5bd8ce135aad040e8718cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20=C3=81lvarez?= <89805481+danalvrz@users.noreply.github.com> Date: Tue, 25 Jul 2023 20:39:17 -0600 Subject: [PATCH 1/2] fix responsive spacings & fonts --- src/theme/_bgcolor-blocks-layout.scss | 5 +- src/theme/_content.scss | 4 + src/theme/_variables.scss | 48 ++++++- src/theme/blocks/_grid.scss | 188 +++++++++++++++----------- src/theme/blocks/_introduction.scss | 5 +- src/theme/blocks/_listing.scss | 7 +- 6 files changed, 166 insertions(+), 91 deletions(-) diff --git a/src/theme/_bgcolor-blocks-layout.scss b/src/theme/_bgcolor-blocks-layout.scss index 00395719..eaef63b4 100644 --- a/src/theme/_bgcolor-blocks-layout.scss +++ b/src/theme/_bgcolor-blocks-layout.scss @@ -1,6 +1,5 @@ .blocks-group-wrapper { - padding-top: $color-block-change-vertical-spacing; - padding-bottom: $color-block-change-vertical-spacing; + @include color-block-change-vertical-spacing(); } .blocks-group-wrapper.grey { @@ -25,7 +24,7 @@ // For grids #page-document .blocks-group-wrapper .block.gridBlock { &.is--first--of--block-type.previous--has--same--backgroundColor { - margin-top: $grid-block-vertical-spacing-top; + @include grid-block-vertical-spacing-top(); } &.is--last--of--block-type.next--has--same--backgroundColor { margin-bottom: $grid-block-vertical-spacing-bottom; diff --git a/src/theme/_content.scss b/src/theme/_content.scss index ac18a180..266c2d0a 100644 --- a/src/theme/_content.scss +++ b/src/theme/_content.scss @@ -168,5 +168,9 @@ margin-bottom: $spacing-medium; color: $black; @include body-text(); + + @media only screen and (max-width: $largest-mobile-screen) { + margin-bottom: $spacing-large; + } } } diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss index b6f46ea4..9710a320 100644 --- a/src/theme/_variables.scss +++ b/src/theme/_variables.scss @@ -85,14 +85,27 @@ $horizontal-space-small-screens: $spacing-small !default; // Vertical Spacing $block-vertical-space: 25px !default; +// Change of color +$color-block-change-vertical-spacing: 80px !default; + +// Grids +$grid-block-vertical-spacing-top: 80px !default; +$grid-block-vertical-spacing-bottom: 80px !default; + @mixin vertical-space-h1() { margin-top: 40px; margin-bottom: 80px; + @media only screen and (max-width: $largest-mobile-screen) { + margin-bottom: 60px; + } } @mixin vertical-space-h2() { margin-top: 80px; margin-bottom: 40px; + @media only screen and (max-width: $largest-mobile-screen) { + margin-top: 60px; + } } @mixin vertical-space-h3() { @@ -108,11 +121,19 @@ $block-vertical-space: 25px !default; @mixin vertical-space-heading() { margin-top: 80px; margin-bottom: 80px; + @media only screen and (max-width: $largest-mobile-screen) { + margin-top: 60px; + margin-bottom: 60px; + } } @mixin vertical-space-introduction() { margin-top: 80px; margin-bottom: 80px; + @media only screen and (max-width: $largest-mobile-screen) { + margin-top: 60px; + margin-bottom: 60px; + } } @mixin vertical-space-button() { @@ -127,19 +148,36 @@ $block-vertical-space: 25px !default; @mixin vertical-space-separator() { margin-top: 80px; margin-bottom: 80px; + @media only screen and (max-width: $largest-mobile-screen) { + margin-top: 60px; + margin-bottom: 60px; + } } @mixin vertical-space-block-title() { margin-top: 80px; margin-bottom: 80px; + @media only screen and (max-width: $largest-mobile-screen) { + margin-top: 60px; + margin-bottom: 60px; + } } -// Change of color -$color-block-change-vertical-spacing: 80px !default; +@mixin color-block-change-vertical-spacing() { + padding-top: $color-block-change-vertical-spacing; + padding-bottom: $color-block-change-vertical-spacing; + @media only screen and (max-width: $largest-mobile-screen) { + padding-top: $spacing-large; + padding-bottom: $spacing-large; + } +} -// Grids -$grid-block-vertical-spacing-top: 80px !default; -$grid-block-vertical-spacing-bottom: 80px !default; +@mixin grid-block-vertical-spacing-top() { + margin-top: $grid-block-vertical-spacing-top; + @media only screen and (max-width: $largest-mobile-screen) { + margin-top: $spacing-large; + } +} // Footer $footer-vertical-spacing-top: 80px !default; diff --git a/src/theme/blocks/_grid.scss b/src/theme/blocks/_grid.scss index 9ffd27d8..484ec894 100644 --- a/src/theme/blocks/_grid.scss +++ b/src/theme/blocks/_grid.scss @@ -2,14 +2,27 @@ margin-top: 0; margin-bottom: 0; - &.is--first--of--block-type { - .column { - padding-top: 0; + &.is--first--of--block-type, + &.previous--is--same--block-type.previous--has--different--backgroundColor { + @media only screen and (min-width: $largest-mobile-screen) { + .ui.stackable.grid > .column { + padding-top: 0 !important; + } + } + .ui.stackable.grid > .column:first-child { + padding-top: 0 !important; } } - &.is--last--of--block-type { - .column { - padding-bottom: 0; + + &.is--last--of--block-type, + &.next--is--same--block-type.next--has--different--backgroundColor { + @media only screen and (min-width: $largest-mobile-screen) { + .ui.stackable.grid > .column { + padding-bottom: 0 !important; + } + } + .ui.stackable.grid > .column:last-child { + padding-bottom: 0 !important; } } @@ -41,7 +54,8 @@ h2 { padding: 0; - margin-bottom: 20px; + margin-bottom: 20px !important; + @include text-heading-h3(); } p { @@ -53,11 +67,10 @@ .block-editor-teaser { padding: 0; - margin: 0.5rem !important; - .teaser-item { - border: none !important; - margin-right: auto !important; - margin-left: auto !important; + margin: 10px !important; + .teaser-item.default { + padding-bottom: 0; + border: none; } } @@ -70,6 +83,11 @@ padding: 0; margin-bottom: 20px; } + + h2 { + margin-bottom: 20px !important; + @include text-heading-h3(); + } } .block-editor-slate { @@ -94,7 +112,7 @@ margin: 0 0 20px 0; color: $white !important; letter-spacing: 1px; - @include text-heading-h2(); + @include text-heading-h3(); } .description { @@ -169,96 +187,108 @@ } // Dynamic font sizes depending on number of columns for in-grid blocks -.block.gridBlock, -.block-editor-gridBlock { - .one { - .teaser-item .content h2 { - margin-bottom: 40px !important; - @include text-heading-h2(); - } - - .slate { - h2 { +#page-document .block.gridBlock, +#page-edit .block-editor-gridBlock, +#page-add .block-editor-gridBlock { + @media only screen and (min-width: $largest-mobile-screen) { + .one { + .teaser-item .content h2 { margin-bottom: 40px !important; + @include text-heading-h2(); } - } - } - .two, - .three { - .teaser { - .teaser-item .content { + .slate { h2 { - margin-bottom: 20px !important; - @include text-heading-h3(); + margin-bottom: 40px !important; + @include text-heading-h2(); } } - } - .image { - figcaption { - .title { - @include text-heading-h3(); - margin: 0 0 20px 0; + + .image { + figcaption { + .title { + @include text-heading-h2(); + } } } - figure:after { - height: 70px; - } - } - .slate { - h2 { - margin-bottom: 20px !important; - @include text-heading-h3(); - } } - } - .four { - .teaser { - .teaser-item { - .image-wrapper { - margin-bottom: 20px !important; - } - .content { - .headline { - @include headtitle2(); - } + .two, + .three { + .teaser { + .teaser-item .content { h2 { margin-bottom: 20px !important; - @include text-heading-h4(); - } - p { - margin-bottom: 0; + @include text-heading-h3(); } } } - } - - .image { - figcaption { - .title { - margin: 0 0 15px 0; - color: $white !important; - letter-spacing: 1px; - @include text-heading-h4(); + .image { + figcaption { + .title { + @include text-heading-h3(); + margin: 0 0 20px 0; + } + } + figure:after { + height: 70px; } } - figure:after { - height: 59px; + .slate { + h2 { + margin-bottom: 20px !important; + @include text-heading-h3(); + } } } - .slate { - h2 { - margin-bottom: 20px !important; - @include text-heading-h4(); + .four { + .teaser { + .teaser-item { + .image-wrapper { + margin-bottom: 20px !important; + } + .content { + .headline { + @include headtitle2(); + } + h2 { + margin-bottom: 20px !important; + @include text-heading-h4(); + } + p { + margin-bottom: 0; + } + } + } } - p { - margin-bottom: 0; + .image { + figcaption { + .title { + margin: 0 0 15px 0; + color: $white !important; + letter-spacing: 1px; + @include text-heading-h4(); + } + } + figure:after { + height: 59px; + } } - padding-top: 20px !important; + .slate { + h2 { + margin-bottom: 20px !important; + @include text-heading-h4(); + } + + p { + margin-bottom: 0; + } + + padding-top: 20px !important; + } } } } diff --git a/src/theme/blocks/_introduction.scss b/src/theme/blocks/_introduction.scss index c951ecbc..9a712994 100644 --- a/src/theme/blocks/_introduction.scss +++ b/src/theme/blocks/_introduction.scss @@ -23,6 +23,9 @@ h2 { @include highlight-title(); - margin-bottom: 60px; + margin-bottom: $spacing-large; + @media only screen and (max-width: $largest-mobile-screen) { + margin-bottom: $spacing-medium; + } } } diff --git a/src/theme/blocks/_listing.scss b/src/theme/blocks/_listing.scss index fe5cb3d0..bf17ede9 100644 --- a/src/theme/blocks/_listing.scss +++ b/src/theme/blocks/_listing.scss @@ -196,9 +196,10 @@ .block.listing { margin-top: 0; - .items { - margin-right: 0; - margin-left: 0; + h2 { + @include default-container-width(); + margin-right: auto; + margin-left: auto; } } } From 4df59f3baae5e4667589630378938d49bec39472 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20=C3=81lvarez?= <89805481+danalvrz@users.noreply.github.com> Date: Tue, 25 Jul 2023 20:48:56 -0600 Subject: [PATCH 2/2] changelog --- news/181.bugfix | 1 + 1 file changed, 1 insertion(+) create mode 100644 news/181.bugfix diff --git a/news/181.bugfix b/news/181.bugfix new file mode 100644 index 00000000..c367cb23 --- /dev/null +++ b/news/181.bugfix @@ -0,0 +1 @@ +Fixed responsive spacings & font sizes for mobile screens. @danalvrz \ No newline at end of file