From 1e5274380a523752ee1dffc61a645c9858438df2 Mon Sep 17 00:00:00 2001 From: Allan Cole Date: Wed, 24 Jul 2019 16:46:06 -0400 Subject: [PATCH] Varia: Clean up responsive content container styles --- varia/sass/abstracts/_mixins.scss | 6 +- varia/sass/abstracts/_responsive-logic.scss | 2 +- varia/sass/blocks/cover/_style.scss | 7 +- varia/sass/blocks/group/_style.scss | 2 +- varia/style-rtl.css | 90 ++++++++++++--------- varia/style.css | 90 ++++++++++++--------- 6 files changed, 114 insertions(+), 83 deletions(-) diff --git a/varia/sass/abstracts/_mixins.scss b/varia/sass/abstracts/_mixins.scss index df8a7b781..f585a41d1 100644 --- a/varia/sass/abstracts/_mixins.scss +++ b/varia/sass/abstracts/_mixins.scss @@ -77,9 +77,9 @@ * Align container widths * - Sets a fixed-width on content within alignwide and alignfull blocks */ -@mixin align-container-width( $width: 100%, $multiplier: "2", $columns: "12" ) { - max-width: calc( #{$width} - (#{$multiplier} * ( #{$width} / #{$columns} ))); - width: calc( #{$width} - (#{$multiplier} * ( #{$width} / #{$columns} ))); +@mixin align-container-width( $width: 100% ) { + max-width: calc( #{$width} ); + width: calc( #{$width} ); } /** diff --git a/varia/sass/abstracts/_responsive-logic.scss b/varia/sass/abstracts/_responsive-logic.scss index cbf79dc8c..530c9c289 100644 --- a/varia/sass/abstracts/_responsive-logic.scss +++ b/varia/sass/abstracts/_responsive-logic.scss @@ -88,7 +88,7 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} - %responsive-align-container { - @include align-container-width( $content-width-flex ); + @include align-container-width( calc( #{$content-width-flex} - #{$horizontal-padding} ) ); @include media(mobile) { @include align-container-width( $content-width-sm ); diff --git a/varia/sass/blocks/cover/_style.scss b/varia/sass/blocks/cover/_style.scss index 56fa3e1ea..911be43eb 100644 --- a/varia/sass/blocks/cover/_style.scss +++ b/varia/sass/blocks/cover/_style.scss @@ -8,6 +8,7 @@ .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text { + @extend %responsive-align-container; color: #{map-deep-get($config-global, "color", "background")}; margin-top: #{map-deep-get($config-global, "spacing", "vertical")}; margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")}; @@ -60,9 +61,3 @@ justify-content: center; } } - -.wp-block-cover__inner-container, -.wp-block-cover-image-text, -.wp-block-cover-text { - @extend %responsive-align-container; -} diff --git a/varia/sass/blocks/group/_style.scss b/varia/sass/blocks/group/_style.scss index 14b4addc5..f59d819d4 100644 --- a/varia/sass/blocks/group/_style.scss +++ b/varia/sass/blocks/group/_style.scss @@ -1,7 +1,7 @@ .wp-block-group { .wp-block-group__inner-container { - @extend %responsive-width-normal; + @extend %responsive-align-container; margin-left: auto; margin-right: auto; diff --git a/varia/style-rtl.css b/varia/style-rtl.css index 036a29d67..d597c8ce7 100644 --- a/varia/style-rtl.css +++ b/varia/style-rtl.css @@ -2848,36 +2848,36 @@ table th, * Page Layout Styles & Repsonsive Styles */ /* Responsive width-content overrides */ -.responsive-max-width, .wp-block-group .wp-block-group__inner-container { +.responsive-max-width { max-width: 100%; } @media only screen and (min-width: 560px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 560px - 32px); } } @media only screen and (min-width: 640px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 640px - 32px); } } @media only screen and (min-width: 782px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1024px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1280px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 782px - 32px); } } @@ -2998,73 +2998,91 @@ table th, } } -.wp-block-cover__inner-container, -.wp-block-cover-image-text, -.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, +.wp-block-cover .wp-block-cover__inner-container, +.wp-block-cover .wp-block-cover-image-text, +.wp-block-cover .wp-block-cover-text, +.wp-block-cover-image .wp-block-cover__inner-container, +.wp-block-cover-image .wp-block-cover-image-text, +.wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( 100% - (2 * ( 100% / 12 ))); - width: calc( 100% - (2 * ( 100% / 12 ))); + max-width: calc( calc( 100% - 32px)); + width: calc( calc( 100% - 32px)); } @media only screen and (min-width: 560px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 ))); - width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 ))); + max-width: calc( calc( 560px - 32px)); + width: calc( calc( 560px - 32px)); } } @media only screen and (min-width: 640px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 ))); - width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 ))); + max-width: calc( calc( 640px - 32px)); + width: calc( calc( 640px - 32px)); } } @media only screen and (min-width: 782px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); - width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); + max-width: calc( calc( 782px - 32px)); + width: calc( calc( 782px - 32px)); } } @media only screen and (min-width: 1024px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); - width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); + max-width: calc( calc( 782px - 32px)); + width: calc( calc( 782px - 32px)); } } @media only screen and (min-width: 1280px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); - width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); + max-width: calc( calc( 782px - 32px)); + width: calc( calc( 782px - 32px)); } } diff --git a/varia/style.css b/varia/style.css index 0f06180d2..d740023fd 100644 --- a/varia/style.css +++ b/varia/style.css @@ -2853,36 +2853,36 @@ table th, * Page Layout Styles & Repsonsive Styles */ /* Responsive width-content overrides */ -.responsive-max-width, .wp-block-group .wp-block-group__inner-container { +.responsive-max-width { max-width: 100%; } @media only screen and (min-width: 560px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 560px - 32px); } } @media only screen and (min-width: 640px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 640px - 32px); } } @media only screen and (min-width: 782px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1024px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1280px) { - .responsive-max-width, .wp-block-group .wp-block-group__inner-container { + .responsive-max-width { max-width: calc( 782px - 32px); } } @@ -3003,73 +3003,91 @@ table th, } } -.wp-block-cover__inner-container, -.wp-block-cover-image-text, -.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, +.wp-block-cover .wp-block-cover__inner-container, +.wp-block-cover .wp-block-cover-image-text, +.wp-block-cover .wp-block-cover-text, +.wp-block-cover-image .wp-block-cover__inner-container, +.wp-block-cover-image .wp-block-cover-image-text, +.wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( 100% - (2 * ( 100% / 12 ))); - width: calc( 100% - (2 * ( 100% / 12 ))); + max-width: calc( calc( 100% - 32px)); + width: calc( calc( 100% - 32px)); } @media only screen and (min-width: 560px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 ))); - width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 ))); + max-width: calc( calc( 560px - 32px)); + width: calc( calc( 560px - 32px)); } } @media only screen and (min-width: 640px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 ))); - width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 ))); + max-width: calc( calc( 640px - 32px)); + width: calc( calc( 640px - 32px)); } } @media only screen and (min-width: 782px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); - width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); + max-width: calc( calc( 782px - 32px)); + width: calc( calc( 782px - 32px)); } } @media only screen and (min-width: 1024px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); - width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); + max-width: calc( calc( 782px - 32px)); + width: calc( calc( 782px - 32px)); } } @media only screen and (min-width: 1280px) { - .wp-block-cover__inner-container, - .wp-block-cover-image-text, - .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .wp-block-cover .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover-image-text, + .wp-block-cover .wp-block-cover-text, + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover-image .wp-block-cover-image-text, + .wp-block-cover-image .wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-group .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode { - max-width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); - width: calc( calc( 782px - 32px) - (2 * ( calc( 782px - 32px) / 12 ))); + max-width: calc( calc( 782px - 32px)); + width: calc( calc( 782px - 32px)); } }