Browse Source

Publication: Minor fixes to Gutenberg implementation, including:
* Update drop cap positioning.
* Add italics to verse block, to differentiate it.
* Update selectors for button blocks, for better custom colour fallbacks.
* Update colour selectors, to account for :visited state.
* Update latest comments block to look more like theme's comments.
* Correct table header background colour; remove unneeded borders from table in editor.

Laurel Fulford 6 years ago
parent
commit
9e4f6cd388
2 changed files with 109 additions and 40 deletions
  1. 62 34
      publication/blocks.css
  2. 47 6
      publication/editor-blocks.css

+ 62 - 34
publication/blocks.css

@@ -91,6 +91,7 @@ Description: Used to style Gutenberg Blocks.
 p.has-drop-cap:not(:focus)::first-letter {
 	font-family: Neuton, serif;
 	font-size: 80px;
+	margin-top: 0.125em;
 }
 
 /* Images */
@@ -221,6 +222,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: 24px;
 	max-width: 100%;
@@ -323,24 +325,16 @@ p.has-drop-cap:not(:focus)::first-letter {
 	box-shadow: none;
 }
 
-.wp-block-button__link:not(.has-background) {
+.wp-block-button__link {
 	background: #ef7d0b;
-}
-
-.wp-block-button__link:not(.has-text-color) {
-	color: #fff;
-}
-
-.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 {
 	color: #fff;
 }
 
-.wp-block-button__link:not(.has-background):active,
-.wp-block-button__link:not(.has-background):focus,
-.wp-block-button__link:not(.has-background):hover {
+.wp-block-button__link:active,
+.wp-block-button__link:focus,
+.wp-block-button__link:hover {
 	background: #222;
+	color: #fff;
 }
 
 .wp-block-button.alignleft {
@@ -412,10 +406,26 @@ hr.wp-block-separator {
 	margin-right: 0;
 }
 
-.editor-block-list__block .wp-block-latest-comments__comment-meta a {
+.wp-block-latest-comments__comment-meta {
+	font-family: Neuton, serif;
+	font-size: 20px;
+	line-height: 1.2;
+}
+
+.wp-block-latest-comments__comment-meta a {
+	color: #222;
+	font-weight: normal;
 	box-shadow: none;
-	font-weight: 700;
-	text-decoration: none;
+}
+
+.wp-block-latest-comments__comment-date {
+	color: #555;
+	font-family: Oswald, sans-serif;
+	font-size: 13px;
+	font-weight: normal;
+	letter-spacing: 0.075em;
+	line-height: 1.8462;
+	text-transform: uppercase;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
@@ -433,6 +443,8 @@ hr.wp-block-separator {
 	margin-bottom: 0;
 }
 
+/* Latest Posts */
+
 .rtl .wp-block-latest-posts {
 	margin-left: 0;
 	margin-right: 0;
@@ -445,111 +457,127 @@ hr.wp-block-separator {
 .has-medium-gray-color,
 .has-medium-gray-color:hover,
 .has-medium-gray-color:focus,
-.has-medium-gray-color:active {
+.has-medium-gray-color:active,
+.has-medium-gray-color:visited {
 	color: #a09a92;
 }
 
 .has-medium-gray-background-color,
 .has-medium-gray-background-color:hover,
 .has-medium-gray-background-color:focus,
-.has-medium-gray-background-color:active {
+.has-medium-gray-background-color:active,
+.has-medium-gray-background-color:visited {
 	background-color: #a09a92;
 }
 
 .has-light-gray-color,
 .has-light-gray-color:hover,
 .has-light-gray-color:focus,
-.has-light-gray-color:active {
+.has-light-gray-color:active,
+.has-light-gray-color:visited {
 	color: #dddddd;
 }
 
 .has-light-gray-background-color,
 .has-light-gray-background-color:hover,
 .has-light-gray-background-color:focus,
-.has-light-gray-background-color:active {
+.has-light-gray-background-color:active,
+.has-light-gray-background-color:visited {
 	background-color: #dddddd;
 }
 
 .has-white-color,
 .has-white-color:hover,
 .has-white-color:focus,
-.has-white-color:active {
+.has-white-color:active,
+.has-white-color:visited {
 	color: #fff;
 }
 
 .has-white-background-color,
 .has-white-background-color:hover,
 .has-white-background-color:focus,
-.has-white-background-color:active {
+.has-white-background-color:active,
+.has-white-background-color:visited {
 	background-color: #fff;
 }
 
 .has-orange-color,
 .has-orange-color:hover,
 .has-orange-color:focus,
-.has-orange-color:active {
+.has-orange-color:active,
+.has-orange-color:visited {
 	color: #ef7d0b;
 }
 
 .has-orange-background-color,
 .has-orange-background-color:hover,
 .has-orange-background-color:focus,
-.has-orange-background-color:active {
+.has-orange-background-color:active,
+.has-orange-background-color:visited {
 	background-color: #ef7d0b;
 }
 
 .has-dark-orange-color,
 .has-dark-orange-color:hover,
 .has-dark-orange-color:focus,
-.has-dark-orange-color:active {
-	color: #712012;
+.has-dark-orange-color:active,
+.has-dark-orange-color:visited {
+	color: #9c8012;
 }
 
 .has-dark-orange-background-color,
 .has-dark-orange-background-color:hover,
 .has-dark-orange-background-color:focus,
-.has-dark-orange-background-color:active {
-	background-color: #712012;
+.has-dark-orange-background-color:active,
+.has-dark-orange-background-color:visited {
+	background-color: #9c8012;
 }
 
 .has-gray-color,
 .has-gray-color:hover,
 .has-gray-color:focus,
-.has-gray-color:active {
+.has-gray-color:active,
+.has-gray-color:visited {
 	color: #85cc36;
 }
 
 .has-gray-background-color,
 .has-gray-background-color:hover,
 .has-gray-background-color:focus,
-.has-gray-background-color:active {
+.has-gray-background-color:active,
+.has-gray-background-color:visited {
 	background-color: #85cc36;
 }
 
 .has-dark-gray-color,
 .has-dark-gray-color:hover,
 .has-dark-gray-color:focus,
-.has-dark-gray-color:active {
+.has-dark-gray-color:active,
+.has-dark-gray-color:visited {
 	color: #787065;
 }
 
 .has-dark-gray-background-color,
 .has-dark-gray-background-color:hover,
 .has-dark-gray-background-color:focus,
-.has-dark-gray-background-color:active {
+.has-dark-gray-background-color:active,
+.has-dark-gray-background-color:visited {
 	background-color: #787065;
 }
 
 .has-black-color,
 .has-black-color:hover,
 .has-black-color:focus,
-.has-black-color:active {
+.has-black-color:active,
+.has-black-color:visited {
 	color: #222;
 }
 
 .has-black-background-color,
 .has-black-background-color:hover,
 .has-black-background-color:focus,
-.has-black-background-color:active {
+.has-black-background-color:active,
+.has-black-background-color:visited {
 	background-color: #222;
 }

+ 47 - 6
publication/editor-blocks.css

@@ -237,6 +237,7 @@
 .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
 	font-family: Neuton, serif;
 	font-size: 80px;
+	margin-top: 0.125em;
 }
 
 /* Images */
@@ -377,6 +378,7 @@
 	color: inherit;
 	font-family: inherit;
 	font-size: inherit;
+	font-style: italic;
 	line-height: inherit;
 	margin-bottom: 24px;
 	max-width: 100%;
@@ -521,6 +523,8 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table {
+	border: 0;
+	border-collapse: collapse;
 	border-top: 1px solid #ddd;
 	margin: 0 0 24px;
 	text-align: left;
@@ -536,13 +540,13 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table td {
+	border: 0;
 	border-bottom: 1px solid #ddd;
 	padding: 6px;
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table th {
 	border: 0;
-	background: #eee;
 	border-bottom: 1px solid #ddd;
 	padding: 6px;
 	font-weight: bold;
@@ -697,6 +701,12 @@
 --------------------------------------------------------------*/
 
 /* Buttons */
+
+.wp-block-button .wp-block-button__link,
+.wp-block-button .editor-rich-text__tinymce.mce-content-body {
+	line-height: 24px;
+}
+
 .wp-block-button .wp-block-button__link {
 	border-radius: 0;
 	border: 0;
@@ -770,26 +780,57 @@
 
 /* Latest Comments */
 
+.wp-block-latest-comments {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.wp-block-latest-comments__comment-meta {
+	font-family: Neuton, serif;
+	font-size: 20px;
+	line-height: 1.2;
+}
+
+.wp-block-latest-comments__comment-meta a {
+	color: #222;
+	font-weight: normal;
+}
+
 .editor-block-list__block .wp-block-latest-comments__comment-meta a {
-	box-shadow: none;
-	font-weight: 700;
 	text-decoration: none;
 }
 
+.wp-block-latest-comments__comment-date {
+	color: #555;
+	font-family: Oswald, sans-serif;
+	font-size: 13px;
+	font-weight: normal;
+	letter-spacing: 0.075em;
+	line-height: 1.8462;
+	text-transform: uppercase;
+}
+
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #ddd;
+	border-top: 1px solid #dddddd;
 	margin-bottom: 0;
 	padding: 12px 0;
 }
 
-.rtl ol.wp-block-latest-comments {
-	margin-right: 0;
+.wp-block-latest-comments .avatar,
+.wp-block-latest-comments__comment-avatar {
+	margin: 0;
 }
 
 .wp-block-latest-comments__comment-excerpt p:last-child {
 	margin-bottom: 0;
 }
 
+.editor-block-list__block ol.wp-block-latest-comments,
+.rtl .editor-block-list__block ol.wp-block-latest-comments {
+	margin-left: 0;
+	margin-right: 0;
+}
+
 /* Latest Posts */
 
 .edit-post-visual-editor .wp-block-latest-posts.is-grid {