Morden: Update responsive logic to fix alignwide issues and make outerwrapper flexible width up to 1200px, fix typo in google font url

morden/functions.php

@@ -136,7 +136,7 @@ function morden_fonts_url() {
 	if ( 'off' !== $notosans ) {
 		$font_families = array();
 
-		$font_families[] = 'Noto+Sans:400,400i,700,700i';
+		$font_families[] = 'Noto Sans:400,400i,700,700i';
 
 		$query_args = array(
 			'family' => urlencode( implode( '|', $font_families ) ),

morden/sass/_extra-child-theme.scss

@@ -24,10 +24,21 @@ a {
 	margin-left: auto;
 	margin-right: auto;
 
-	@extend %responsive-alignwide;
-
 	@include media(mobile) {
 		box-shadow: 0 0 30px rgba(#000, 0.2);
+		max-width: 95vw;
+	}
+
+	@include media(tablet) {
+		max-width: 92vw;
+	}
+
+	@include media(desktop) {
+		max-width: 87vw;
+	}
+
+	@include media(wide) {
+		max-width: 1200px;
 	}
 }
 
@@ -281,6 +292,7 @@ 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")};
 	}

morden/style-rtl.css

@@ -3194,7 +3194,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
+.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);
 	margin-right: auto;
@@ -3202,35 +3202,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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
@@ -3395,6 +3395,25 @@ p:not(.site-title) a:hover {
 @media only screen and (min-width: 560px) {
 	#page {
 		box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+		max-width: 95vw;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	#page {
+		max-width: 92vw;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	#page {
+		max-width: 87vw;
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	#page {
+		max-width: 1200px;
 	}
 }
 
@@ -3628,6 +3647,7 @@ p:not(.site-title) a:hover {
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .alignwide {
+		width: 100%;
 		padding-right: 32px;
 		padding-left: 32px;
 	}

morden/style.css

@@ -3198,7 +3198,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #page {
+.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);
 	margin-left: auto;
@@ -3206,35 +3206,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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
 }
 
 @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, #page {
+	.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);
 	}
@@ -3411,6 +3411,25 @@ p:not(.site-title) a:hover {
 @media only screen and (min-width: 560px) {
 	#page {
 		box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+		max-width: 95vw;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	#page {
+		max-width: 92vw;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	#page {
+		max-width: 87vw;
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	#page {
+		max-width: 1200px;
 	}
 }
 
@@ -3644,6 +3663,7 @@ p:not(.site-title) a:hover {
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .alignwide {
+		width: 100%;
 		padding-left: 32px;
 		padding-right: 32px;
 	}