Merge pull request #829 from Automattic/805-calm_business_content_width_fix

Closes #805 - structural fixes for responsive grid.

calm-business/sass/blocks/_blocks.scss

@@ -2,14 +2,18 @@
 
 .entry .entry-content > *,
 .entry .entry-summary > * {
-	margin: $size__vertical-spacing-unit auto;
+	margin: $size__vertical-spacing-unit 0;
 	max-width: 100%;
 
 	@include postContentMaxWidth();
 
 	@include media(tablet) {
 		margin: $size__vertical-spacing-unit auto;
-		max-width: calc(6*(100vw/12) - 28px);
+		max-width: $size__site-tablet-content;
+	}
+
+	@include media(desktop) {
+		max-width: $size__site-desktop-content;
 	}
 
 	> *:first-child {

calm-business/sass/navigation/_next-previous.scss

@@ -3,15 +3,15 @@
 // Singular navigation
 .post-navigation {
 
-	margin: calc(3 * 1rem) 0;
+	margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
 
 	@include media(tablet) {
-		margin: calc(3 * #{$size__spacing-unit}) auto;
+		margin: calc(3 * 1rem) auto calc(1rem / 2);
 		max-width: $size__site-tablet-content;
 	}
 
 	@include media(desktop) {
-		max-width: calc(6*(100vw/12) - 28px);
+		max-width: $size__site-desktop-content;
 	}
 
 	.nav-links {

calm-business/sass/site/footer/_site-footer.scss

@@ -29,7 +29,12 @@
 
 	.site-info {
 		color: $color__text-main;
-		max-width: calc(6*(100vw/12) - 28px);
+		@include media(tablet) {
+			max-width: $size__site-tablet-content;
+		}
+		@include media(desktop) {
+			max-width: $size__site-desktop-content;
+		}
     	margin: 32px auto;
 		a {
 			color: inherit;

calm-business/sass/site/primary/_archives.scss

@@ -6,7 +6,11 @@
 
 	@include media(tablet) {
 		margin: 32px auto;
-		max-width: calc(6*(100vw/12) - 28px);
+		max-width: $size__site-tablet-content;
+	}
+
+	@include media(desktop) {
+		max-width: $size__site-desktop-content;
 	}
 
 	.page-title {
@@ -45,7 +49,11 @@
 
 	@include media(tablet) {
 		margin: calc(3 * 1rem) auto calc(1rem / 2);
-		max-width: calc(6 * (100vw / 12) - 28px);
+		max-width: $size__site-tablet-content;
+	}
+
+	@include media(desktop) {
+		max-width: $size__site-desktop-content;
 	}
 }
 
@@ -61,7 +69,11 @@
 
 		@include media(tablet) {
 			margin: 32px auto;
-			max-width: calc(6*(100vw/12) - 28px);
+			max-width: $size__site-tablet-content;
+		}
+
+		@include media(desktop) {
+			max-width: $size__site-desktop-content;
 		}
 	}
 

calm-business/sass/site/primary/_comments.scss

@@ -87,7 +87,11 @@
 	
 	@include media(tablet) {
 		margin: 32px auto;
-		max-width: calc(6*(100vw/12) - 28px);
+		max-width: $size__site-tablet-content;
+	}
+
+	@include media(desktop) {
+		max-width: $size__site-desktop-content;
 	}
 
 	> .comments-title:last-child {

calm-business/sass/site/primary/_posts-and-pages.scss

@@ -37,7 +37,11 @@
 
 		@include media(tablet) {
 			margin: calc(3 * 1rem) auto calc(1rem / 2);
-    		max-width: calc(6 * (100vw / 12) - 28px);
+    		max-width: $size__site-tablet-content;
+		}
+
+		@include media(desktop) {
+			max-width: $size__site-desktop-content;
 		}
 	}
 
@@ -45,7 +49,11 @@
 		font-size: $font__size-lg;
 		@include media(tablet) {
 			margin: 32px auto;
-			max-width: calc(6*(100vw/12) - 28px);
+			max-width: $size__site-tablet-content;
+		}
+
+		@include media(desktop) {
+			max-width: $size__site-desktop-content;
 		}
 
 		margin: 0;
@@ -109,6 +117,10 @@
 
 		@include media(tablet) {
 			margin: 32px auto;
+			max-width: $size__site-tablet-content;
+		}
+
+		@include media(desktop) {
 			max-width: $size__site-desktop-content;
 		}
 	}
@@ -282,6 +294,10 @@
 
 	@include media(tablet) {
 		margin: 32px auto;
+		max-width: $size__site-tablet-content;
+	}
+
+	@include media(desktop) {
 		max-width: $size__site-desktop-content;
 	}
 

calm-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.com
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your stylish rooms and quality products! With its bold typography and peaceful color scheme, Calm Business exudes a calm, inviting atmosphere as a bed and breakfast, time share, or brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.2
+Version: 1.3
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business
@@ -1646,19 +1646,19 @@ body.page .main-navigation {
 --------------------------------------------------------------*/
 /* Next/Previous navigation */
 .post-navigation {
-  margin: calc(3 * 1rem) 0;
+  margin: calc(3 * 1rem) 1rem 1rem;
 }
 
 @media only screen and (min-width: 768px) {
   .post-navigation {
-    margin: calc(3 * 1rem) auto;
+    margin: calc(3 * 1rem) auto calc(1rem / 2);
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
   .post-navigation {
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -2410,6 +2410,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-header {
     margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-header {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -2422,7 +2428,13 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-title {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-title {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -2489,6 +2501,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-footer {
     margin: 32px auto;
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -2695,6 +2713,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .author-bio {
     margin: 32px auto;
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .author-bio {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -2852,7 +2876,13 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   #comments {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  #comments {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -3171,7 +3201,15 @@ body.page .main-navigation {
   .search .page-header,
   .error404 .page-header {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .archive .page-header,
+  .search .page-header,
+  .error404 .page-header {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -3221,6 +3259,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .hfeed .entry .entry-header {
     margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .hfeed .entry .entry-header {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -3239,7 +3283,16 @@ body.page .main-navigation {
   .no-results.not-found .page-title,
   .no-results.not-found .page-content {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .error-404.not-found .page-title,
+  .error-404.not-found .page-content,
+  .no-results.not-found .page-title,
+  .no-results.not-found .page-content {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -3295,10 +3348,21 @@ body.page .main-navigation {
 
 #colophon .site-info {
   color: #242424;
-  max-width: calc(6*(100vw/12) - 28px);
   margin: 32px auto;
 }
 
+@media only screen and (min-width: 768px) {
+  #colophon .site-info {
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  #colophon .site-info {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
 #colophon .site-info a {
   color: inherit;
 }
@@ -3426,7 +3490,7 @@ body.page .main-navigation {
 /* !Block styles */
 .entry .entry-content > *,
 .entry .entry-summary > * {
-  margin: 32px auto;
+  margin: 32px 0;
   max-width: 100%;
 }
 
@@ -3448,7 +3512,14 @@ body.page .main-navigation {
   .entry .entry-content > *,
   .entry .entry-summary > * {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content > *,
+  .entry .entry-summary > * {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 

calm-business/style.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.com
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your stylish rooms and quality products! With its bold typography and peaceful color scheme, Calm Business exudes a calm, inviting atmosphere as a bed and breakfast, time share, or brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.2
+Version: 1.3
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business
@@ -1646,19 +1646,19 @@ body.page .main-navigation {
 --------------------------------------------------------------*/
 /* Next/Previous navigation */
 .post-navigation {
-  margin: calc(3 * 1rem) 0;
+  margin: calc(3 * 1rem) 1rem 1rem;
 }
 
 @media only screen and (min-width: 768px) {
   .post-navigation {
-    margin: calc(3 * 1rem) auto;
+    margin: calc(3 * 1rem) auto calc(1rem / 2);
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
   .post-navigation {
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -2416,6 +2416,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-header {
     margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-header {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -2428,7 +2434,13 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-title {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-title {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -2495,6 +2507,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .entry .entry-footer {
     margin: 32px auto;
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -2701,6 +2719,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .author-bio {
     margin: 32px auto;
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .author-bio {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -2858,7 +2882,13 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   #comments {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  #comments {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -3177,7 +3207,15 @@ body.page .main-navigation {
   .search .page-header,
   .error404 .page-header {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .archive .page-header,
+  .search .page-header,
+  .error404 .page-header {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -3227,6 +3265,12 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .hfeed .entry .entry-header {
     margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .hfeed .entry .entry-header {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
@@ -3245,7 +3289,16 @@ body.page .main-navigation {
   .no-results.not-found .page-title,
   .no-results.not-found .page-content {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .error-404.not-found .page-title,
+  .error-404.not-found .page-content,
+  .no-results.not-found .page-title,
+  .no-results.not-found .page-content {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
@@ -3301,10 +3354,21 @@ body.page .main-navigation {
 
 #colophon .site-info {
   color: #242424;
-  max-width: calc(6*(100vw/12) - 28px);
   margin: 32px auto;
 }
 
+@media only screen and (min-width: 768px) {
+  #colophon .site-info {
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  #colophon .site-info {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
 #colophon .site-info a {
   color: inherit;
 }
@@ -3432,7 +3496,7 @@ body.page .main-navigation {
 /* !Block styles */
 .entry .entry-content > *,
 .entry .entry-summary > * {
-  margin: 32px auto;
+  margin: 32px 0;
   max-width: 100%;
 }
 
@@ -3454,7 +3518,14 @@ body.page .main-navigation {
   .entry .entry-content > *,
   .entry .entry-summary > * {
     margin: 32px auto;
-    max-width: calc(6*(100vw/12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content > *,
+  .entry .entry-summary > * {
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 

calm-business/style.scss

@@ -6,7 +6,7 @@ Author URI: https://wordpress.com
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your stylish rooms and quality products! With its bold typography and peaceful color scheme, Calm Business exudes a calm, inviting atmosphere as a bed and breakfast, time share, or brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.2
+Version: 1.3
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business