瀏覽代碼

Varia: More code tidying and efficiency improvements

Allan Cole 5 年之前
父節點
當前提交
e8d66c9901

+ 10 - 16
varia/sass/abstracts/_mixins.scss

@@ -43,7 +43,7 @@
 
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
+ * - Sets .alignwide widths
  */
 @mixin alignwide-width( $width: 100%, $multiplier...) {
 
@@ -51,24 +51,18 @@
 		$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
 	}
 
-	width: calc(#{$width} + #{2 * $multiplier}); // calc( #{$width} + #{$positive_multiplier * 2} + ( 100vw - #{$width} ) );
-	max-width: calc(100vw - #{2 * map-deep-get($config-global, "spacing", "horizontal")}); // calc( #{$width} + #{$positive_multiplier * 2} + ( 100vw - #{$width} ) );
+	width: calc(#{$width} + #{2 * $multiplier});
+	max-width: calc(100vw - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
 }
 
-/**
- * Align right widths
- */
-@mixin alignright-margin( $width: 100%, $multiplier...) {
-	margin-right: calc( 0.5 * (100vw - #{$width}));
-}
+@mixin alignwide-width-nested( $width: 100%, $multiplier...) {
 
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
- */
-@mixin align-container-width( $width: 100% ) {
-	max-width: calc( #{$width} );
-	width: calc( #{$width} );
+	@if length($multiplier) == 0 {
+		$multiplier: (8 * map-deep-get($config-global, "spacing", "horizontal"));
+	}
+
+	width: calc(#{$width} + #{2 * $multiplier});
+	max-width: 100%;
 }
 
 /**

+ 34 - 6
varia/sass/abstracts/_responsive-logic.scss

@@ -65,6 +65,33 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	}
 }
 
+%responsive-alignwide-nested {
+
+	@include alignwide-width-nested( $content-width-flex );
+	margin-left: auto;
+	margin-right: auto;
+
+	@include media(mobile) {
+		@include alignwide-width-nested( $content-width-sm );
+	}
+
+	@include media(tablet) {
+		@include alignwide-width-nested( $content-width-md );
+	}
+
+	@include media(laptop) {
+		@include alignwide-width-nested( $content-width-lg );
+	}
+
+	@include media(desktop) {
+		@include alignwide-width-nested( $content-width-lg );
+	}
+
+	@include media(wide) {
+		@include alignwide-width-nested( $content-width-lg );
+	}
+}
+
 %responsive-alignfull {
 	/* Letting the box-model do all the work here. */
 }
@@ -134,26 +161,27 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 %responsive-align-container {
 
 /*
-	@include align-container-width( calc( #{$content-width-flex} - #{$horizontal-padding} ) );
+	max-width: calc( #{$content-width-flex} - #{$horizontal-padding} );
+	width: calc( #{$content-width-flex} - #{$horizontal-padding} );
 
 	@include media(mobile) {
-		@include align-container-width( #{$content-width-sm} );
+		max-width: #{$content-width-sm};
 	}
 
 	@include media(tablet) {
-		@include align-container-width( #{$content-width-md} );
+		max-width: #{$content-width-md};
 	}
 
 	@include media(laptop) {
-		@include align-container-width( #{$content-width-lg} );
+		max-width: #{$content-width-lg};
 	}
 
 	@include media(desktop) {
-		@include align-container-width( #{$content-width-lg} );
+		max-width: #{$content-width-lg};
 	}
 
 	@include media(wide) {
-		@include align-container-width( #{$content-width-lg} );
+		max-width: #{$content-width-lg};
 	}
 */
 }

+ 26 - 22
varia/sass/blocks/utilities/_style.scss

@@ -25,42 +25,46 @@
 	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 }
 
-// *.alignnormal, .alignwide & .alignfull
-// - More selector specificity needed here to deal with
-//   group-block expected behavior
-// - See: sass/blocks/group/_style.scss
-.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) {
+/**
+ * .aligndefault
+ */
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
 	@extend %responsive-aligndefault;
 }
 
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
+}
+
+/**
+ * .alignwide
+ */
+.alignwide {
+	clear: both;
+}
+
 .entry-content > .alignwide {
 	@extend %responsive-alignwide;
-	clear: both;
 }
-.entry-content > .alignwide [class*="inner-container"] > .alignwide ,
-.entry-content > .alignwide [class*="inner-container"] > .alignfull {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 100%;
-	width: 100%;
+
+.entry-content > .alignwide [class*="inner-container"] > .alignwide {
+	@extend %responsive-alignwide-nested;
 }
 
-.entry-content > .alignfull [class*="inner-container"] > .alignwide {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: calc( 100% - #{4 * map-deep-get($config-global, "spacing", "horizontal")} );
-	width: calc( 100% - #{4 * map-deep-get($config-global, "spacing", "horizontal")} );
+/**
+ * .alignfull
+ */
+.alignfull {
+	clear: both;
 }
 
 .entry-content > .alignfull {
 	@extend %responsive-alignfull;
-	clear: both;
 }
 
-.entry-content [class*="inner-container"] > .alignfull {
-	max-width: 100%;
-	width: 100%;
+.entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	@extend %responsive-alignwide-nested;
 }
 
 // Content alignment

+ 1 - 8
varia/style-editor.css

@@ -105,14 +105,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  */
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-/**
- * Align right widths
- */
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
+ * - Sets .alignwide widths
  */
 /**
  * Crop Text Boundry

+ 69 - 41
varia/style-rtl.css

@@ -129,14 +129,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  */
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-/**
- * Align right widths
- */
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
+ * - Sets .alignwide widths
  */
 /**
  * Crop Text Boundry
@@ -1930,32 +1923,25 @@ table th,
 	margin-bottom: 32px;
 }
 
-.entry-content > .alignwide {
-	clear: both;
-}
-
-.entry-content > .alignwide [class*="inner-container"] > .alignwide,
-.entry-content > .alignwide [class*="inner-container"] > .alignfull {
-	margin-right: auto;
-	margin-left: auto;
-	max-width: 100%;
-	width: 100%;
-}
-
-.entry-content > .alignfull [class*="inner-container"] > .alignwide {
-	margin-right: auto;
-	margin-left: auto;
-	max-width: calc( 100% - 64px);
-	width: calc( 100% - 64px);
+/**
+ * .aligndefault
+ */
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
 }
 
-.entry-content > .alignfull {
+/**
+ * .alignwide
+ */
+.alignwide {
 	clear: both;
 }
 
-.entry-content [class*="inner-container"] > .alignfull {
-	max-width: 100%;
-	width: 100%;
+/**
+ * .alignfull
+ */
+.alignfull {
+	clear: both;
 }
 
 .has-left-content {
@@ -3099,8 +3085,8 @@ img#wpstats {
 .responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
 	margin-right: auto;
 	margin-left: auto;
@@ -3110,8 +3096,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
@@ -3120,8 +3106,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
@@ -3130,8 +3116,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3140,8 +3126,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3150,8 +3136,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3198,6 +3184,48 @@ img#wpstats {
 	}
 }
 
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	width: calc(100% + 256px);
+	max-width: 100%;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+@media only screen and (min-width: 560px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 560px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 640px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
 .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
 	/* Letting the box-model do all the work here. */
 }

+ 69 - 41
varia/style.css

@@ -129,14 +129,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  */
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-/**
- * Align right widths
- */
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
+ * - Sets .alignwide widths
  */
 /**
  * Crop Text Boundry
@@ -1934,32 +1927,25 @@ table th,
 	margin-bottom: 32px;
 }
 
-.entry-content > .alignwide {
-	clear: both;
-}
-
-.entry-content > .alignwide [class*="inner-container"] > .alignwide,
-.entry-content > .alignwide [class*="inner-container"] > .alignfull {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 100%;
-	width: 100%;
-}
-
-.entry-content > .alignfull [class*="inner-container"] > .alignwide {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: calc( 100% - 64px);
-	width: calc( 100% - 64px);
+/**
+ * .aligndefault
+ */
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
 }
 
-.entry-content > .alignfull {
+/**
+ * .alignwide
+ */
+.alignwide {
 	clear: both;
 }
 
-.entry-content [class*="inner-container"] > .alignfull {
-	max-width: 100%;
-	width: 100%;
+/**
+ * .alignfull
+ */
+.alignfull {
+	clear: both;
 }
 
 .has-left-content {
@@ -3103,8 +3089,8 @@ img#wpstats {
 .responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
@@ -3114,8 +3100,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
@@ -3124,8 +3110,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
@@ -3134,8 +3120,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3144,8 +3130,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3154,8 +3140,8 @@ img#wpstats {
 	.responsive-max-width, .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 > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3202,6 +3188,48 @@ img#wpstats {
 	}
 }
 
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	width: calc(100% + 256px);
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@media only screen and (min-width: 560px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 560px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 640px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+		width: calc(calc( 782px - 32px) + 256px);
+		max-width: 100%;
+	}
+}
+
 .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
 	/* Letting the box-model do all the work here. */
 }