Varia: Optimizing responsive logic

varia/sass/abstracts/_responsive-logic.scss

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

varia/sass/blocks/gallery/_style.scss

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

varia/style-rtl.css

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

varia/style.css

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