Merge pull request #831 from Automattic/806-entry_meta_structural_fix

806 entry meta structural fix

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

@@ -3,38 +3,30 @@
 // 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 * 1rem) $size__site-margins;
-		max-width: calc(6 * (100vw / 12));
+		margin: calc(3 * 1rem) auto calc(1rem / 2);
+		max-width: $size__site-tablet-content;
 	}
 
 	@include media(desktop) {
-		margin: calc(3 * 1rem) 0;
-		max-width: 100%;
+		max-width: $size__site-desktop-content;
 	}
 
 	.nav-links {
 
-		margin: 0 $size__spacing-unit;
 		max-width: 100%;
 		display: flex;
 		flex-direction: column;
 
 		@include media(tablet) {
-			margin: 0;
-		}
-
-		@include media(desktop) {
 			flex-direction: row;
-			margin: 0 auto;
-			max-width: $size__site-desktop-content;
 		}
 
 		a {
 			.meta-nav {
-				color: $color__text-light;
+				color: $color__text-main;
 				user-select: none;
 
 				&:before,
@@ -42,7 +34,7 @@
 					display: none;
 					content: "—";
 					width: 2em;
-					color: $color__text-light;
+					color: $color__text-main;
 					height: 1em;
 				}
 			}
@@ -56,21 +48,9 @@
 			}
 		}
 
-		.nav-previous,
-		.nav-next {
-
-			@include media(desktop) {
-				min-width: calc(50% - 2 * #{$size__spacing-unit});
-			}
-		}
-
 		.nav-previous {
 			order: 2;
 
-			@include media(desktop) {
-				order: 1;
-			}
-
 			+ .nav-next {
 				margin-bottom: $size__spacing-unit;
 			}
@@ -83,11 +63,10 @@
 		}
 
 		.nav-next {
-			order: 1;
-
-			@include media(desktop) {
+			@include media(tablet) {
 				order: 2;
 				padding-left: $size__spacing-unit;
+				margin-left: auto;
 			}
 
 			.meta-nav {

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

@@ -38,6 +38,10 @@
 			margin: calc(3 * #{ $size__spacing-unit}) auto $size__spacing-unit;
 			@include postContentMaxWidth();
 		}
+
+		@include media(desktop) {
+			max-width: $size__site-desktop-content;
+		}
 	}
 
 	.entry-title {
@@ -101,7 +105,7 @@
 			max-width: $size__site-tablet-content;
 		}
 
-		@include media(tablet) {
+		@include media(desktop) {
 			max-width: $size__site-desktop-content;
 		}
 	}

professional-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.com/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, elegant typography, Professional Business conveys quality and integrity, which makes it especially good fit for accounting, law, and consultancy firms.
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: professional-business
@@ -1592,46 +1592,36 @@ 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) calc(10% + 60px);
-    max-width: calc(6 * (100vw / 12));
+    margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
   .post-navigation {
-    margin: calc(3 * 1rem) 0;
-    max-width: 100%;
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links {
-  margin: 0 1rem;
   max-width: 100%;
   display: flex;
   flex-direction: column;
 }
 
 @media only screen and (min-width: 768px) {
-  .post-navigation .nav-links {
-    margin: 0;
-  }
-}
-
-@media only screen and (min-width: 1168px) {
   .post-navigation .nav-links {
     flex-direction: row;
-    margin: 0 auto;
-    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links a .meta-nav {
-  color: #767676;
+  color: #1e1e1e;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -1642,7 +1632,7 @@ body.page .main-navigation {
   display: none;
   content: "—";
   width: 2em;
-  color: #767676;
+  color: #1e1e1e;
   height: 1em;
 }
 
@@ -1656,23 +1646,10 @@ body.page .main-navigation {
   color: #005177;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous,
-  .post-navigation .nav-links .nav-next {
-    min-width: calc(50% - 2 * 1rem);
-  }
-}
-
 .post-navigation .nav-links .nav-previous {
   order: 2;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous {
-    order: 1;
-  }
-}
-
 .post-navigation .nav-links .nav-previous + .nav-next {
   margin-bottom: 1rem;
 }
@@ -1681,14 +1658,11 @@ body.page .main-navigation {
   display: inline;
 }
 
-.post-navigation .nav-links .nav-next {
-  order: 1;
-}
-
-@media only screen and (min-width: 1168px) {
+@media only screen and (min-width: 768px) {
   .post-navigation .nav-links .nav-next {
     order: 2;
     padding-right: 1rem;
+    margin-right: auto;
   }
 }
 
@@ -2352,6 +2326,12 @@ body.page .main-navigation {
   }
 }
 
+@media only screen and (min-width: 1168px) {
+  .entry .entry-header {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
 .entry .entry-title {
   margin: 0;
 }
@@ -2416,7 +2396,7 @@ body.page .main-navigation {
   }
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1168px) {
   .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
   }

professional-business/style.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.com/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, elegant typography, Professional Business conveys quality and integrity, which makes it especially good fit for accounting, law, and consultancy firms.
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: professional-business
@@ -1592,46 +1592,36 @@ 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) calc(10% + 60px);
-    max-width: calc(6 * (100vw / 12));
+    margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
   .post-navigation {
-    margin: calc(3 * 1rem) 0;
-    max-width: 100%;
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links {
-  margin: 0 1rem;
   max-width: 100%;
   display: flex;
   flex-direction: column;
 }
 
 @media only screen and (min-width: 768px) {
-  .post-navigation .nav-links {
-    margin: 0;
-  }
-}
-
-@media only screen and (min-width: 1168px) {
   .post-navigation .nav-links {
     flex-direction: row;
-    margin: 0 auto;
-    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links a .meta-nav {
-  color: #767676;
+  color: #1e1e1e;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -1642,7 +1632,7 @@ body.page .main-navigation {
   display: none;
   content: "—";
   width: 2em;
-  color: #767676;
+  color: #1e1e1e;
   height: 1em;
 }
 
@@ -1656,23 +1646,10 @@ body.page .main-navigation {
   color: #005177;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous,
-  .post-navigation .nav-links .nav-next {
-    min-width: calc(50% - 2 * 1rem);
-  }
-}
-
 .post-navigation .nav-links .nav-previous {
   order: 2;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous {
-    order: 1;
-  }
-}
-
 .post-navigation .nav-links .nav-previous + .nav-next {
   margin-bottom: 1rem;
 }
@@ -1681,14 +1658,11 @@ body.page .main-navigation {
   display: inline;
 }
 
-.post-navigation .nav-links .nav-next {
-  order: 1;
-}
-
-@media only screen and (min-width: 1168px) {
+@media only screen and (min-width: 768px) {
   .post-navigation .nav-links .nav-next {
     order: 2;
     padding-left: 1rem;
+    margin-left: auto;
   }
 }
 
@@ -2358,6 +2332,12 @@ body.page .main-navigation {
   }
 }
 
+@media only screen and (min-width: 1168px) {
+  .entry .entry-header {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
 .entry .entry-title {
   margin: 0;
 }
@@ -2422,7 +2402,7 @@ body.page .main-navigation {
   }
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1168px) {
   .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
   }

professional-business/style.scss

@@ -6,7 +6,7 @@ Author URI: https://wordpress.com/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, elegant typography, Professional Business conveys quality and integrity, which makes it especially good fit for accounting, law, and consultancy firms.
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: professional-business

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

@@ -3,37 +3,30 @@
 // 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 * 1rem) auto;
-		max-width: calc(6 * (100vw / 12));
+		margin: calc(3 * 1rem) auto calc(1rem / 2);
+		max-width: $size__site-tablet-content;
 	}
 
 	@include media(desktop) {
-		margin: calc(3 * 1rem) 0;
-		max-width: 100%;
+		max-width: $size__site-desktop-content;
 	}
 
 	.nav-links {
-		margin: 0 $size__spacing-unit;
+
 		max-width: 100%;
 		display: flex;
 		flex-direction: column;
 
 		@include media(tablet) {
-			margin: 0;
-		}
-
-		@include media(desktop) {
 			flex-direction: row;
-			margin: 0 auto;
-			max-width: $size__site-desktop-content;
 		}
 
 		a {
 			.meta-nav {
-				color: $color__text-light;
+				color: $color__text-main;
 				user-select: none;
 
 				&:before,
@@ -41,7 +34,7 @@
 					display: none;
 					content: "—";
 					width: 2em;
-					color: $color__text-light;
+					color: $color__text-main;
 					height: 1em;
 				}
 			}
@@ -55,21 +48,9 @@
 			}
 		}
 
-		.nav-previous,
-		.nav-next {
-
-			@include media(desktop) {
-				min-width: calc(50% - 2 * #{$size__spacing-unit});
-			}
-		}
-
 		.nav-previous {
 			order: 2;
 
-			@include media(desktop) {
-				order: 1;
-			}
-
 			+ .nav-next {
 				margin-bottom: $size__spacing-unit;
 			}
@@ -82,11 +63,10 @@
 		}
 
 		.nav-next {
-			order: 1;
-
-			@include media(desktop) {
+			@include media(tablet) {
 				order: 2;
 				padding-left: $size__spacing-unit;
+				margin-left: auto;
 			}
 
 			.meta-nav {

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

@@ -41,7 +41,7 @@
 .hfeed .entry .entry-header {
 
 	@include media(tablet) {
-		margin: calc(3 * #{$size__spacing-unit}) auto;
+		margin-bottom: calc(3 * #{$size__spacing-unit});
 	}
 }
 

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

@@ -31,13 +31,12 @@
 
 	.entry-header {
 
-		margin: calc(3 * #{ $size__spacing-unit}) auto $size__spacing-unit;
+		margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
 		position: relative;
 		text-align: center;
 
 		@include media(tablet) {
-			max-width: $size__site-desktop-content;
-			margin: calc(3 * #{ $size__spacing-unit}) auto auto;
+			margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
 		}
 	}
 
@@ -103,7 +102,7 @@
 			max-width: $size__site-tablet-content;
 		}
 
-		@include media(tablet) {
+		@include media(desktop) {
 			max-width: $size__site-desktop-content;
 		}
 	}

sophisticated-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://automattic.com/
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your delicious food and special concoctions! With its bold typography and chic color scheme, Sophisticated Business exudes the same cool, intimate atmosphere as an upscale bar, lounge, or pub.
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: sophisticated-business
@@ -1617,46 +1617,36 @@ 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;
-    max-width: calc(6 * (100vw / 12));
+    margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
   .post-navigation {
-    margin: calc(3 * 1rem) 0;
-    max-width: 100%;
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links {
-  margin: 0 1rem;
   max-width: 100%;
   display: flex;
   flex-direction: column;
 }
 
 @media only screen and (min-width: 768px) {
-  .post-navigation .nav-links {
-    margin: 0;
-  }
-}
-
-@media only screen and (min-width: 1168px) {
   .post-navigation .nav-links {
     flex-direction: row;
-    margin: 0 auto;
-    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links a .meta-nav {
-  color: #cccccc;
+  color: #fff;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -1667,7 +1657,7 @@ body.page .main-navigation {
   display: none;
   content: "—";
   width: 2em;
-  color: #cccccc;
+  color: #fff;
   height: 1em;
 }
 
@@ -1681,23 +1671,10 @@ body.page .main-navigation {
   color: #b59439;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous,
-  .post-navigation .nav-links .nav-next {
-    min-width: calc(50% - 2 * 1rem);
-  }
-}
-
 .post-navigation .nav-links .nav-previous {
   order: 2;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous {
-    order: 1;
-  }
-}
-
 .post-navigation .nav-links .nav-previous + .nav-next {
   margin-bottom: 1rem;
 }
@@ -1706,14 +1683,11 @@ body.page .main-navigation {
   display: inline;
 }
 
-.post-navigation .nav-links .nav-next {
-  order: 1;
-}
-
-@media only screen and (min-width: 1168px) {
+@media only screen and (min-width: 768px) {
   .post-navigation .nav-links .nav-next {
     order: 2;
     padding-right: 1rem;
+    margin-right: auto;
   }
 }
 
@@ -2332,15 +2306,14 @@ body.page .main-navigation {
 }
 
 .entry .entry-header {
-  margin: calc(3 * 1rem) auto 1rem;
+  margin: calc(3 * 1rem) 1rem 1rem;
   position: relative;
   text-align: center;
 }
 
 @media only screen and (min-width: 768px) {
   .entry .entry-header {
-    max-width: calc(6 * (100vw / 12) - 28px);
-    margin: calc(3 * 1rem) auto auto;
+    margin: calc(3 * 1rem) calc(10% + 60px) 1rem;
   }
 }
 
@@ -2409,7 +2382,7 @@ body.page .main-navigation {
   }
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1168px) {
   .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
   }

sophisticated-business/style.css

@@ -7,7 +7,7 @@ Author URI: https://automattic.com/
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your delicious food and special concoctions! With its bold typography and chic color scheme, Sophisticated Business exudes the same cool, intimate atmosphere as an upscale bar, lounge, or pub.
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: sophisticated-business
@@ -1617,46 +1617,36 @@ 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;
-    max-width: calc(6 * (100vw / 12));
+    margin: calc(3 * 1rem) auto calc(1rem / 2);
+    max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
   .post-navigation {
-    margin: calc(3 * 1rem) 0;
-    max-width: 100%;
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links {
-  margin: 0 1rem;
   max-width: 100%;
   display: flex;
   flex-direction: column;
 }
 
 @media only screen and (min-width: 768px) {
-  .post-navigation .nav-links {
-    margin: 0;
-  }
-}
-
-@media only screen and (min-width: 1168px) {
   .post-navigation .nav-links {
     flex-direction: row;
-    margin: 0 auto;
-    max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 .post-navigation .nav-links a .meta-nav {
-  color: #cccccc;
+  color: #fff;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -1667,7 +1657,7 @@ body.page .main-navigation {
   display: none;
   content: "—";
   width: 2em;
-  color: #cccccc;
+  color: #fff;
   height: 1em;
 }
 
@@ -1681,23 +1671,10 @@ body.page .main-navigation {
   color: #b59439;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous,
-  .post-navigation .nav-links .nav-next {
-    min-width: calc(50% - 2 * 1rem);
-  }
-}
-
 .post-navigation .nav-links .nav-previous {
   order: 2;
 }
 
-@media only screen and (min-width: 1168px) {
-  .post-navigation .nav-links .nav-previous {
-    order: 1;
-  }
-}
-
 .post-navigation .nav-links .nav-previous + .nav-next {
   margin-bottom: 1rem;
 }
@@ -1706,14 +1683,11 @@ body.page .main-navigation {
   display: inline;
 }
 
-.post-navigation .nav-links .nav-next {
-  order: 1;
-}
-
-@media only screen and (min-width: 1168px) {
+@media only screen and (min-width: 768px) {
   .post-navigation .nav-links .nav-next {
     order: 2;
     padding-left: 1rem;
+    margin-left: auto;
   }
 }
 
@@ -2338,15 +2312,14 @@ body.page .main-navigation {
 }
 
 .entry .entry-header {
-  margin: calc(3 * 1rem) auto 1rem;
+  margin: calc(3 * 1rem) 1rem 1rem;
   position: relative;
   text-align: center;
 }
 
 @media only screen and (min-width: 768px) {
   .entry .entry-header {
-    max-width: calc(6 * (100vw / 12) - 28px);
-    margin: calc(3 * 1rem) auto auto;
+    margin: calc(3 * 1rem) calc(10% + 60px) 1rem;
   }
 }
 
@@ -2415,7 +2388,7 @@ body.page .main-navigation {
   }
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1168px) {
   .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
@@ -3104,7 +3077,7 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .hfeed .entry .entry-header {
-    margin: calc(3 * 1rem) auto;
+    margin-bottom: calc(3 * 1rem);
   }
 }
 

sophisticated-business/style.scss

@@ -6,7 +6,7 @@ Author URI: https://automattic.com/
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your delicious food and special concoctions! With its bold typography and chic color scheme, Sophisticated Business exudes the same cool, intimate atmosphere as an upscale bar, lounge, or pub.
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: sophisticated-business