Browse Source

Toujours: Minor fixes to Gutenberg implementation, including:
* Update selectors for button blocks, for better custom colour fallbacks.
* Update drop cap size, to scale when font size does.
* Add visited states to custom colours.
* Position bullets inside of lists when widget blocks are centred.

Laurel Fulford 6 years ago
parent
commit
75f11c47ba
2 changed files with 45 additions and 22 deletions
  1. 34 21
      toujours/blocks.css
  2. 11 1
      toujours/editor-blocks.css

+ 34 - 21
toujours/blocks.css

@@ -36,7 +36,8 @@
 /* Paragraph */
 
 p.has-drop-cap:not(:focus)::first-letter {
-	font-size: 80px;
+	font-size: 5em;
+	margin-top: 0.125em;
 }
 
 /* Images */
@@ -90,7 +91,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .rtl .wp-block-quote {
-	border: 0;
+	border-left: 0;
+	border-right: 4px solid #f0f0f0;
 }
 
 /* Audio */
@@ -274,16 +276,17 @@ p.has-drop-cap:not(:focus)::first-letter {
 	background-color: #2590ec;
 }
 
-.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 {
+	background-color: #444;
 	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 {
-	background-color: #444;
+.wp-block-button__link.has-background:active,
+.wp-block-button__link.has-background:focus,
+.wp-block-button__link.has-background:hover {
+	opacity: 0.8;
 }
 
 .wp-block-button.alignleft {
@@ -400,69 +403,79 @@ hr.wp-block-separator {
 .has-blue-color,
 .has-blue-color:hover,
 .has-blue-color:focus,
-.has-blue-color:active {
+.has-blue-color:active,
+.has-blue-color:visited {
 	color: #2590ec;
 }
 
 .has-blue-background-color,
 .has-blue-background-color:hover,
 .has-blue-background-color:focus,
-.has-blue-background-color:active {
+.has-blue-background-color:active,
+.has-blue-background-color:visited {
 	background-color: #2590ec;
 }
 
 .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: #404040;
 }
 
 .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: #404040;
 }
 
 .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: #666;
 }
 
 .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: #666;
 }
 
 .has-light-gray-color,
 .has-light-gray-color:hover,
 .has-light-gray-color:focus,
-.has-light-gray-color:active {
-	color: #ccc;
+.has-light-gray-color:active,
+.has-light-gray-color:visited {
+	color: #eee;
 }
 
 .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: #ccc;
+.has-light-gray-background-color:active,
+.has-light-gray-background-color:visited {
+	background-color: #eee;
 }
 
 .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-lwhite-background-color:active {
+.has-lwhite-background-color:active,
+.has-lwhite-background-color:visited {
 	background-color: #fff;
 }

+ 11 - 1
toujours/editor-blocks.css

@@ -399,7 +399,8 @@
 /* Paragraph */
 
 .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
-	font-size: 80px;
+	font-size: 5em;
+	margin-top: 0.125em;
 }
 
 .edit-post-visual-editor p {
@@ -809,6 +810,15 @@
 6.0 Blocks - Widgets
 --------------------------------------------------------------*/
 
+/* Categories, Archives & Recent Posts */
+
+[data-align="center"] .wp-block-archives ul,
+[data-align="center"] .wp-block-categories ul,
+[data-align="center"] .wp-block-latest-posts ul {
+	list-style-position: inside;
+	text-align: center;
+}
+
 /* Categories */
 
 .editor-block-list__block[data-align=right] .wp-block-categories__list,