Bladeren bron

Varia: Fix inner_container width in cover block

Allan Cole 5 jaren geleden
bovenliggende
commit
a42d99b45e

+ 3 - 17
varia/sass/blocks/group/_style.scss

@@ -19,24 +19,10 @@
 	}
 
 	&.has-background {
-		padding: #{map-deep-get($config-global, "spacing", "horizontal")};
+		padding: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 
-		&.alignwide > .wp-block-group__inner-container > .alignwide:first-of-type,
-		&.alignwide > .wp-block-group__inner-container > .alignfull:first-of-type {
-			margin-top: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
-		}
-
-		&.alignwide > .wp-block-group__inner-container > .alignwide:last-of-type,
-		&.alignwide > .wp-block-group__inner-container > .alignfull:last-of-type {
-			margin-bottom: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
-		}
-
-		&.alignfull > .wp-block-group__inner-container > .alignfull:first-of-type {
-			margin-top: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
-		}
-
-		&.alignfull > .wp-block-group__inner-container > .alignfull:last-of-type {
-			margin-bottom: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
+		@include media(mobile) {
+			padding: #{map-deep-get($config-global, "spacing", "vertical")};
 		}
 	}
 }

+ 3 - 2
varia/sass/blocks/utilities/_style.scss

@@ -33,8 +33,9 @@
 	@extend %responsive-aligndefault;
 }
 
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
+.entry-content [class^="wp-block"] [class*="inner-container"] {
+	@extend %responsive-aligndefault;
+	width: 100%;
 }
 
 /**

+ 1 - 0
varia/sass/layout/_structure.scss

@@ -86,6 +86,7 @@
 .site-footer > *,
 .site-main > article > *, // apply vertical margins to article level
 .entry-content > *,
+[class*="inner-container"] > *,
 .widget-area > * {
 
 	margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

+ 17 - 25
varia/style-rtl.css

@@ -769,6 +769,7 @@ footer {
 .site-footer > *,
 .site-main > article > *,
 .entry-content > *,
+[class*="inner-container"] > *,
 .widget-area > * {
 	margin-top: 21.312px;
 	margin-bottom: 21.312px;
@@ -778,6 +779,7 @@ footer {
 	.site-footer > *,
 	.site-main > article > *,
 	.entry-content > *,
+	[class*="inner-container"] > *,
 	.widget-area > * {
 		margin-top: 32px;
 		margin-bottom: 32px;
@@ -787,6 +789,7 @@ footer {
 .site-footer > *:first-child,
 .site-main > article > *:first-child,
 .entry-content > *:first-child,
+[class*="inner-container"] > *:first-child,
 .widget-area > *:first-child {
 	margin-top: 0;
 }
@@ -794,6 +797,7 @@ footer {
 .site-footer > *:last-child,
 .site-main > article > *:last-child,
 .entry-content > *:last-child,
+[class*="inner-container"] > *:last-child,
 .widget-area > *:last-child {
 	margin-bottom: 0;
 }
@@ -1326,25 +1330,13 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-group.has-background {
-	padding: 16px;
-}
-
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:first-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
+	padding: 21.312px;
 }
 
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:last-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
+@media only screen and (min-width: 560px) {
+	.wp-block-group.has-background {
+		padding: 32px;
+	}
 }
 
 h1, .h1,
@@ -1926,8 +1918,8 @@ table th,
 /**
  * .aligndefault
  */
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
+.entry-content [class^="wp-block"] [class*="inner-container"] {
+	width: 100%;
 }
 
 /**
@@ -3086,7 +3078,7 @@ img#wpstats {
 .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),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
 	margin-right: auto;
 	margin-left: auto;
@@ -3097,7 +3089,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
@@ -3107,7 +3099,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
@@ -3117,7 +3109,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3127,7 +3119,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3137,7 +3129,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }

+ 17 - 25
varia/style.css

@@ -769,6 +769,7 @@ footer {
 .site-footer > *,
 .site-main > article > *,
 .entry-content > *,
+[class*="inner-container"] > *,
 .widget-area > * {
 	margin-top: 21.312px;
 	margin-bottom: 21.312px;
@@ -778,6 +779,7 @@ footer {
 	.site-footer > *,
 	.site-main > article > *,
 	.entry-content > *,
+	[class*="inner-container"] > *,
 	.widget-area > * {
 		margin-top: 32px;
 		margin-bottom: 32px;
@@ -787,6 +789,7 @@ footer {
 .site-footer > *:first-child,
 .site-main > article > *:first-child,
 .entry-content > *:first-child,
+[class*="inner-container"] > *:first-child,
 .widget-area > *:first-child {
 	margin-top: 0;
 }
@@ -794,6 +797,7 @@ footer {
 .site-footer > *:last-child,
 .site-main > article > *:last-child,
 .entry-content > *:last-child,
+[class*="inner-container"] > *:last-child,
 .widget-area > *:last-child {
 	margin-bottom: 0;
 }
@@ -1326,25 +1330,13 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-group.has-background {
-	padding: 16px;
-}
-
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:first-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
+	padding: 21.312px;
 }
 
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignwide:last-of-type,
-.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:first-of-type {
-	margin-top: -16px;
-}
-
-.wp-block-group.has-background.alignfull > .wp-block-group__inner-container > .alignfull:last-of-type {
-	margin-bottom: -16px;
+@media only screen and (min-width: 560px) {
+	.wp-block-group.has-background {
+		padding: 32px;
+	}
 }
 
 h1, .h1,
@@ -1930,8 +1922,8 @@ table th,
 /**
  * .aligndefault
  */
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
+.entry-content [class^="wp-block"] [class*="inner-container"] {
+	width: 100%;
 }
 
 /**
@@ -3090,7 +3082,7 @@ img#wpstats {
 .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),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
@@ -3101,7 +3093,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
@@ -3111,7 +3103,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
@@ -3121,7 +3113,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3131,7 +3123,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3141,7 +3133,7 @@ img#wpstats {
 	.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),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }