浏览代码

Varia: Make alignwide blocks work like normal blocks up to the desktop breakpoint

Allan Cole 5 年之前
父节点
当前提交
00a9b16e16
共有 4 个文件被更改,包括 13 次插入24 次删除
  1. 5 4
      varia/sass/abstracts/_responsive-logic.scss
  2. 0 4
      varia/sass/blocks/utilities/_style.scss
  3. 4 6
      varia/style-rtl.css
  4. 4 10
      varia/style.css

+ 5 - 4
varia/sass/abstracts/_responsive-logic.scss

@@ -40,19 +40,20 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 
 %responsive-alignwide {
 
-	width: 100%;
-    max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
+	max-width: $content-width-flex;
 
 	@include media(mobile) {
-		@include alignwide-width( $content-width-sm );
+		max-width: $content-width-sm;
 	}
 
 	@include media(tablet) {
-		@include alignwide-width( $content-width-md );
+		max-width: $content-width-md;
 	}
 
+	/* Matches normal width until laptop breakpoint */
+
 	@include media(laptop) {
 		@include alignwide-width( $content-width-lg );
 	}

+ 0 - 4
varia/sass/blocks/utilities/_style.scss

@@ -57,10 +57,6 @@
 	@extend %responsive-aligndefault;
 }
 
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
-}
-
 /**
  * .alignwide
  */

+ 4 - 6
varia/style-rtl.css

@@ -3167,23 +3167,21 @@ img#wpstats {
 }
 
 .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-	width: 100%;
-	max-width: 100%;
 	margin-right: auto;
 	margin-left: auto;
+	max-width: 100%;
+	/* Matches normal width until laptop breakpoint */
 }
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		width: calc(calc( 560px - 32px) + 256px);
-		max-width: calc(100% - 32px);
+		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		width: calc(calc( 640px - 32px) + 256px);
-		max-width: calc(100% - 32px);
+		max-width: calc( 640px - 32px);
 	}
 }
 

+ 4 - 10
varia/style.css

@@ -1986,10 +1986,6 @@ table th,
 /**
  * .aligndefault
  */
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
-}
-
 /**
  * .alignwide
  */
@@ -3172,23 +3168,21 @@ img#wpstats {
 }
 
 .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-	width: 100%;
-	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
+	max-width: 100%;
+	/* Matches normal width until laptop breakpoint */
 }
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		width: calc(calc( 560px - 32px) + 256px);
-		max-width: calc(100% - 32px);
+		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-		width: calc(calc( 640px - 32px) + 256px);
-		max-width: calc(100% - 32px);
+		max-width: calc( 640px - 32px);
 	}
 }