瀏覽代碼

Elegant Business: Heading Size Adjustment

Takashi Irie 6 年之前
父節點
當前提交
ea6f1318a9

+ 31 - 6
elegant-business/sass/blocks/_blocks.scss

@@ -544,32 +544,57 @@
 		}
 
 		h1 {
-			font-size: $font__size-xxl;
+			font-size: $font__size-xl;
+
+			@include media(tablet) {
+				font-size: $font__size-xxl;
+			}
 		}
 
 		.wp-block-cover-image-text,
 		.wp-block-cover-text,
 		h2 {
-			font-size: $font__size-xl;
+			font-size: $font__size-lg;
 			margin: inherit;
 			max-width: inherit;
+			padding: 0;
 			text-align: inherit;
+
+			@include media(tablet) {
+				font-size: $font__size-xl;
+			}
 		}
 
 		h3 {
-			font-size: $font__size-lg;
+			font-size: $font__size-md;
+
+			@include media(tablet) {
+				font-size: $font__size-lg;
+			}
 		}
 
 		h4 {
-			font-size: $font__size-md;
+			font-size: $font__size_base;
+
+			@include media(tablet) {
+				font-size: $font__size-md;
+			}
 		}
 
 		h5 {
-			font-size: $font__size-base;
+			font-size: $font__size-sm;
+
+			@include media(tablet) {
+				font-size: $font__size_base;
+			}
 		}
 
 		h6 {
-			font-size: $font__size-sm;
+			font-size: $font__size-xs;
+
+			@include media(tablet) {
+				font-size: $font__size-sm;
+			}
 		}
 
 		&.has-left-content {

+ 6 - 16
elegant-business/sass/typography/_headings.scss

@@ -63,28 +63,18 @@ h6 {
 	line-height: 1.25;
 }
 
+.has-huge-font-size {
+	font-size: $font__size-xl;
+}
+
 .entry-title,
-.has-huge-font-size,
+.has-large-font-size,
 h1 {
 	font-size: $font__size-lg;
-
-	@include media(tablet) {
-		font-size: $font__size-xl;
-	}
 }
 
-.has-large-font-size,
-.wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text,
-.wp-block-cover-image h2,
-.wp-block-cover .wp-block-cover-image-text,
-.wp-block-cover .wp-block-cover-text,
-.wp-block-cover h2 {
+h2 {
 	font-size: $font__size-md;
-
-	@include media(tablet) {
-		font-size: $font__size-lg;
-	}
 }
 
 .site-title,

+ 113 - 8
elegant-business/style-editor.css

@@ -83,6 +83,22 @@ p {
   font-size: 22px;
 }
 
+p.has-small-font-size {
+  font-size: 0.88889em;
+}
+
+p.has-normal-font-size {
+  font-size: 1.125em;
+}
+
+p.has-large-font-size {
+  font-size: 1.6875em;
+}
+
+p.has-huge-font-size {
+  font-size: 2.25em;
+}
+
 h1,
 h2,
 h3,
@@ -91,19 +107,24 @@ h5,
 h6 {
   font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
   font-weight: 700;
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+  line-height: 1.2;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
   text-align: center;
 }
 
-h1 {
-  font-size: 1.6875em;
+.editor-inner-blocks h1, .editor-inner-blocks
+h2, .editor-inner-blocks
+h3, .editor-inner-blocks
+h4, .editor-inner-blocks
+h5, .editor-inner-blocks
+h6 {
+  margin-top: 1.375rem;
+  margin-bottom: 1.375rem;
 }
 
-@media only screen and (min-width: 768px) {
-  h1 {
-    font-size: 2.25em;
-  }
+h1 {
+  font-size: 1.6875em;
 }
 
 h2 {
@@ -292,6 +313,90 @@ figcaption,
   font-weight: bolder;
 }
 
+.wp-block-cover .wp-block-cover__inner-container h1, .wp-block-cover .wp-block-cover__inner-container h2, .wp-block-cover .wp-block-cover__inner-container h3, .wp-block-cover .wp-block-cover__inner-container h4, .wp-block-cover .wp-block-cover__inner-container h5, .wp-block-cover .wp-block-cover__inner-container h6,
+.wp-block-cover-image .wp-block-cover__inner-container h1,
+.wp-block-cover-image .wp-block-cover__inner-container h2,
+.wp-block-cover-image .wp-block-cover__inner-container h3,
+.wp-block-cover-image .wp-block-cover__inner-container h4,
+.wp-block-cover-image .wp-block-cover__inner-container h5,
+.wp-block-cover-image .wp-block-cover__inner-container h6 {
+  text-align: left;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h1,
+.wp-block-cover-image .wp-block-cover__inner-container h1 {
+  font-size: 2.25em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h1,
+  .wp-block-cover-image .wp-block-cover__inner-container h1 {
+    font-size: 2.8125em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h2,
+.wp-block-cover-image .wp-block-cover__inner-container h2 {
+  font-size: 1.6875em;
+  max-width: 100%;
+  padding: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h2,
+  .wp-block-cover-image .wp-block-cover__inner-container h2 {
+    font-size: 2.25em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h3,
+.wp-block-cover-image .wp-block-cover__inner-container h3 {
+  font-size: 1.125em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h3,
+  .wp-block-cover-image .wp-block-cover__inner-container h3 {
+    font-size: 1.6875em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h4,
+.wp-block-cover-image .wp-block-cover__inner-container h4 {
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h4,
+  .wp-block-cover-image .wp-block-cover__inner-container h4 {
+    font-size: 1.125em;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h5,
+.wp-block-cover-image .wp-block-cover__inner-container h5 {
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h5,
+  .wp-block-cover-image .wp-block-cover__inner-container h5 {
+    font-size: 22px;
+  }
+}
+
+.wp-block-cover .wp-block-cover__inner-container h6,
+.wp-block-cover-image .wp-block-cover__inner-container h6 {
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .wp-block-cover .wp-block-cover__inner-container h6,
+  .wp-block-cover-image .wp-block-cover__inner-container h6 {
+    font-size: 0.88889em;
+  }
+}
+
 @media only screen and (min-width: 768px) {
   .wp-block-cover .wp-block-cover__inner-container,
   .wp-block-cover-image .wp-block-cover__inner-container {

+ 78 - 6
elegant-business/style-editor.scss

@@ -86,6 +86,22 @@ body {
 
 p {
 	font-size: $font__size_base;
+
+	&.has-small-font-size {
+		font-size: $font__size-sm;
+	}
+
+	&.has-normal-font-size {
+		font-size: $font__size-md;
+	}
+
+	&.has-large-font-size {
+		font-size: $font__size-lg;
+	}
+
+	&.has-huge-font-size {
+		font-size: $font__size-xl;
+	}
 }
 
 h1,
@@ -96,17 +112,19 @@ h5,
 h6 {
 	font-family: $font__heading;
 	font-weight: 700;
-	margin-top: #{$size__spacing-unit * 3};
-	margin-bottom: #{$size__spacing-unit * 3};
+	line-height: $font__line-height-heading;
+	margin-top: 2rem;
+	margin-bottom: 2rem;
 	text-align: center;
+
+	.editor-inner-blocks & {
+		margin-top: 1.375rem;
+		margin-bottom: 1.375rem;
+	}
 }
 
 h1 {
 	font-size: $font__size-lg;
-
-	@include media(tablet) {
-		font-size: $font__size-xl;
-	}
 }
 
 h2 {
@@ -270,6 +288,60 @@ figcaption,
 			font-weight: bolder;
 		}
 
+		h1, h2, h3, h4, h5, h6 {
+			text-align: left;
+		}
+
+		h1 {
+			font-size: $font__size-xl;
+
+			@include media(tablet) {
+				font-size: $font__size-xxl;
+			}
+		}
+
+		h2 {
+			font-size: $font__size-lg;
+			max-width: 100%;
+			padding: 0;
+
+			@include media(tablet) {
+				font-size: $font__size-xl;
+			}
+		}
+
+		h3 {
+			font-size: $font__size-md;
+
+			@include media(tablet) {
+				font-size: $font__size-lg;
+			}
+		}
+
+		h4 {
+			font-size: $font__size_base;
+
+			@include media(tablet) {
+				font-size: $font__size-md;
+			}
+		}
+
+		h5 {
+			font-size: $font__size-sm;
+
+			@include media(tablet) {
+				font-size: $font__size_base;
+			}
+		}
+
+		h6 {
+			font-size: $font__size-xs;
+
+			@include media(tablet) {
+				font-size: $font__size-sm;
+			}
+		}
+
 		@include media(tablet) {
 			margin-left: auto;
 			margin-right: auto;

+ 60 - 35
elegant-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, beautiful typography, Elegant Business conveys quality and integrity, which makes it especially good fit for coffee shops, pop-up shops, and 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: elegant-business
@@ -491,42 +491,20 @@ h6 {
   line-height: 1.25;
 }
 
+.has-huge-font-size {
+  font-size: 2.25em;
+}
+
 .entry-title,
-.has-huge-font-size,
+.has-large-font-size,
 h1 {
   font-size: 1.6875em;
 }
 
-@media only screen and (min-width: 768px) {
-  .entry-title,
-  .has-huge-font-size,
-  h1 {
-    font-size: 2.25em;
-  }
-}
-
-.has-large-font-size,
-.wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text,
-.wp-block-cover-image h2,
-.wp-block-cover .wp-block-cover-image-text,
-.wp-block-cover .wp-block-cover-text,
-.wp-block-cover h2 {
+h2 {
   font-size: 1.125em;
 }
 
-@media only screen and (min-width: 768px) {
-  .has-large-font-size,
-  .wp-block-cover-image .wp-block-cover-image-text,
-  .wp-block-cover-image .wp-block-cover-text,
-  .wp-block-cover-image h2,
-  .wp-block-cover .wp-block-cover-image-text,
-  .wp-block-cover .wp-block-cover-text,
-  .wp-block-cover h2 {
-    font-size: 1.6875em;
-  }
-}
-
 .site-title,
 .not-found .page-title,
 .error-404 .page-title {
@@ -3926,7 +3904,14 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-cover-image h1,
 .entry .entry-content .wp-block-cover h1 {
-  font-size: 2.8125em;
+  font-size: 2.25em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h1,
+  .entry .entry-content .wp-block-cover h1 {
+    font-size: 2.8125em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -3935,30 +3920,70 @@ body.page .main-navigation {
 .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.25em;
+  font-size: 1.6875em;
   margin: inherit;
   max-width: inherit;
+  padding: 0;
   text-align: inherit;
 }
 
+@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.25em;
+  }
+}
+
 .entry .entry-content .wp-block-cover-image h3,
 .entry .entry-content .wp-block-cover h3 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h3,
+  .entry .entry-content .wp-block-cover h3 {
+    font-size: 1.6875em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image h4,
 .entry .entry-content .wp-block-cover h4 {
-  font-size: 1.125em;
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h4,
+  .entry .entry-content .wp-block-cover h4 {
+    font-size: 1.125em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image h5,
 .entry .entry-content .wp-block-cover h5 {
-  font-size: 22px;
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h5,
+  .entry .entry-content .wp-block-cover h5 {
+    font-size: 22px;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image h6,
 .entry .entry-content .wp-block-cover h6 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h6,
+  .entry .entry-content .wp-block-cover h6 {
+    font-size: 0.88889em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image.has-left-content .wp-block-cover__inner-container,

+ 59 - 34
elegant-business/style.css

@@ -491,42 +491,20 @@ h6 {
   line-height: 1.25;
 }
 
+.has-huge-font-size {
+  font-size: 2.25em;
+}
+
 .entry-title,
-.has-huge-font-size,
+.has-large-font-size,
 h1 {
   font-size: 1.6875em;
 }
 
-@media only screen and (min-width: 768px) {
-  .entry-title,
-  .has-huge-font-size,
-  h1 {
-    font-size: 2.25em;
-  }
-}
-
-.has-large-font-size,
-.wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text,
-.wp-block-cover-image h2,
-.wp-block-cover .wp-block-cover-image-text,
-.wp-block-cover .wp-block-cover-text,
-.wp-block-cover h2 {
+h2 {
   font-size: 1.125em;
 }
 
-@media only screen and (min-width: 768px) {
-  .has-large-font-size,
-  .wp-block-cover-image .wp-block-cover-image-text,
-  .wp-block-cover-image .wp-block-cover-text,
-  .wp-block-cover-image h2,
-  .wp-block-cover .wp-block-cover-image-text,
-  .wp-block-cover .wp-block-cover-text,
-  .wp-block-cover h2 {
-    font-size: 1.6875em;
-  }
-}
-
 .site-title,
 .not-found .page-title,
 .error-404 .page-title {
@@ -3938,7 +3916,14 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-cover-image h1,
 .entry .entry-content .wp-block-cover h1 {
-  font-size: 2.8125em;
+  font-size: 2.25em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h1,
+  .entry .entry-content .wp-block-cover h1 {
+    font-size: 2.8125em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
@@ -3947,30 +3932,70 @@ body.page .main-navigation {
 .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.25em;
+  font-size: 1.6875em;
   margin: inherit;
   max-width: inherit;
+  padding: 0;
   text-align: inherit;
 }
 
+@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.25em;
+  }
+}
+
 .entry .entry-content .wp-block-cover-image h3,
 .entry .entry-content .wp-block-cover h3 {
-  font-size: 1.6875em;
+  font-size: 1.125em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h3,
+  .entry .entry-content .wp-block-cover h3 {
+    font-size: 1.6875em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image h4,
 .entry .entry-content .wp-block-cover h4 {
-  font-size: 1.125em;
+  font-size: 22px;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h4,
+  .entry .entry-content .wp-block-cover h4 {
+    font-size: 1.125em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image h5,
 .entry .entry-content .wp-block-cover h5 {
-  font-size: 22px;
+  font-size: 0.88889em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h5,
+  .entry .entry-content .wp-block-cover h5 {
+    font-size: 22px;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image h6,
 .entry .entry-content .wp-block-cover h6 {
-  font-size: 0.88889em;
+  font-size: 0.71111em;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-cover-image h6,
+  .entry .entry-content .wp-block-cover h6 {
+    font-size: 0.88889em;
+  }
 }
 
 .entry .entry-content .wp-block-cover-image.has-left-content .wp-block-cover__inner-container,