beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Clean up responsive content container styles

Browse source
This commit is contained in:
Allan Cole 2019-07-24 16:46:06 -04:00
parent 5b60ec236f
commit 1e5274380a
6 changed files with 114 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
varia/sass/abstracts/_mixins.scss
View file

@ -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} );
}
/**

2
varia/sass/abstracts/_responsive-logic.scss
View file

@ -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 );

7
varia/sass/blocks/cover/_style.scss
View file

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

2
varia/sass/blocks/group/_style.scss
View file

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

90
varia/style-rtl.css
View file

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

90
varia/style.css
View file

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