Morden: Fixing responsive colors and styles

morden/sass/_extra-child-theme.scss

@@ -21,15 +21,21 @@ a {
 
 #page {
 	background: #{map-deep-get($config-global, "color", "background", "default")};
-	box-shadow: 0 0 30px rgba(#000, 0.2);
 	margin-left: auto;
 	margin-right: auto;
 
 	@extend %responsive-alignwide;
+
+	@include media(mobile) {
+		box-shadow: 0 0 30px rgba(#000, 0.2);
+	}
 }
 
 body {
-	background: #{map-deep-get($config-global, "color", "background", "light")};
+	background: #{map-deep-get($config-global, "color", "background", "white")};
+	@include media(mobile) {
+		background: #{map-deep-get($config-global, "color", "background", "light")};
+	}
 }
 
 /**

morden/style-rtl.css

@@ -3381,13 +3381,20 @@ p:not(.site-title) a:hover {
 
 #page {
 	background: white;
-	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
 	margin-right: auto;
 	margin-left: auto;
 }
 
-body {
-	background: #F8F8F8;
+@media only screen and (min-width: 560px) {
+	#page {
+		box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+	}
+}
+
+@media only screen and (min-width: 560px) {
+	body {
+		background: #F8F8F8;
+	}
 }
 
 /**
@@ -3562,6 +3569,11 @@ body {
 /**
  * Main
  */
+.site-main {
+	padding-right: 0;
+	padding-left: 0;
+}
+
 @media only screen and (min-width: 560px) {
 	#main {
 		padding-top: 64px;

morden/style.css

@@ -3397,13 +3397,20 @@ p:not(.site-title) a:hover {
 
 #page {
 	background: white;
-	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
 	margin-left: auto;
 	margin-right: auto;
 }
 
-body {
-	background: #F8F8F8;
+@media only screen and (min-width: 560px) {
+	#page {
+		box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+	}
+}
+
+@media only screen and (min-width: 560px) {
+	body {
+		background: #F8F8F8;
+	}
 }
 
 /**