Browse Source

Sophisticated Business 1.2 - fixes entry meta structure.
Closes #806

Jeffrey Pearce 6 years ago
parent
commit
8fb1001f9b

+ 9 - 29
sophisticated-business/sass/navigation/_next-previous.scss

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

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

@@ -36,9 +36,13 @@
 		text-align: center;
 		text-align: center;
 
 
 		@include media(tablet) {
 		@include media(tablet) {
-			max-width: $size__site-desktop-content;
+			max-width: $size__site-tablet-content;
 			margin: calc(3 * #{ $size__spacing-unit}) auto auto;
 			margin: calc(3 * #{ $size__spacing-unit}) auto auto;
 		}
 		}
+
+		@include media(desktop) {
+			max-width: $size__site-desktop-content;
+		}
 	}
 	}
 
 
 	.entry-title {
 	.entry-title {
@@ -103,7 +107,7 @@
 			max-width: $size__site-tablet-content;
 			max-width: $size__site-tablet-content;
 		}
 		}
 
 
-		@include media(tablet) {
+		@include media(desktop) {
 			max-width: $size__site-desktop-content;
 			max-width: $size__site-desktop-content;
 		}
 		}
 	}
 	}

+ 11 - 6
sophisticated-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://automattic.com/
 Template: twentynineteen
 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.
 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
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License: GNU General Public License v2 or later
 License URI: LICENSE
 License URI: LICENSE
 Text Domain: sophisticated-business
 Text Domain: sophisticated-business
@@ -1623,14 +1623,13 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
 @media only screen and (min-width: 768px) {
   .post-navigation {
   .post-navigation {
     margin: calc(3 * 1rem) auto;
     margin: calc(3 * 1rem) auto;
-    max-width: calc(6 * (100vw / 12));
+    max-width: calc(8 * (100vw / 12) - 28px);
   }
   }
 }
 }
 
 
 @media only screen and (min-width: 1168px) {
 @media only screen and (min-width: 1168px) {
   .post-navigation {
   .post-navigation {
-    margin: calc(3 * 1rem) 0;
-    max-width: 100%;
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
   }
 }
 }
 
 
@@ -2339,11 +2338,17 @@ body.page .main-navigation {
 
 
 @media only screen and (min-width: 768px) {
 @media only screen and (min-width: 768px) {
   .entry .entry-header {
   .entry .entry-header {
-    max-width: calc(6 * (100vw / 12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
     margin: calc(3 * 1rem) auto auto;
     margin: calc(3 * 1rem) auto auto;
   }
   }
 }
 }
 
 
+@media only screen and (min-width: 1168px) {
+  .entry .entry-header {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
 .entry .entry-title {
 .entry .entry-title {
   margin: 0;
   margin: 0;
 }
 }
@@ -2409,7 +2414,7 @@ body.page .main-navigation {
   }
   }
 }
 }
 
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1168px) {
   .entry .entry-footer {
   .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
     max-width: calc(6 * (100vw / 12) - 28px);
   }
   }

+ 17 - 37
sophisticated-business/style.css

@@ -7,7 +7,7 @@ Author URI: https://automattic.com/
 Template: twentynineteen
 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.
 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
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License: GNU General Public License v2 or later
 License URI: LICENSE
 License URI: LICENSE
 Text Domain: sophisticated-business
 Text Domain: sophisticated-business
@@ -1617,46 +1617,36 @@ body.page .main-navigation {
 --------------------------------------------------------------*/
 --------------------------------------------------------------*/
 /* Next/Previous navigation */
 /* Next/Previous navigation */
 .post-navigation {
 .post-navigation {
-  margin: calc(3 * 1rem) 0;
+  margin: calc(3 * 1rem) 1rem 1rem;
 }
 }
 
 
 @media only screen and (min-width: 768px) {
 @media only screen and (min-width: 768px) {
   .post-navigation {
   .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) {
 @media only screen and (min-width: 1168px) {
   .post-navigation {
   .post-navigation {
-    margin: calc(3 * 1rem) 0;
-    max-width: 100%;
+    max-width: calc(6 * (100vw / 12) - 28px);
   }
   }
 }
 }
 
 
 .post-navigation .nav-links {
 .post-navigation .nav-links {
-  margin: 0 1rem;
   max-width: 100%;
   max-width: 100%;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
 }
 }
 
 
 @media only screen and (min-width: 768px) {
 @media only screen and (min-width: 768px) {
-  .post-navigation .nav-links {
-    margin: 0;
-  }
-}
-
-@media only screen and (min-width: 1168px) {
   .post-navigation .nav-links {
   .post-navigation .nav-links {
     flex-direction: row;
     flex-direction: row;
-    margin: 0 auto;
-    max-width: calc(6 * (100vw / 12) - 28px);
   }
   }
 }
 }
 
 
 .post-navigation .nav-links a .meta-nav {
 .post-navigation .nav-links a .meta-nav {
-  color: #cccccc;
+  color: #fff;
   -webkit-user-select: none;
   -webkit-user-select: none;
      -moz-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
       -ms-user-select: none;
@@ -1667,7 +1657,7 @@ body.page .main-navigation {
   display: none;
   display: none;
   content: "—";
   content: "—";
   width: 2em;
   width: 2em;
-  color: #cccccc;
+  color: #fff;
   height: 1em;
   height: 1em;
 }
 }
 
 
@@ -1681,23 +1671,10 @@ body.page .main-navigation {
   color: #b59439;
   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 {
 .post-navigation .nav-links .nav-previous {
   order: 2;
   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 {
 .post-navigation .nav-links .nav-previous + .nav-next {
   margin-bottom: 1rem;
   margin-bottom: 1rem;
 }
 }
@@ -1706,14 +1683,11 @@ body.page .main-navigation {
   display: inline;
   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 {
   .post-navigation .nav-links .nav-next {
     order: 2;
     order: 2;
     padding-left: 1rem;
     padding-left: 1rem;
+    margin-left: auto;
   }
   }
 }
 }
 
 
@@ -2345,11 +2319,17 @@ body.page .main-navigation {
 
 
 @media only screen and (min-width: 768px) {
 @media only screen and (min-width: 768px) {
   .entry .entry-header {
   .entry .entry-header {
-    max-width: calc(6 * (100vw / 12) - 28px);
+    max-width: calc(8 * (100vw / 12) - 28px);
     margin: calc(3 * 1rem) auto auto;
     margin: calc(3 * 1rem) auto auto;
   }
   }
 }
 }
 
 
+@media only screen and (min-width: 1168px) {
+  .entry .entry-header {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
+}
+
 .entry .entry-title {
 .entry .entry-title {
   margin: 0;
   margin: 0;
 }
 }
@@ -2415,7 +2395,7 @@ body.page .main-navigation {
   }
   }
 }
 }
 
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1168px) {
   .entry .entry-footer {
   .entry .entry-footer {
     max-width: calc(6 * (100vw / 12) - 28px);
     max-width: calc(6 * (100vw / 12) - 28px);
   }
   }

+ 1 - 1
sophisticated-business/style.scss

@@ -6,7 +6,7 @@ Author URI: https://automattic.com/
 Template: twentynineteen
 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.
 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
 Requires at least: WordPress 4.9.6
-Version: 1.1
+Version: 1.2
 License: GNU General Public License v2 or later
 License: GNU General Public License v2 or later
 License URI: LICENSE
 License URI: LICENSE
 Text Domain: sophisticated-business
 Text Domain: sophisticated-business