Browse Source

Toujours: Minor updates to the Gutenberg styles, including:
* Reorganize styles a bit, consolidate header styles, and delete empty selectors
* Update editor colour palette to match theme's colours
* Remove styles for pre and code blocks in editor; doesn't look identical to the front-end but they blocked the text from being edited

Laurel Fulford 6 years ago
parent
commit
dcf18e9114
3 changed files with 238 additions and 327 deletions
  1. 49 100
      toujours/blocks.css
  2. 182 200
      toujours/editor-blocks.css
  3. 7 27
      toujours/functions.php

+ 49 - 100
toujours/blocks.css

@@ -48,6 +48,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	display: flex;
 }
 
+.wp-block-cover-image-text,
 .wp-block-cover-text {
 	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
 	font-weight: 300;
@@ -138,6 +139,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin-right: 0;
 }
 
+/* Video */
+
+.wp-block-video {
+	margin-bottom: 1.5em;
+}
 
 /*--------------------------------------------------------------
 3.0 Blocks - Formatting Blocks
@@ -150,6 +156,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: inherit;
 	font-family: inherit;
 	font-size: inherit;
+	font-style: italic;
 	line-height: inherit;
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -262,17 +269,9 @@ p.has-drop-cap:not(:focus)::first-letter {
 	        transition: background-color 0.2s;
 }
 
-.wp-block-button .wp-block-button__link:active,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
-}
-
-.wp-block-button__link:not(.has-background) {
-	background-color: #2590ec;
-}
-
-.wp-block-button__link:not(.has-text-color) {
+.wp-block-button__link {
 	color: #fff;
+	background-color: #2590ec;
 }
 
 .wp-block-button__link:not(.has-text-color):active,
@@ -353,6 +352,7 @@ hr.wp-block-separator {
 .wp-block-latest-comments {
 	margin-left: 0;
 	margin-right: 0;
+	padding: 0;
 }
 
 .wp-block-latest-comments__comment-meta a {
@@ -377,7 +377,12 @@ hr.wp-block-separator {
 }
 
 .wp-block-latest-comments__comment-date {
-	color: #ccc;
+	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
+	font-size: 13.5px;
+	font-style: normal;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
 }
 
 /* Latest Posts */
@@ -392,32 +397,60 @@ hr.wp-block-separator {
 6.0 Blocks - Colors
 --------------------------------------------------------------*/
 
+.has-blue-color,
+.has-blue-color:hover,
+.has-blue-color:focus,
+.has-blue-color:active {
+	color: #2590ec;
+}
+
+.has-blue-background-color,
+.has-blue-background-color:hover,
+.has-blue-background-color:focus,
+.has-blue-background-color:active {
+	background-color: #2590ec;
+}
+
+.has-dark-gray-color,
+.has-dark-gray-color:hover,
+.has-dark-gray-color:focus,
+.has-dark-gray-color:active {
+	color: #404040;
+}
+
+.has-dark-gray-background-color,
+.has-dark-gray-background-color:hover,
+.has-dark-gray-background-color:focus,
+.has-dark-gray-background-color:active {
+	background-color: #404040;
+}
+
 .has-medium-gray-color,
 .has-medium-gray-color:hover,
 .has-medium-gray-color:focus,
 .has-medium-gray-color:active {
-	color: #999;
+	color: #666;
 }
 
 .has-medium-gray-background-color,
 .has-medium-gray-background-color:hover,
 .has-medium-gray-background-color:focus,
 .has-medium-gray-background-color:active {
-	background-color: #999;
+	background-color: #666;
 }
 
 .has-light-gray-color,
 .has-light-gray-color:hover,
 .has-light-gray-color:focus,
 .has-light-gray-color:active {
-	color: #bdcbcc;
+	color: #ccc;
 }
 
 .has-light-gray-background-color,
 .has-light-gray-background-color:hover,
 .has-light-gray-background-color:focus,
 .has-light-gray-background-color:active {
-	background-color: #bdcbcc;
+	background-color: #ccc;
 }
 
 .has-white-color,
@@ -430,90 +463,6 @@ hr.wp-block-separator {
 .has-white-background-color,
 .has-white-background-color:hover,
 .has-white-background-color:focus,
-.has-white-background-color:active {
+.has-lwhite-background-color:active {
 	background-color: #fff;
 }
-
-.has-orange-color,
-.has-orange-color:hover,
-.has-orange-color:focus,
-.has-orange-color:active {
-	color: #d16221;
-}
-
-.has-orange-background-color,
-.has-orange-background-color:hover,
-.has-orange-background-color:focus,
-.has-orange-background-color:active {
-	background-color: #d16221;
-}
-
-.has-yellow-color,
-.has-yellow-color:hover,
-.has-yellow-color:focus,
-.has-yellow-color:active {
-	color: #e4b500;
-}
-
-.has-yellow-background-color,
-.has-yellow-background-color:hover,
-.has-yellow-background-color:focus,
-.has-yellow-background-color:active {
-	background-color: #e4b500;
-}
-
-.has-blue-color,
-.has-blue-color:hover,
-.has-blue-color:focus,
-.has-blue-color:active {
-	color: #7ba6a9;
-}
-
-.has-blue-background-color,
-.has-blue-background-color:hover,
-.has-blue-background-color:focus,
-.has-blue-background-color:active {
-	background-color: #7ba6a9;
-}
-
-.has-dark-blue-color,
-.has-dark-blue-color:hover,
-.has-dark-blue-color:focus,
-.has-dark-blue-color:active {
-	color: #537375;
-}
-
-.has-dark-blue-background-color,
-.has-dark-blue-background-color:hover,
-.has-dark-blue-background-color:focus,
-.has-dark-blue-background-color:active {
-	background-color: #537375;
-}
-
-.has-dark-gray-color,
-.has-dark-gray-color:hover,
-.has-dark-gray-color:focus,
-.has-dark-gray-color:active {
-	color: #777;
-}
-
-.has-dark-gray-background-color,
-.has-dark-gray-background-color:hover,
-.has-dark-gray-background-color:focus,
-.has-dark-gray-background-color:active {
-	background-color: #777;
-}
-
-.has-black-color,
-.has-black-color:hover,
-.has-black-color:focus,
-.has-black-color:active {
-	color: #222;
-}
-
-.has-black-background-color,
-.has-black-background-color:hover,
-.has-black-background-color:focus,
-.has-black-background-color:active {
-	background-color: #222;
-}

+ 182 - 200
toujours/editor-blocks.css

@@ -70,11 +70,17 @@
 /* Headings */
 
 .edit-post-visual-editor h1,
+.wp-block-freeform.block-library-rich-text__tinymce h1,
 .edit-post-visual-editor h2,
+.wp-block-freeform.block-library-rich-text__tinymce h2,
 .edit-post-visual-editor h3,
+.wp-block-freeform.block-library-rich-text__tinymce h3,
 .edit-post-visual-editor h4,
+.wp-block-freeform.block-library-rich-text__tinymce h4,
 .edit-post-visual-editor h5,
-.edit-post-visual-editor h6 {
+.wp-block-freeform.block-library-rich-text__tinymce h5,
+.edit-post-visual-editor h6,
+.wp-block-freeform.block-library-rich-text__tinymce h6 {
 	clear: both;
 	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
 	font-weight: 300;
@@ -83,33 +89,39 @@
 	padding: 0 0 15px;
 }
 
-.edit-post-visual-editor h1 {
+.edit-post-visual-editor h1,
+.wp-block-freeform.block-library-rich-text__tinymce h1 {
 	font-size: 40px;
 }
 
-.edit-post-visual-editor h2 {
+.edit-post-visual-editor h2,
+.wp-block-freeform.block-library-rich-text__tinymce h2 {
 	font-size: 35px;
 }
 
-.edit-post-visual-editor h3 {
+.edit-post-visual-editor h3,
+.wp-block-freeform.block-library-rich-text__tinymce h3{
 	font-size: 30px;
 }
 
-.edit-post-visual-editor h4 {
+.edit-post-visual-editor h4,
+.wp-block-freeform.block-library-rich-text__tinymce h4 {
 	font-size: 20px;
 	font-weight: 500;
 	letter-spacing: 0.08em;
 	text-transform: uppercase;
 }
 
-.edit-post-visual-editor h5 {
+.edit-post-visual-editor h5,
+.wp-block-freeform.block-library-rich-text__tinymce h5 {
 	font-size: 18px;
 	font-weight: 500;
 	letter-spacing: 0.08em;
 	text-transform: uppercase;
 }
 
-.edit-post-visual-editor h6 {
+.edit-post-visual-editor h6,
+.wp-block-freeform.block-library-rich-text__tinymce h6 {
 	font-size: 16px;
 	font-weight: 500;
 	letter-spacing: 0.08em;
@@ -185,6 +197,26 @@
 	margin-left: 1.5em;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce ol {
+	list-style: decimal;
+	margin-left: 3em;
+	padding: 0;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
+	margin-right: 3em;
+	margin-left: 0;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce li > ol {
+	margin-left: 3em;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce li > ol {
+	margin-left: 0;
+	margin-right: 3em;
+}
+
 .rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
 .rtl .editor-block-list__block ul:not(.wp-block-gallery),
 .rtl .block-library-list ul,
@@ -196,6 +228,26 @@
 	padding: 0 40px 0 0;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce ol {
+	list-style: decimal;
+	margin-left: 3em;
+	padding: 0;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
+	margin-right: 3em;
+	margin-left: 0;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce li > ol {
+	margin-left: 3em;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce li > ol {
+	margin-left: 0;
+	margin-right: 3em;
+}
+
 /* Captions */
 
 [class^="wp-block-"] figcaption,
@@ -238,6 +290,108 @@
 	text-decoration: none;
 }
 
+/* Address styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce address {
+	margin-bottom: 1.5em;
+}
+
+/* Blockquote styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	color: #888;
+	border-left: 4px solid #f0f0f0;
+	margin: 0 0 1.5em;
+	padding: 0 0 0 30px;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
+	display: block;
+	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
+	font-size: 18px;
+	font-style: normal;
+	font-weight: 300;
+	margin-top: 5px;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	border: 0;
+	border-right: 4px solid #f0f0f0;
+	padding-left: 0;
+	padding-right: 30px;
+}
+
+/* Alignments */
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
+	float: left;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
+	float: right;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
+	margin: .75em 1.5em .75em 0;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
+	margin: .75em 0 .75em 1.5em;
+}
+
+/* Pre styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce pre {
+	background: #333;
+	color: #ddd;
+	font-family: "Courier 10 Pitch", Courier, monospace;
+	line-height: 1.6;
+	margin-bottom: 1.6em;
+	max-width: 100%;
+	overflow: auto;
+	padding: 1.6em;
+	position: relative;
+}
+
+/* Table styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce table {
+	border: 0;
+	border-bottom: 4px double #e1e1e1;
+	border-top: 4px double #e1e1e1;
+	margin: 0 0 30px;
+	max-width: 100%;
+	overflow: auto;
+	width: 100%;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table tr {
+	border-bottom: 1px solid #e1e1e1;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table td,
+.wp-block-freeform.block-library-rich-text__tinymce table th {
+	border: 0;
+	border-bottom: 1px solid #e1e1e1;
+	font-size: 90%;
+	padding: 10px;
+	text-align: left;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table tr:last-child td,
+.wp-block-freeform.block-library-rich-text__tinymce table tr:last-child th {
+	border-bottom: 0;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce table td,
+.rtl .wp-block-freeform.block-library-rich-text__tinymce table th {
+	text-align: right;
+}
+
 /*--------------------------------------------------------------
 3.0 Blocks - Common Blocks
 --------------------------------------------------------------*/
@@ -352,7 +506,7 @@
 .wp-block-cover .wp-block-cover-text,
 .wp-block-cover h2 {
 	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
-	font-weight: 300;
+	font-size: 2em;
 }
 
 /* File */
@@ -361,6 +515,11 @@
 	margin: 0 0 1.5em;
 }
 
+.wp-block-file__textlink {
+	color: #2590ec;
+	text-decoration: underline;
+}
+
 .wp-block-file .wp-block-file__button {
 	background-color: #2590ec;
 	border: 0;
@@ -384,6 +543,10 @@
 	background-color: #444;
 }
 
+.wp-block-button .editor-rich-text__tinymce.mce-content-body {
+	line-height: 1;
+}
+
 .rtl .wp-block-file .wp-block-file__button {
 	margin-left: 15px;
 	margin-right: 0;
@@ -400,6 +563,7 @@
 	color: inherit;
 	font-family: inherit;
 	font-size: inherit;
+	font-style: italic;
 	line-height: inherit;
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -409,17 +573,6 @@
 
 /* Code */
 
-.wp-block-code:before {
-	border: 1px solid rgba(255, 255, 255, 0.4);
-	bottom: 3px;
-	content: "";
-	display: block;
-	left: 3px;
-	position: absolute;
-	right: 3px;
-	top: 3px;
-}
-
 .wp-block-code {
 	background: #333;
 	color: #ddd;
@@ -443,187 +596,8 @@
 	overflow: visible;
 }
 
-.wp-block-freeform.block-library-rich-text__tinymce address {
-	margin-bottom: 1.5em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce ol {
-	list-style: decimal;
-	margin-left: 3em;
-	padding: 0;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
-	margin-right: 3em;
-	margin-left: 0;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce li > ol {
-	margin-left: 3em;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce li > ol {
-	margin-left: 0;
-	margin-right: 3em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	color: #888;
-	border-left: 4px solid #f0f0f0;
-	margin: 0 0 1.5em;
-	padding: 0 0 0 30px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
-	margin-bottom: 0;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
-	display: block;
-	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
-	font-size: 18px;
-	font-style: normal;
-	font-weight: 300;
-	margin-top: 5px;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	border: 0;
-	border-right: 4px solid #f0f0f0;
-	padding-left: 0;
-	padding-right: 70px;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
-	float: left;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
-	float: right;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
-	margin: .75em 1.5em .75em 0;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
-	margin: .75em 0 .75em 1.5em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h1,
-.wp-block-freeform.block-library-rich-text__tinymce h2,
-.wp-block-freeform.block-library-rich-text__tinymce h3,
-.wp-block-freeform.block-library-rich-text__tinymce h4,
-.wp-block-freeform.block-library-rich-text__tinymce h5,
-.wp-block-freeform.block-library-rich-text__tinymce h6 {
-	clear: both;
-	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
-	font-weight: 300;
-	line-height: 1.2;
-	margin: 0;
-	padding: 0 0 15px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h1 {
-	font-size: 40px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h2 {
-	font-size: 35px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h3 {
-	font-size: 30px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h4 {
-	font-size: 20px;
-	font-weight: 500;
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h5 {
-	font-size: 18px;
-	font-weight: 500;
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h6 {
-	font-size: 16px;
-	font-weight: 500;
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce pre:before {
-	border: 1px solid rgba(255, 255, 255, 0.4);
-	bottom: 3px;
-	content: "";
-	display: block;
-	left: 3px;
-	position: absolute;
-	right: 3px;
-	top: 3px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce pre {
-	color: #777;
-	background: #eee;
-	font-family: "Courier 10 Pitch", Courier, monospace;
-	font-size: 15px;
-	line-height: 1.6;
-	margin-bottom: 1.6em;
-	max-width: 100%;
-	overflow: auto;
-	padding: 1.6em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table {
-	border-bottom: 4px double #e1e1e1;
-	border-top: 4px double #e1e1e1;
-	margin: 0 0 30px;
-	max-width: 100%;
-	overflow: auto;
-	width: 100%;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce .alternate {
-	background: transparent;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table tr {
-	border-bottom: 1px solid #e1e1e1;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table td,
-.wp-block-freeform.block-library-rich-text__tinymce table th {
-	border: 0;
-	font-size: 90%;
-	padding: 10px;
-	text-align: left;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce table td,
-.rtl .wp-block-freeform.block-library-rich-text__tinymce table th {
-	text-align: right;
-}
-
-
 /* Preformatted */
 
-.editor-block-list__block .wp-block-preformatted pre:before {
-	border: 1px solid rgba(255, 255, 255, 0.4);
-	bottom: 3px;
-	content: "";
-	display: block;
-	left: 3px;
-	position: absolute;
-	right: 3px;
-	top: 3px;
-}
-
 .editor-block-list__block .wp-block-preformatted pre {
 	background: #333;
 	color: #ddd;
@@ -851,9 +825,17 @@
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #ccc;
 	margin-bottom: 0;
-	padding: .75em 0;
+	padding: 1em 0;
+}
+
+.wp-block-latest-comments__comment-date {
+	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
+	font-size: 13.5px;
+	font-style: normal;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
 }
 
 .rtl ol.wp-block-latest-comments {

+ 7 - 27
toujours/functions.php

@@ -42,50 +42,30 @@ function toujours_setup() {
 	add_theme_support(
 		'editor-color-palette', array(
 			array(
-				'name'  => esc_html__( 'Black', 'toujours' ),
-				'slug' => 'black',
-				'color' => '#222222',
+				'name'  => esc_html__( 'Blue', 'toujours' ),
+				'slug' => 'blue',
+				'color' => '#2590ec',
 			),
 			array(
 				'name'  => esc_html__( 'Dark Gray', 'toujours' ),
 				'slug' => 'dark-gray',
-				'color' => '#777777',
+				'color' => '#404040',
 			),
 			array(
 				'name'  => esc_html__( 'Medium Gray', 'toujours' ),
 				'slug' => 'medium-gray',
-				'color' => '#999999',
+				'color' => '#666',
 			),
 			array(
 				'name'  => esc_html__( 'Light Gray', 'toujours' ),
 				'slug' => 'light-gray',
-				'color' => '#bdcbcc',
+				'color' => '#eee',
 			),
 			array(
 				'name'  => esc_html__( 'White', 'toujours' ),
 				'slug' => 'white',
-				'color' => '#ffffff',
-			),
-			array(
-				'name'  => esc_html__( 'Blue', 'toujours' ),
-				'slug' => 'blue',
-				'color' => '#7ba6a9',
+				'color' => '#fff',
 			),
-			array(
-				'name'  => esc_html__( 'Dark Blue', 'toujours' ),
-				'slug' => 'dark-blue',
-				'color' => '#537375',
-			),
-			array(
-				'name'  => esc_html__( 'Orange', 'toujours' ),
-				'slug' => 'orange',
-				'color' => '#d16221',
-			),
-			array(
-				'name'  => esc_html__( 'Yellow', 'toujours' ),
-				'slug' => 'yellow',
-				'color' => '#e4b500',
-			),	
 		)
 	);