Browse Source

Headings and body styles for the editor.

Caroline Moore 6 years ago
parent
commit
50009f2798
1 changed files with 90 additions and 30 deletions
  1. 90 30
      scratchpad/editor-blocks.css

+ 90 - 30
scratchpad/editor-blocks.css

@@ -21,10 +21,10 @@
 .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: #555;
-	font-family: "Rubik", "Helvetica Neue", sans-serif;
-	font-size: 17px;
-	line-height: 1.5;
+	color: #777;
+	font-family: "Lato", "Helvetica Neue", helvetica, arial, sans-serif;
+	font-size: 18px;
+	line-height: 1.8;
 }
 
 .alignleft,
@@ -57,11 +57,17 @@
 /* Title */
 
 .editor-post-title__block .editor-post-title__input {
-	font-family: "Libre Baskerville", Georgia, serif;
-	font-weight: 700;
-	margin-bottom: .5em;
-	font-size: 36px;
-	line-height: 1.125em;
+	font-family: "Lato", "Helvetica Neue", helvetica, arial, sans-serif;
+	color: #777;
+	margin-top: 0;
+	padding-top: 0;
+	font-size: 32px;
+}
+
+@media only screen and (max-width: 800px) {
+	.editor-post-title__block .editor-post-title__input {
+		font-size: 28px;
+	}
 }
 
 /* Headings */
@@ -73,13 +79,12 @@
 .edit-post-visual-editor h5,
 .edit-post-visual-editor h6 {
 	clear: both;
-	font-family: "Libre Baskerville", Georgia, serif;
-	font-weight: 700;
-	margin-bottom: .5em;
+	margin-top: 0;
+	padding-top: 0;
 }
 
 .edit-post-visual-editor h1 {
-	font-size: 36px;
+	font-size: 32px;
 }
 
 .edit-post-visual-editor h2 {
@@ -91,23 +96,51 @@
 }
 
 .edit-post-visual-editor h4 {
-	font-size: 18px;
+	font-size: 20px;
 }
 
 .edit-post-visual-editor h5 {
-	font-size: 18px;
+	font-size: 16px;
+	text-transform: uppercase;
 }
 
 .edit-post-visual-editor h6 {
-	font-size: 18px;
+	font-size: 14px;
+	text-transform: uppercase;
+}
+
+@media only screen and (max-width: 800px) {
+	.edit-post-visual-editor h1 {
+		font-size: 28px;
+	}
+
+	.edit-post-visual-editor h2 {
+		font-size: 24px;
+	}
+
+	.edit-post-visual-editor h3 {
+		font-size: 20px;
+	}
+
+	.edit-post-visual-editor h4 {
+		font-size: 18px;
+	}
+
+	.edit-post-visual-editor h5 {
+		font-size: 16px;
+	}
+
+	.edit-post-visual-editor h6 {
+		font-size: 14px;
+	}
 }
 
 /* Images */
 
 .wp-block-image figcaption {
-	font-size: 14px;
-	line-height: 1.525em;
-	text-align: center;
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	font-size: 15px;
+	line-height: 1.5;
 }
 
 /*--------------------------------------------------------------
@@ -117,7 +150,7 @@
 /* Main column width */
 
 .wp-block {
-	max-width: 789px; /* 759px + 30px to account for padding */
+	max-width: 690px; /* 660px + 30px to account for padding */
 }
 
 /* Link styles */
@@ -197,9 +230,9 @@
 /* Captions */
 
 [class^="wp-block-"] figcaption {
-	font-size: 14px;
-	line-height: 1.525em;
-	text-align: center;
+	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	font-size: 15px;
+	line-height: 1.5;
 }
 
 /*--------------------------------------------------------------
@@ -448,13 +481,12 @@
 .wp-block-freeform.block-library-rich-text__tinymce h5,
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
 	clear: both;
-	font-family: "Libre Baskerville", Georgia, serif;
-	font-weight: 700;
-	margin-bottom: .5em;
+	margin-top: 0;
+	padding-top: 0;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h1 {
-	font-size: 36px;
+	font-size: 32px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h2 {
@@ -466,15 +498,43 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h4 {
-	font-size: 18px;
+	font-size: 20px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h5 {
-	font-size: 18px;
+	font-size: 16px;
+	text-transform: uppercase;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce h6 {
-	font-size: 18px;
+	font-size: 14px;
+	text-transform: uppercase;
+}
+
+@media only screen and (max-width: 800px) {
+	.wp-block-freeform.block-library-rich-text__tinymce h1 {
+		font-size: 28px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h2 {
+		font-size: 24px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h3 {
+		font-size: 20px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h4 {
+		font-size: 18px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h5 {
+		font-size: 16px;
+	}
+
+	.wp-block-freeform.block-library-rich-text__tinymce h6 {
+		font-size: 14px;
+	}
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce pre {