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

Varia: Optimizing responsive logic

Browse source
This commit is contained in:
Allan Cole 2019-07-24 16:59:18 -04:00
parent 1e5274380a
commit 2b9ee332e1
4 changed files with 46 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -91,22 +91,22 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
@include align-container-width( calc( #{$content-width-flex} - #{$horizontal-padding} ) );
@include media(mobile) {
@include align-container-width( $content-width-sm );
@include align-container-width( calc( #{$content-width-sm} - #{$horizontal-padding} ) );
}
@include media(tablet) {
@include align-container-width( $content-width-md );
@include align-container-width( calc( #{$content-width-md} - #{$horizontal-padding} ) );
}
@include media(laptop) {
@include align-container-width( $content-width-lg );
@include align-container-width( calc( #{$content-width-lg} - #{$horizontal-padding} ) );
}
@include media(desktop) {
@include align-container-width( $content-width-lg );
@include align-container-width( calc( #{$content-width-lg} - #{$horizontal-padding} ) );
}
@include media(wide) {
@include align-container-width( $content-width-lg );
@include align-container-width( calc( #{$content-width-lg} - #{$horizontal-padding} ) );
}
}

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

@ -22,6 +22,6 @@
// Apply max-width to floated items that have no intrinsic width.
&.alignleft,
&.alignright {
@extend %responsive-align-container;
max-width: 50%;
}
}

36
varia/style-rtl.css
View file

@ -1271,6 +1271,10 @@ input.has-focus[type="submit"],
width: calc( (100% - 16px) / 2);
}
.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
max-width: 50%;
}
.wp-block-group .wp-block-group__inner-container {
margin-right: auto;
margin-left: auto;
@ -3003,7 +3007,7 @@ table th,
.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-cover-image .wp-block-cover-text, .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 {
@ -3017,12 +3021,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 560px - 32px));
max-width: calc( calc( calc( 560px - 32px) - 32px));
width: calc( calc( calc( 560px - 32px) - 32px));
}
}
@ -3032,12 +3036,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 640px - 32px));
max-width: calc( calc( calc( 640px - 32px) - 32px));
width: calc( calc( calc( 640px - 32px) - 32px));
}
}
@ -3047,12 +3051,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 782px - 32px));
max-width: calc( calc( calc( 782px - 32px) - 32px));
width: calc( calc( calc( 782px - 32px) - 32px));
}
}
@ -3062,12 +3066,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 782px - 32px));
max-width: calc( calc( calc( 782px - 32px) - 32px));
width: calc( calc( calc( 782px - 32px) - 32px));
}
}
@ -3077,12 +3081,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 782px - 32px));
max-width: calc( calc( calc( 782px - 32px) - 32px));
width: calc( calc( calc( 782px - 32px) - 32px));
}
}

36
varia/style.css
View file

@ -1271,6 +1271,10 @@ input.has-focus[type="submit"],
width: calc( (100% - 16px) / 2);
}
.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
max-width: 50%;
}
.wp-block-group .wp-block-group__inner-container {
margin-left: auto;
margin-right: auto;
@ -3008,7 +3012,7 @@ table th,
.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-cover-image .wp-block-cover-text, .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 {
@ -3022,12 +3026,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 560px - 32px));
max-width: calc( calc( calc( 560px - 32px) - 32px));
width: calc( calc( calc( 560px - 32px) - 32px));
}
}
@ -3037,12 +3041,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 640px - 32px));
max-width: calc( calc( calc( 640px - 32px) - 32px));
width: calc( calc( calc( 640px - 32px) - 32px));
}
}
@ -3052,12 +3056,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 782px - 32px));
max-width: calc( calc( calc( 782px - 32px) - 32px));
width: calc( calc( calc( 782px - 32px) - 32px));
}
}
@ -3067,12 +3071,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 782px - 32px));
max-width: calc( calc( calc( 782px - 32px) - 32px));
width: calc( calc( calc( 782px - 32px) - 32px));
}
}
@ -3082,12 +3086,12 @@ table th,
.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-cover-image .wp-block-cover-text, .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));
width: calc( calc( 782px - 32px));
max-width: calc( calc( calc( 782px - 32px) - 32px));
width: calc( calc( calc( 782px - 32px) - 32px));
}
}