Jelajahi Sumber

Styling headings in the editor.

Caroline Moore 6 tahun lalu
induk
melakukan
94f3b5e3b5
2 mengubah file dengan 88 tambahan dan 92 penghapusan
  1. 1 0
      libretto/css/blocks.css
  2. 87 92
      libretto/css/editor-blocks.css

+ 1 - 0
libretto/css/blocks.css

@@ -239,6 +239,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
+	border-radius: 0;
 	font-size: 12px;
 	letter-spacing: 1px;
 	padding: 0.7rem 1.4rem;

+ 87 - 92
libretto/css/editor-blocks.css

@@ -21,22 +21,22 @@
 .edit-post-visual-editor .editor-block-list__block,
 .edit-post-visual-editor .editor-block-list__block p:not(.wp-block-cover-text),
 .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
-	color: #333;
-	font-family: Karla, sans-serif;
-	font-size: 16px;
-	line-height: 1.6;
+	color: #363431;
+	font-family: "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif;
+	font-size: 17px;
+	line-height: 2;
 }
 
 .alignleft {
 	display: inline;
 	float: left;
-	margin: .8em 1.6em .8em 0;
+	margin: 0 1.5em 0.5em 0;
 }
 
 .alignright {
 	display: inline;
 	float: right;
-	margin: .8em 0 .8em 1.6em;
+	margin: 0 0 0.5em 1.5em;
 }
 
 .aligncenter {
@@ -44,25 +44,20 @@
 	margin-right: auto;
 }
 
-.wp-block-columns.alignfull,
-.wp-block-latest-comments.alignfull,
-.editor-block-list__block[data-align="full"] .wp-block-file {
-	padding-left: 1.6em;
-	padding-right: 1.6em;
-}
-
-.editor-block-list__block[data-align="full"] table.wp-block-table {
-	margin-left: .8em;
-	margin-right: .8em;
-}
-
 /* Title */
 
 .editor-post-title__block .editor-post-title__input {
-	clear: both;
-	font-weight: bold;
-	font-family: Karla, sans-serif;
-	text-transform: uppercase;
+	border: none;
+	color: #787065;
+	font-family: "Playfair Display";
+	font-size: 44px;
+	font-style: normal;
+	letter-spacing: 0;
+	line-height: 1.2;
+	margin: 0;
+	padding: 0;
+	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+	text-transform: none;
 }
 
 /* Headings */
@@ -74,69 +69,69 @@
 .edit-post-visual-editor h5,
 .edit-post-visual-editor h6 {
 	clear: both;
-	font-weight: bold;
-	font-family: Karla, sans-serif;
-	text-transform: uppercase;
+	line-height: 1.6;
+	font-weight: normal;
 }
 
 .edit-post-visual-editor h1 {
-	font-size: 32px;
+	color: #a09a92;
+	font-family: "Playfair Display", Georgia, serif;
+	font-size: 44px;
+	font-style: italic;
+	margin: 1em 0 0.5em;
 }
 
 .edit-post-visual-editor h2 {
-	font-size: 30px;
+	border-bottom: 1px solid #787065;
+	color: #787065;
+	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 21px;
+	letter-spacing: 2px;
+	margin: 4em 0 2em;
+	padding-bottom: 0.5em;
+	text-transform: uppercase;
 }
 
 .edit-post-visual-editor h3 {
-	font-size: 26px;
+	color: #a09a92;
+	font-size: 25px;
+	font-style: italic;
+	margin: 2em 0 1em;
 }
 
 .edit-post-visual-editor h4 {
-	font-size: 18px;
+	color: #787065;
+	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	letter-spacing: 1px;
+	margin: 3em 0 1.5em;
+	text-transform: uppercase;
 }
 
 .edit-post-visual-editor h5 {
-	font-size: 16px;
+	color: #a09a92;
+	font-size: 21px;
+	font-style: italic;
+	margin: 1.5em 0 0.75em;
 }
 
 .edit-post-visual-editor h6 {
+	color: #787065;
+	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-size: 14px;
-}
-
-@media screen and (min-width: 768px) {
-	.edit-post-visual-editor h1 {
-		font-size: 42px;
-	}
-
-	.edit-post-visual-editor h2 {
-		font-size: 32px;
-	}
-
-	.edit-post-visual-editor h3 {
-		font-size: 30px;
-	}
-
-	.edit-post-visual-editor h4 {
-		font-size: 26px;
-	}
-
-	.edit-post-visual-editor h5 {
-		font-size: 20px;
-	}
-
-	.edit-post-visual-editor h6 {
-		font-size: 16px;
-	}
+	letter-spacing: 1px;
+	margin: 1.5em 0 0.75em;
+	text-transform: uppercase;
 }
 
 /* Paragraphs */
 
 .edit-post-visual-editor p {
-	margin: .8em 0;
+	margin: 0 0 1.5em;
 }
 
 .edit-post-visual-editor blockquote p {
-	margin: .8em 0;
+	margin: 0 0 1.5em;
 }
 
 /* Images */
@@ -460,59 +455,59 @@
 .wp-block-freeform.block-library-rich-text__tinymce h5,
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
 	clear: both;
-	font-weight: bold;
-	font-family: Karla, sans-serif;
-	text-transform: uppercase;
+	line-height: 1.6;
+	font-weight: normal;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h1 {
-	font-size: 32px;
+	color: #a09a92;
+	font-family: "Playfair Display", Georgia, serif;
+	font-size: 44px;
+	font-style: italic;
+	margin: 1em 0 0.5em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h2 {
-	font-size: 30px;
+	border-bottom: 1px solid #787065;
+	color: #787065;
+	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 21px;
+	letter-spacing: 2px;
+	margin: 4em 0 2em;
+	padding-bottom: 0.5em;
+	text-transform: uppercase;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h3 {
-	font-size: 26px;
+	color: #a09a92;
+	font-size: 25px;
+	font-style: italic;
+	margin: 2em 0 1em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h4 {
-	font-size: 18px;
+	color: #787065;
+	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	letter-spacing: 1px;
+	margin: 3em 0 1.5em;
+	text-transform: uppercase;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h5 {
-	font-size: 16px;
+	color: #a09a92;
+	font-size: 21px;
+	font-style: italic;
+	margin: 1.5em 0 0.75em;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
+	color: #787065;
+	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-size: 14px;
-}
-
-@media screen and (min-width: 768px) {
-	.wp-block-freeform.block-library-rich-text__tinymce h1 {
-		font-size: 42px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h2 {
-		font-size: 32px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h3 {
-		font-size: 30px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h4 {
-		font-size: 26px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h5 {
-		font-size: 20px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h6 {
-		font-size: 16px;
-	}
+	letter-spacing: 1px;
+	margin: 1.5em 0 0.75em;
+	text-transform: uppercase;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce pre {