Morden: Revising layour to work with the improved responsive logic

morden/sass/_extra-child-theme.scss

@@ -42,6 +42,19 @@ a {
 	}
 }
 
+.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,
+hr.wp-block-separator.is-style-wide,
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	width: calc(100% - #{2 * map-deep-get($config-global, "spacing", "unit")});
+}
+
 body {
 	background: #{map-deep-get($config-global, "color", "background", "white")};
 	@include media(mobile) {
@@ -52,13 +65,19 @@ body {
 /**
  * Wide Header & Footer
  */
-#masthead,
-#colophon {
+#masthead {
 	margin-left: auto;
 	margin-right: auto;
+	padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
+	padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
 	position: relative;
 }
 
+#colophon {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 /**
  * Mobile-Menu
  */
@@ -128,16 +147,6 @@ body {
 
 			& > div > ul {
 				justify-content: flex-end;
-				margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
-				margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
-
-				& > li {
-					padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
-
-					& > a {
-						padding: 0;
-					}
-				}
 
 				& > .menu-item-has-children > a::after {
 						font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
@@ -216,16 +225,6 @@ body {
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type {
-	margin-left: inherit;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type {
-	margin-right: inherit;
-}
-
 // Site Title
 .site-description {
 	color: #{map-deep-get($config-header, "branding", "color", "text")};
@@ -255,9 +254,6 @@ body {
  */
 // Footer Menu
 .footer-navigation .footer-menu {
-	margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
-	margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
-
 	a {
 		font-size: #{map-deep-get($config-global, "font", "size", "xs")};
 		line-height: #{map-deep-get($config-global, "font", "line-height", "xs")};
@@ -289,15 +285,6 @@ body {
 	}
 }
 
-// alignwide spaceing
-.entry-content > .alignwide {
-	@include media(mobile) {
-		width: 100%;
-		padding-left: #{2 * map-deep-get($config-global, "spacing", "unit")};
-		padding-right: #{2 * map-deep-get($config-global, "spacing", "unit")};
-	}
-}
-
 // Table block
 table,
 .wp-block-table {
@@ -325,8 +312,6 @@ table,
 		padding-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 		padding-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 	}
-
-	@extend %responsive-alignfull;
 }
 
 // Entry Meta
@@ -337,7 +322,6 @@ table,
 }
 
 // Sticky
-
 .sticky-post,
 .a8c-posts-list .a8c-posts-list-item__featured span {
 	background: #{map-deep-get($config-global, "color", "background", "light")};

morden/style-rtl.css

@@ -1967,6 +1967,7 @@ table th,
 	text-align: left;
 	float: left;
 	margin-top: 0;
+	margin-right: 16px;
 	margin-bottom: 32px;
 }
 
@@ -1978,9 +1979,9 @@ table th,
 
 .alignright {
 	float: right;
-	margin-left: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
+	margin-left: 16px;
 }
 
 /**
@@ -2415,12 +2416,12 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type {
-	margin-right: -16px;
+.main-navigation > div > ul > li:first-of-type > a {
+	padding-right: 0;
 }
 
-.main-navigation > div > ul > li:last-of-type {
-	margin-left: -16px;
+.main-navigation > div > ul > li:last-of-type > a {
+	padding-left: 0;
 }
 
 .main-navigation > div > ul > li > a {
@@ -2528,12 +2529,12 @@ table th,
 	margin: 0;
 }
 
-.social-navigation > div > ul > li:first-of-type {
-	margin-right: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:first-of-type > a {
+	padding-right: 0;
 }
 
-.social-navigation > div > ul > li:last-of-type {
-	margin-left: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:last-of-type > a {
+	padding-left: 0;
 }
 
 .social-navigation a {
@@ -2631,12 +2632,12 @@ table th,
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type {
-	margin-right: -16px;
+.footer-navigation .footer-menu > li:first-of-type > a {
+	padding-right: 0;
 }
 
 .footer-navigation .footer-menu > li:last-of-type {
-	margin-left: -16px;
+	padding-left: 0;
 }
 
 .footer-navigation .footer-menu a {
@@ -3196,7 +3197,7 @@ img#wpstats {
 
 .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 	width: calc(100% + 256px);
-	max-width: calc(100vw - 32px);
+	max-width: calc(100% - 32px);
 	margin-right: auto;
 	margin-left: auto;
 }
@@ -3204,35 +3205,35 @@ img#wpstats {
 @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(100vw - 32px);
+		max-width: calc(100% - 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(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
@@ -3278,8 +3279,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
-.page-title {
+.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. */
 }
 
@@ -3417,6 +3417,19 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.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,
+hr.wp-block-separator.is-style-wide,
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	width: calc(100% - 32px);
+}
+
 @media only screen and (min-width: 560px) {
 	body {
 		background: #F8F8F8;
@@ -3426,13 +3439,19 @@ p:not(.site-title) a:hover {
 /**
  * Wide Header & Footer
  */
-#masthead,
-#colophon {
+#masthead {
 	margin-right: auto;
 	margin-left: auto;
+	padding-right: 16px;
+	padding-left: 16px;
 	position: relative;
 }
 
+#colophon {
+	padding-right: 0;
+	padding-left: 0;
+}
+
 /**
  * Mobile-Menu
  */
@@ -3493,14 +3512,6 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
-		margin-right: -8px;
-		margin-left: -8px;
-	}
-	.site-header .main-navigation > div > ul > li {
-		padding: 8px;
-	}
-	.site-header .main-navigation > div > ul > li > a {
-		padding: 0;
 	}
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
@@ -3574,16 +3585,6 @@ p:not(.site-title) a:hover {
 	position: relative;
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type {
-	margin-right: inherit;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type {
-	margin-left: inherit;
-}
-
 .site-description {
 	color: white;
 }
@@ -3609,11 +3610,6 @@ p:not(.site-title) a:hover {
 /**
  * Footer
  */
-.footer-navigation .footer-menu {
-	margin-right: -8px;
-	margin-left: -8px;
-}
-
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
@@ -3645,14 +3641,6 @@ p:not(.site-title) a:hover {
 	margin-bottom: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.entry-content > .alignwide {
-		width: 100%;
-		padding-right: 32px;
-		padding-left: 32px;
-	}
-}
-
 table td,
 table th,
 .wp-block-table td,

morden/style.css

@@ -1969,6 +1969,8 @@ table th,
 	/*rtl:ignore*/
 	float: left;
 	margin-top: 0;
+	/*rtl:ignore*/
+	margin-right: 16px;
 	margin-bottom: 32px;
 }
 
@@ -1982,9 +1984,10 @@ table th,
 	/*rtl:ignore*/
 	float: right;
 	/*rtl:ignore*/
-	margin-left: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
+	/*rtl:ignore*/
+	margin-left: 16px;
 }
 
 /**
@@ -2419,12 +2422,12 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type {
-	margin-left: -16px;
+.main-navigation > div > ul > li:first-of-type > a {
+	padding-left: 0;
 }
 
-.main-navigation > div > ul > li:last-of-type {
-	margin-right: -16px;
+.main-navigation > div > ul > li:last-of-type > a {
+	padding-right: 0;
 }
 
 .main-navigation > div > ul > li > a {
@@ -2532,12 +2535,12 @@ table th,
 	margin: 0;
 }
 
-.social-navigation > div > ul > li:first-of-type {
-	margin-left: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:first-of-type > a {
+	padding-left: 0;
 }
 
-.social-navigation > div > ul > li:last-of-type {
-	margin-right: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:last-of-type > a {
+	padding-right: 0;
 }
 
 .social-navigation a {
@@ -2635,12 +2638,12 @@ table th,
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type {
-	margin-left: -16px;
+.footer-navigation .footer-menu > li:first-of-type > a {
+	padding-left: 0;
 }
 
 .footer-navigation .footer-menu > li:last-of-type {
-	margin-right: -16px;
+	padding-right: 0;
 }
 
 .footer-navigation .footer-menu a {
@@ -3200,7 +3203,7 @@ img#wpstats {
 
 .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 	width: calc(100% + 256px);
-	max-width: calc(100vw - 32px);
+	max-width: calc(100% - 32px);
 	margin-left: auto;
 	margin-right: auto;
 }
@@ -3208,35 +3211,35 @@ img#wpstats {
 @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(100vw - 32px);
+		max-width: calc(100% - 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(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
@@ -3282,8 +3285,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
-.page-title {
+.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. */
 }
 
@@ -3433,6 +3435,19 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.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,
+hr.wp-block-separator.is-style-wide,
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	width: calc(100% - 32px);
+}
+
 @media only screen and (min-width: 560px) {
 	body {
 		background: #F8F8F8;
@@ -3442,13 +3457,19 @@ p:not(.site-title) a:hover {
 /**
  * Wide Header & Footer
  */
-#masthead,
-#colophon {
+#masthead {
 	margin-left: auto;
 	margin-right: auto;
+	padding-left: 16px;
+	padding-right: 16px;
 	position: relative;
 }
 
+#colophon {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 /**
  * Mobile-Menu
  */
@@ -3509,14 +3530,6 @@ p:not(.site-title) a:hover {
 	}
 	.site-header .main-navigation > div > ul {
 		justify-content: flex-end;
-		margin-left: -8px;
-		margin-right: -8px;
-	}
-	.site-header .main-navigation > div > ul > li {
-		padding: 8px;
-	}
-	.site-header .main-navigation > div > ul > li > a {
-		padding: 0;
 	}
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
@@ -3590,16 +3603,6 @@ p:not(.site-title) a:hover {
 	position: relative;
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type {
-	margin-left: inherit;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type {
-	margin-right: inherit;
-}
-
 .site-description {
 	color: white;
 }
@@ -3625,11 +3628,6 @@ p:not(.site-title) a:hover {
 /**
  * Footer
  */
-.footer-navigation .footer-menu {
-	margin-left: -8px;
-	margin-right: -8px;
-}
-
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
@@ -3661,14 +3659,6 @@ p:not(.site-title) a:hover {
 	margin-bottom: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.entry-content > .alignwide {
-		width: 100%;
-		padding-left: 32px;
-		padding-right: 32px;
-	}
-}
-
 table td,
 table th,
 .wp-block-table td,