Browse Source

Illustratr: Fixes to theme's Gutenberg support, including:
* Adding some unique verse styles (italicized)
* Reorganizing the editor CSS to match other themes; consolidating some styles.
* Correcting some quote RTL issues with borders.
* Update comments widget block to better match theme's comment styles.

Laurel Fulford 6 years ago
parent
commit
2aea58e344
2 changed files with 237 additions and 253 deletions
  1. 58 37
      illustratr/blocks.css
  2. 179 216
      illustratr/editor-blocks.css

+ 58 - 37
illustratr/blocks.css

@@ -48,7 +48,9 @@ Description: Used to style Gutenberg Blocks.
 @media (min-width: 768px) {
 	.alignfull.wp-block-table,
 	.alignfull.wp-block-categories,
+	.alignfull.wp-block-columns,
 	.alignfull.wp-block-archives,
+	.alignfull.wp-block-audio,
 	.alignfull.wp-block-latest-posts,
 	.alignfull.wp-block-latest-comments {
 		width: calc(100vw - 100px); /* subtract 100px on text-based blocks for more spacing */
@@ -99,7 +101,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-gallery {
 	margin-bottom: 40px;
-	margin-left: inherit;
+}
+
+.wp-block-gallery:not(.alignwide):not(.alignfull) {
+	margin-left: 0;
+	margin-right: 0;
 }
 
 /* Quote */
@@ -159,10 +165,9 @@ p.has-drop-cap:not(:focus)::first-letter {
 	border-radius: 0;
 	box-shadow: none;
 	color: white;
-	text-transform: uppercase;
+	font-size: 18px;
 	font-weight: 900;
-	cursor: pointer;
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
+	text-transform: uppercase;
 }
 
 .wp-block-file .wp-block-file__button:hover,
@@ -178,6 +183,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: #fff;
 }
 
+.rtl .wp-block-file * + .wp-block-file__button {
+	margin-left: .75em;
+	margin-right: 0;
+}
+
 /* Cover */
 
 .wp-block-cover,
@@ -196,11 +206,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 .wp-block-verse {
 	background: transparent;
 	color: inherit;
-	font-family: inherit;
+	font-family: "PT Serif", serif;
 	font-size: inherit;
-	letter-spacing: 0px;
+	font-style: italic;
+	letter-spacing: 0;
 	line-height: inherit;
-	margin-bottom: 40px;
 	max-width: 100%;
 	overflow: auto;
 	padding: 0;
@@ -222,21 +232,17 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Pullquote */
 
 .wp-block-pullquote {
-	margin: 0;
+	border-top: 2px solid #e06d5e;
+	border-bottom: 2px solid #e06d5e;
 	padding: 0;
-	border: 0;
 }
 
 .wp-block-pullquote blockquote {
-	padding-left: 0;
-	padding-top: 40px;
-	padding-bottom: 40px;
+	padding: 40px 0;
 	margin: 0 0 20px;
 	font-family: "PT Serif", serif;
 	font-size: 1.2em;
-	border-left: 0;
-	border-top: 2px solid #e06d5e;
-	border-bottom: 2px solid #e06d5e;
+	border: 0;
 }
 
 @media screen and (max-width: 767px) {
@@ -315,34 +321,27 @@ p.has-drop-cap:not(:focus)::first-letter {
 	}
 }
 
-.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) {
+.wp-block-button__link {
 	background: #464d4d;
+	color: white;
 	border: 1px solid #464d4d;
 }
 
-.wp-block-button__link:not(.has-background):focus {
-	background: #e06d5e;
-}
-
-.wp-block-button__link:not(.has-text-color),
-.wp-block-button__link:not(.has-text-color):active,
-.wp-block-button__link:not(.has-text-color):focus,
-.wp-block-button__link:not(.has-text-color):hover {
+.wp-block-button__link:active,
+.wp-block-button__link:focus,
+.wp-block-button__link:hover {
 	color: white;
-}
-
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
 	background: #e06d5e;
 	border-color: #e06d5e;
 }
 
+.wp-block-button__link.has-background:active,
+.wp-block-button__link.has-background:focus,
+.wp-block-button__link.has-background:hover {
+	border-color: currentColor;
+	opacity: 0.8;
+}
+
 /* Seperator */
 
 hr.wp-block-separator {
@@ -361,6 +360,16 @@ hr.wp-block-separator {
 	max-width: 100%;
 }
 
+/* Media & Text */
+
+.wp-block-media-text {
+	margin-bottom: 20px;
+}
+
+.wp-block-media-text *:last-child {
+	margin-bottom: 0;
+}
+
 /*--------------------------------------------------------------
 5.0 Blocks - Widget Blocks
 --------------------------------------------------------------*/
@@ -379,13 +388,25 @@ hr.wp-block-separator {
 
 /* Latest Comments */
 
-.editor-block-list__block .wp-block-latest-comments__comment-meta a {
-	box-shadow: none;
-	font-weight: 700;
+.wp-block-latest-comments__comment-meta a {
+	color: #24282d;
+	font-weight: 900;
 	text-decoration: none;
+	text-transform: uppercase;
+}
+
+.wp-block-latest-comments__comment,
+.wp-block-latest-comments__comment-date,
+.wp-block-latest-comments__comment-excerpt p {
+	font-size: inherit;
 }
 
 .wp-block-latest-comments__comment-date {
+	color: #7f8d8c;
+	font-family: "PT Serif", serif;
+	font-size: 0.73em;
+	line-height: 1.3;
+	font-style: italic;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {

+ 179 - 216
illustratr/editor-blocks.css

@@ -74,11 +74,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;
 	margin-bottom: 20px;
 	color: #24282d;
@@ -86,30 +92,36 @@
 	font-weight: bold;
 }
 
-.edit-post-visual-editor h1 {
+.edit-post-visual-editor h1,
+.wp-block-freeform.block-library-rich-text__tinymce h1 {
 	font-size: 1.8em;
 	line-height: 1.2;
 }
 
-.edit-post-visual-editor h2 {
+.edit-post-visual-editor h2,
+.wp-block-freeform.block-library-rich-text__tinymce h2 {
 	font-size: 1.6em;
 	line-height: 1.3;
 }
 
-.edit-post-visual-editor h3 {
+.edit-post-visual-editor h3,
+.wp-block-freeform.block-library-rich-text__tinymce h3 {
 	font-size: 1.4em;
 	line-height: 1.4;
 }
 
-.edit-post-visual-editor h4 {
+.edit-post-visual-editor h4,
+.wp-block-freeform.block-library-rich-text__tinymce h4 {
 	font-size: 1.2em;
 }
 
-.edit-post-visual-editor h5 {
+.edit-post-visual-editor h5,
+.wp-block-freeform.block-library-rich-text__tinymce h5 {
 	font-size: 1em;
 }
 
-.edit-post-visual-editor h6 {
+.edit-post-visual-editor h6,
+.wp-block-freeform.block-library-rich-text__tinymce h6 {
 	font-size: 0.8em;
 }
 
@@ -285,6 +297,125 @@
 	text-align: center;
 }
 
+/* Address  styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce address {
+	margin-bottom: 20px;
+}
+
+/* List styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce ol {
+	list-style: decimal;
+	margin-left: 0;
+	padding-left: 40px;
+}
+
+@media screen and (max-width: 767px) {
+	.wp-block-freeform.block-library-rich-text__tinymce ol {
+		padding-left: 20px;
+	}
+}
+
+/* Blockquote styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	padding-left: 40px;
+	margin: 0;
+	font-family: "PT Serif", serif;
+	font-size: 26px;
+	border-left: 2px solid #e06d5e;
+}
+
+@media screen and (max-width: 767px) {
+	.wp-block-freeform.block-library-rich-text__tinymce blockquote {
+		padding-left: 20px;
+		font-size: 21px;
+	}
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
+	font-style: italic;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	border-left: 0;
+	border-right: 2px solid #e06d5e;
+	margin-right: 0;
+	padding-left: 0;
+	padding-right: 40px;
+}
+
+@media screen and (max-width: 767px) {
+	.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
+		padding-right: 20px;
+	}
+}
+
+.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: 20px 40px 20px 0;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
+	margin: 20px 0 20px 40px;
+}
+
+/* Pre styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce pre {
+	background: #f1f2f3;
+	color: #7f8d8c;
+	font-family: "Source Code Pro", monospace;
+	font-size: 22px;
+	letter-spacing: -0.05em;
+	position: relative;
+	overflow: auto;
+	padding: 20px;
+	margin-bottom: 20px;
+	max-width: 100%;
+}
+
+/* Table styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce table {
+	border-collapse: collapse;
+	border-bottom: 1px solid #eee;
+	margin: 0 0 40px 0;
+	width: 100%;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table td {
+	border: 0;
+	border-top: 1px solid #eee;
+	padding: 0.4em;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table th {
+	background-color: #f1f2f3;
+	border: 0;
+	border-bottom: 1px solid #f1f2f3;
+	font-weight: bold;
+	padding: 0.4em;
+}
+
+/* Definition List styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce dt {
+	font-weight: bold;
+}
+
 /*--------------------------------------------------------------
 3.0 Blocks - Common Blocks
 --------------------------------------------------------------*/
@@ -295,9 +426,6 @@
 	font-size: 124px;
 }
 
-.rtl .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
-}
-
 /* Quote */
 
 .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large) {
@@ -338,12 +466,6 @@
 	font-size: 80%;
 }
 
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large) {
-}
-
-.rtl .editor-block-list__block .wp-block-quote {
-}
-
 .editor-block-list__block .wp-block-quote em,
 .editor-block-list__block .wp-block-quote i {
 	font-style: normal;
@@ -377,10 +499,6 @@
 	margin-bottom: 20px;
 }
 
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large).alignright  {
-}
-
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	padding-left: 40px;
@@ -399,9 +517,27 @@
 	margin-bottom: 20px;
 }
 
-/* Audio */
+.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
+.rtl .editor-block-list__block .wp-block-quote {
+	border-left: 0;
+	border-right: 2px solid #e06d5e;
+	padding-left: 0;
+	padding-right: 40px;
+}
+
+@media screen and (max-width: 767px) {
+	.rtl .editor-block-list__block .wp-block-quote {
+		padding-left: 0;
+		padding-right: 20px;
+	}
+}
+
+.rtl .wp-block-quote.is-large,
+.rtl .wp-block-quote.is-style-large {
+	padding-left: 0;
+	padding-right: 40px;
+}
 
-/* Cover Images */
 
 /* File */
 
@@ -411,17 +547,14 @@
 }
 
 .wp-block-file .wp-block-file__button {
-	padding: 10px 20px;
 	background: #464d4d;
 	border: 1px solid #464d4d;
 	border-radius: 0;
 	color: white;
-	text-transform: uppercase;
+	font-size: 18px;
 	font-weight: 900;
-	cursor: pointer;
-	/* Improves usability and consistency of cursor style between image-type 'input' and others */
-	-webkit-appearance: button;
-	/* Corrects inability to style clickable 'input' types in iOS */
+	padding: 10px 20px;
+	text-transform: uppercase;
 }
 
 /*--------------------------------------------------------------
@@ -433,7 +566,8 @@
 .wp-block-verse pre {
 	background: transparent;
 	color: inherit;
-	font-family: inherit;
+	font-family: "PT Serif", serif;
+	font-style: italic;
 	line-height: inherit;
 	margin-bottom: 40px;
 	max-width: 100%;
@@ -465,189 +599,6 @@
 	font-size: 22px;
 }
 
-/* Classic */
-
-.wp-block-freeform.block-library-rich-text__tinymce address {
-	margin-bottom: 20px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce ol {
-	list-style: decimal;
-	margin-left: 0;
-	padding-left: 40px;
-}
-
-@media screen and (max-width: 767px) {
-	.wp-block-freeform.block-library-rich-text__tinymce ol {
-		padding-left: 20px;
-	}
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	padding-left: 40px;
-	margin: 0;
-	font-family: "PT Serif", serif;
-	font-size: 26px;
-	border-left: 2px solid #e06d5e;
-}
-
-@media screen and (max-width: 767px) {
-	.wp-block-freeform.block-library-rich-text__tinymce blockquote {
-		padding-left: 20px;
-		font-size: 21px;
-	}
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote p {
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
-	margin-bottom: 0;
-}
-
-.editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote:not(.alignleft):not(.alignright) {
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
-	font-style: italic;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	margin-right: 0;
-	padding-left: 0;
-	padding-right: 40px;
-}
-
-@media screen and (max-width: 767px) {
-	.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
-		padding-right: 20px;
-	}
-}
-
-.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: 20px 40px 20px 0;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
-	margin: 20px 0 20px 40px;
-}
-
-.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;
-	margin-bottom: 20px;
-	color: #24282d;
-	font-family: "Source Sans Pro", sans-serif;
-	font-weight: bold;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h1 {
-	font-size: 1.8em;
-	line-height: 1.2;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h2 {
-	font-size: 1.6em;
-	line-height: 1.3;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h3 {
-	font-size: 1.4em;
-	line-height: 1.4;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h4 {
-	font-size: 1.2em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h5 {
-	font-size: 1em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h6 {
-	font-size: 0.8em;
-}
-
-@media screen and (max-width: 767px) {
-	.wp-block-freeform.block-library-rich-text__tinymce h1 {
-		font-size: 1.7em;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h2 {
-		font-size: 1.5em;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h3 {
-		font-size: 1.3em;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h4 {
-		font-size: 1.1em;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h5 {
-		font-size: .9em;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h6 {
-		font-size: .7em;
-	}
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce pre {
-	background: #f1f2f3;
-	color: #7f8d8c;
-	font-family: "Source Code Pro", monospace;
-	font-size: 22px;
-	letter-spacing: -0.05em;
-	position: relative;
-	overflow: auto;
-	padding: 20px;
-	margin-bottom: 20px;
-	max-width: 100%;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table {
-	border-collapse: collapse;
-	border-bottom: 1px solid #eee;
-	margin: 0 0 40px 0;
-	width: 100%;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce .alternate {
-	background: transparent;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table td {
-	border: 0;
-	border-top: 1px solid #eee;
-	padding: 0.4em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table th {
-	background-color: #f1f2f3;
-	border: 0;
-	border-bottom: 1px solid #f1f2f3;
-	font-weight: bold;
-	padding: 0.4em;
-	text-transform: uppercase;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce th,
-.rtl .wp-block-freeform.block-library-rich-text__tinymce td {
-}
 
 /* Preformatted */
 
@@ -860,17 +811,29 @@
 
 /* Latest Comments */
 
-.editor-block-list__block .wp-block-latest-comments__comment-meta a {
-	box-shadow: none;
-	font-weight: 700;
+.wp-block-latest-comments__comment-meta a {
+	color: #24282d;
+	font-weight: 900;
 	text-decoration: none;
+	text-transform: uppercase;
+}
+
+.wp-block-latest-comments__comment,
+.wp-block-latest-comments__comment-date,
+.wp-block-latest-comments__comment-excerpt p {
+	font-size: inherit;
 }
 
 .wp-block-latest-comments__comment-date {
+	color: #7f8d8c;
+	font-family: "PT Serif", serif;
+	font-size: 0.73em;
+	line-height: 1.3;
+	font-style: italic;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #e6e6e6;
+	border-top: 1px solid #f1f2f3;
 	margin-bottom: 0;
 	padding: 20px 0;
 }