Browse Source

Sophisticated Business: Fix Cover Block text to respect Block Editor settings

Allan Cole 6 years ago
parent
commit
150fa0a753

+ 12 - 22
sophisticated-business/sass/blocks/_blocks.scss

@@ -534,6 +534,7 @@
 	//! Cover Image
 	.wp-block-cover-image,
 	.wp-block-cover {
+
 		position: relative;
 		min-height: 430px;
 		padding: $size__spacing-unit;
@@ -543,24 +544,23 @@
 			min-height: 60vh;
 		}
 
-		.wp-block-cover-image-text,
-		.wp-block-cover-text,
-		h2 {
-			font-family: $font__heading;
-			font-size: $font__size-lg;
-			font-weight: 700;
-			line-height: 1.25;
+		.wp-block-cover__inner-container {
 			padding: 0;
 			color: #fff;
 
 			@include media(tablet) {
-				font-size: $font__size-xxl;
 				max-width: 100%;
 				margin-left: auto;
 				margin-right: auto;
 			}
 		}
 
+		h2 {
+			margin: inherit;
+			max-width: inherit;
+			text-align: inherit;
+		}
+
 		&.alignleft,
 		&.alignright {
 			width: 100%;
@@ -572,27 +572,20 @@
 
 		&.alignwide {
 
-			.wp-block-cover-image-text,
-			.wp-block-cover-text,
-			h2 {
+			.wp-block-cover__inner-container {
 				@include postContentMaxWidth();
 			}
 
 			@include media(tablet) {
-				.wp-block-cover-image-text,
-				.wp-block-cover-text,
-				h2 {
+				.wp-block-cover__inner-container {
 					padding: 0;
-					font-size: $font__size-xxxxl;
 				}
 			}
 		}
 
 		&.alignfull {
 
-			.wp-block-cover-image-text,
-			.wp-block-cover-text,
-			h2 {
+			.wp-block-cover__inner-container {
 				max-width: calc(8 * (100vw / 12));
 			}
 
@@ -600,11 +593,8 @@
 				padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 				padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 
-				.wp-block-cover-image-text,
-				.wp-block-cover-text,
-				h2 {
+				.wp-block-cover__inner-container {
 					padding: 0;
-					font-size: $font__size-xxxxl;
 				}
 			}
 		}

+ 10 - 0
sophisticated-business/sass/typography/_headings.scss

@@ -72,11 +72,21 @@ h1 {
 	}
 }
 
+
+.wp-block-cover .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover-text,
+.wp-block-cover h2,
+.wp-block-cover-image .wp-block-cover-image-text,
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image h2,
 .not-found .page-title,
 .error-404 .page-title,
 .has-larger-font-size,
 h2 {
 	font-size: $font__size-md;
+	@include media(tablet) {
+		font-size: $font__size-lg;
+	}
 }
 
 .has-regular-font-size,

+ 7 - 12
sophisticated-business/style-editor.css

@@ -119,7 +119,7 @@ h2 {
 
 @media only screen and (min-width: 768px) {
   h2 {
-    font-size: 1.125em;
+    font-size: 1.6875em;
   }
 }
 
@@ -273,24 +273,20 @@ figcaption,
   min-height: 80vh;
 }
 
-.wp-block-cover h2,
+.wp-block-cover .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover-text {
-  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-weight: 700;
-  line-height: 1.25;
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
-.wp-block-cover h2 strong,
+.wp-block-cover .wp-block-cover__inner-container strong,
 .wp-block-cover .wp-block-cover-text strong {
   font-weight: bolder;
 }
 
 @media only screen and (min-width: 768px) {
-  .wp-block-cover h2,
+  .wp-block-cover .wp-block-cover__inner-container,
   .wp-block-cover .wp-block-cover-text {
-    font-size: 2.8125em;
     margin-left: auto;
     margin-right: auto;
     padding: 0;
@@ -330,11 +326,10 @@ figcaption,
 }
 
 @media only screen and (min-width: 768px) {
-  .wp-block[data-type="core/cover"][data-align="wide"] h2,
   .wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
-  .wp-block[data-type="core/cover"][data-align="full"] h2,
-  .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
-    font-size: 4.5em;
+  .wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover__inner-container,
+  .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text,
+  .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover__inner-container {
     max-width: calc(8 * (100vw / 12));
   }
 }

+ 5 - 9
sophisticated-business/style-editor.scss

@@ -120,7 +120,7 @@ h2 {
 	font-size: $font__size-md;
 
 	@include media(tablet) {
-		font-size: $font__size-md;
+		font-size: $font__size-lg;
 	}
 }
 
@@ -261,11 +261,8 @@ figcaption,
 .wp-block-cover {
 	min-height: 80vh;
 
-	h2,
+	.wp-block-cover__inner-container,
 	.wp-block-cover-text {
-		font-family: $font__heading;
-		font-weight: 700;
-		line-height: 1.25;
 		padding-left: $size__spacing-unit;
 		padding-right: $size__spacing-unit;
 
@@ -274,7 +271,6 @@ figcaption,
 		}
 
 		@include media(tablet) {
-			font-size: $font__size-xxl;
 			margin-left: auto;
 			margin-right: auto;
 			padding: 0;
@@ -313,9 +309,9 @@ figcaption,
 .wp-block[data-type="core/cover"][data-align="wide"],
 .wp-block[data-type="core/cover"][data-align="full"] {
 	@include media(tablet) {
-		h2,
-		.wp-block-cover-text {
-			font-size: $font__size-xxxxl;
+
+		.wp-block-cover-text,
+		.wp-block-cover__inner-container {
 			max-width: calc(8 * (100vw / 12));
 		}
 	}

+ 42 - 79
sophisticated-business/style-rtl.css

@@ -499,6 +499,12 @@ h1 {
   }
 }
 
+.wp-block-cover .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover-text,
+.wp-block-cover h2,
+.wp-block-cover-image .wp-block-cover-image-text,
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image h2,
 .not-found .page-title,
 .error-404 .page-title,
 .has-larger-font-size,
@@ -506,6 +512,21 @@ h2 {
   font-size: 1.125em;
 }
 
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover-image-text,
+  .wp-block-cover .wp-block-cover-text,
+  .wp-block-cover h2,
+  .wp-block-cover-image .wp-block-cover-image-text,
+  .wp-block-cover-image .wp-block-cover-text,
+  .wp-block-cover-image h2,
+  .not-found .page-title,
+  .error-404 .page-title,
+  .has-larger-font-size,
+  h2 {
+    font-size: 1.6875em;
+  }
+}
+
 .has-regular-font-size,
 .has-large-font-size,
 .comments-title,
@@ -3843,36 +3864,6 @@ body.page .main-navigation {
   display: block;
 }
 
-@media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-image .aligncenter {
-    max-width: calc(8 * (100vw / 12) - 28px);
-  }
-}
-
-@media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-image .aligncenter {
-    max-width: calc(6 * (100vw / 12) - 28px);
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-image .aligncenter {
-    width: calc(8 * (100vw / 12) - 28px);
-  }
-  .entry .entry-content .wp-block-image .aligncenter img {
-    margin: 0 auto;
-  }
-}
-
-@media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-image .aligncenter {
-    width: calc(6 * (100vw / 12) - 28px);
-  }
-  .entry .entry-content .wp-block-image .aligncenter img {
-    margin: 0 auto;
-  }
-}
-
 .entry .entry-content .wp-block-image.alignfull img {
   width: 100vw;
   max-width: calc( 100% + (2 * 1rem));
@@ -3901,34 +3892,28 @@ body.page .main-navigation {
   }
 }
 
-.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover-image .wp-block-cover-text,
-.entry .entry-content .wp-block-cover-image h2,
-.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover .wp-block-cover-text,
-.entry .entry-content .wp-block-cover h2 {
-  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 1.6875em;
-  font-weight: 700;
-  line-height: 1.25;
+.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
+.entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
   padding: 0;
   color: #fff;
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image h2,
-  .entry .entry-content .wp-block-cover .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover h2 {
-    font-size: 2.8125em;
+  .entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
     max-width: 100%;
     margin-right: auto;
     margin-left: auto;
   }
 }
 
+.entry .entry-content .wp-block-cover-image h2,
+.entry .entry-content .wp-block-cover h2 {
+  margin: inherit;
+  max-width: inherit;
+  text-align: inherit;
+}
+
 .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright,
 .entry .entry-content .wp-block-cover.alignleft,
 .entry .entry-content .wp-block-cover.alignright {
@@ -3944,45 +3929,28 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignwide h2,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignwide h2 {
+  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignwide h2,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignwide h2 {
+  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignwide h2,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignwide h2 {
+  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
     padding: 0;
-    font-size: 4.5em;
   }
 }
 
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover-image.alignfull h2,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover.alignfull h2 {
+.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
   max-width: calc(8 * (100vw / 12));
 }
 
@@ -3992,14 +3960,9 @@ body.page .main-navigation {
     padding-right: calc(10% + 58px + (2 * 1rem));
     padding-left: calc(10% + 58px + (2 * 1rem));
   }
-  .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignfull h2,
-  .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignfull h2 {
+  .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
     padding: 0;
-    font-size: 4.5em;
   }
 }
 

+ 42 - 49
sophisticated-business/style.css

@@ -499,6 +499,12 @@ h1 {
   }
 }
 
+.wp-block-cover .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover-text,
+.wp-block-cover h2,
+.wp-block-cover-image .wp-block-cover-image-text,
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image h2,
 .not-found .page-title,
 .error-404 .page-title,
 .has-larger-font-size,
@@ -506,6 +512,21 @@ h2 {
   font-size: 1.125em;
 }
 
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover-image-text,
+  .wp-block-cover .wp-block-cover-text,
+  .wp-block-cover h2,
+  .wp-block-cover-image .wp-block-cover-image-text,
+  .wp-block-cover-image .wp-block-cover-text,
+  .wp-block-cover-image h2,
+  .not-found .page-title,
+  .error-404 .page-title,
+  .has-larger-font-size,
+  h2 {
+    font-size: 1.6875em;
+  }
+}
+
 .has-regular-font-size,
 .has-large-font-size,
 .comments-title,
@@ -3883,34 +3904,28 @@ body.page .main-navigation {
   }
 }
 
-.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover-image .wp-block-cover-text,
-.entry .entry-content .wp-block-cover-image h2,
-.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover .wp-block-cover-text,
-.entry .entry-content .wp-block-cover h2 {
-  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-size: 1.6875em;
-  font-weight: 700;
-  line-height: 1.25;
+.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
+.entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
   padding: 0;
   color: #fff;
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image h2,
-  .entry .entry-content .wp-block-cover .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover h2 {
-    font-size: 2.8125em;
+  .entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
   }
 }
 
+.entry .entry-content .wp-block-cover-image h2,
+.entry .entry-content .wp-block-cover h2 {
+  margin: inherit;
+  max-width: inherit;
+  text-align: inherit;
+}
+
 .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright,
 .entry .entry-content .wp-block-cover.alignleft,
 .entry .entry-content .wp-block-cover.alignright {
@@ -3926,45 +3941,28 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignwide h2,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignwide h2 {
+  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignwide h2,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignwide h2 {
+  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignwide h2,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignwide h2 {
+  .entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
     padding: 0;
-    font-size: 4.5em;
   }
 }
 
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover-image.alignfull h2,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
-.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
-.entry .entry-content .wp-block-cover.alignfull h2 {
+.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
   max-width: calc(8 * (100vw / 12));
 }
 
@@ -3974,14 +3972,9 @@ body.page .main-navigation {
     padding-left: calc(10% + 58px + (2 * 1rem));
     padding-right: calc(10% + 58px + (2 * 1rem));
   }
-  .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover-image.alignfull h2,
-  .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
-  .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
-  .entry .entry-content .wp-block-cover.alignfull h2 {
+  .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+  .entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
     padding: 0;
-    font-size: 4.5em;
   }
 }