浏览代码

Illustratr: Made some tweaks to the Gutenberg implementation:
* Tidied up some CSS and remove empty selectors
* Updated align full styles to apply to all blocks that can have the class, not just specific ones
* Adjusted the spacing on the left and right of full blocks.
* Fixed underline, button styles in block button in editor.
* Fixed code block styles in editor.
* Tweaked some table and pre styles in the editor.
* Updated Pullquote citation styles in editor.

Laurel Fulford 6 年之前
父节点
当前提交
4ea07d0fbe
共有 2 个文件被更改,包括 71 次插入69 次删除
  1. 35 47
      illustratr/blocks.css
  2. 36 22
      illustratr/editor-blocks.css

+ 35 - 47
illustratr/blocks.css

@@ -31,32 +31,13 @@ Description: Used to style Gutenberg Blocks.
 	text-align: center;
 }
 
-/*--------------------------------------------------------------
-2.0 Blocks - Common Blocks
---------------------------------------------------------------*/
-
-/* Paragraph */
-
-p.has-drop-cap:not(:focus)::first-letter {
-	font-size: 124px;
-}
-
-/* Images */
-
-.wp-block-cover,
-.wp-block-cover.alignleft,
-.wp-block-cover.alignright,
-.wp-block-cover.aligncenter {
-	display: flex;
-}
+/* Alignments */
 
 /* Full Width */
-figure.alignfull,
-.wp-block-cover.alignfull,
-.wp-block-gallery.alignfull,
-.wp-block-embed.is-type-video.alignfull {
-	width: calc(100vw - 40px); /* subtract 40px for body padding */
-	max-width: calc(100vw - 40px);
+
+.alignfull {
+	width: calc(100vw - 52px); /* subtract 52px for body padding */
+	max-width: calc(100vw - 52px);
 	margin-left: 0;
 	margin-right: 0;
 	position: relative;
@@ -64,15 +45,23 @@ figure.alignfull,
 	transform: translateX( -50% );
 }
 
+@media (min-width: 768px) {
+	.alignfull.wp-block-table,
+	.alignfull.wp-block-categories,
+	.alignfull.wp-block-archives,
+	.alignfull.wp-block-latest-posts,
+	.alignfull.wp-block-latest-comments {
+		width: calc(100vw - 100px); /* subtract 100px on text-based blocks for more spacing */
+		max-width: calc(100vw - 100px);
+	}
+}
+
 .wp-block-embed.is-type-video.alignfull iframe {
 	width: 100% !important;
 	height: 100% !important;
 }
 
-.rtl figure.alignfull,
-.rtl .wp-block-cover.alignfull,
-.rtl .wp-block-gallery.alignfull,
-.rtl .wp-block-embed.is-type-video.alignfull {
+.rtl .alignfull {
 	left: auto;
 	right: 50%;
 	transform: translateX(50%);
@@ -82,10 +71,7 @@ figure.alignfull,
 /* Wide Width */
 
 @media (min-width: 1024px) {
-	figure.alignwide,
-	.wp-block-cover.alignwide,
-	.wp-block-gallery.alignwide,
-	.wp-block-embed.is-type-video.alignwide {
+	.alignwide {
 		width: 120%;
 		max-width: 120%;
 		margin-left: -10%;
@@ -99,6 +85,16 @@ figure.alignfull,
 	}
 }
 
+/*--------------------------------------------------------------
+2.0 Blocks - Common Blocks
+--------------------------------------------------------------*/
+
+/* Paragraph */
+
+p.has-drop-cap:not(:focus)::first-letter {
+	font-size: 124px;
+}
+
 /* Gallery */
 
 .wp-block-gallery {
@@ -118,20 +114,6 @@ figure.alignfull,
 	font-style: normal;
 }
 
-.wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
-.wp-block-quote:not(.is-large):not(.is-style-large).alignright {
-}
-
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
-}
-
-.wp-block-quote cite {
-}
-
-.wp-block-quote cite:before {
-}
-
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer,
 .wp-block-quote.is-style-large cite,
@@ -196,7 +178,13 @@ figure.alignfull,
 	color: #fff;
 }
 
-.rtl .wp-block-file * + .wp-block-file__button {
+/* Cover */
+
+.wp-block-cover,
+.wp-block-cover.alignleft,
+.wp-block-cover.alignright,
+.wp-block-cover.aligncenter {
+	display: flex;
 }
 
 /*--------------------------------------------------------------

+ 36 - 22
illustratr/editor-blocks.css

@@ -406,14 +406,15 @@
 /* File */
 
 .wp-block-file__textlink {
-	box-shadow: 0 1px 0 0 currentColor;
 	color: #e06d5e;
+	text-decoration: underline;
 }
 
 .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-weight: 900;
@@ -443,16 +444,25 @@
 /* Code */
 
 .wp-block-code {
-	padding: 0 5px 20px 5px;
 	background: #f1f2f3;
-	font-family: "Source Code Pro", monospace;
 	letter-spacing: -0.05em;
+	padding: 20px;
 	position: relative;
 	overflow: auto;
 	margin-bottom: 20px;
 	max-width: 100%;
 }
 
+.wp-block-code textarea {
+	background: transparent;
+}
+
+.wp-block-code .editor-plain-text {
+	color: #7f8d8c;
+	font-family: "Source Code Pro", monospace;
+	font-size: 22px;
+}
+
 /* Classic */
 
 .wp-block-freeform.block-library-rich-text__tinymce address {
@@ -500,18 +510,6 @@
 	font-style: italic;
 }
 
-.wp-block-freeform.block-library-rich-text__tinymce blockquote cite:before {
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote.aligncenter {
-}
-
 .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 	margin-right: 0;
 	padding-left: 0;
@@ -608,7 +606,9 @@
 
 .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;
@@ -618,6 +618,7 @@
 }
 
 .wp-block-freeform.block-library-rich-text__tinymce table {
+	border-collapse: collapse;
 	border-bottom: 1px solid #eee;
 	margin: 0 0 40px 0;
 	width: 100%;
@@ -634,6 +635,9 @@
 }
 
 .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;
@@ -647,7 +651,9 @@
 
 .editor-block-list__block .wp-block-preformatted pre {
 	background: #f1f2f3;
+	color: #7f8d8c;
 	font-family: "Source Code Pro", monospace;
+	font-size: inherit;
 	letter-spacing: -0.05em;
 	position: relative;
 	overflow: auto;
@@ -665,7 +671,7 @@
 }
 
 .edit-post-visual-editor .wp-block-pullquote p:not(.wp-block-cover-text) {
-	
+
 }
 
 .wp-block-pullquote {
@@ -684,6 +690,13 @@
 	font-size: 26px;
 }
 
+.wp-block-pullquote .wp-block-pullquote__citation {
+	color: #7f8d8c;
+	font-size: 80%;
+	font-style: inherit;
+	text-transform: none;
+}
+
 @media screen and (max-width: 767px) {
 	.wp-block-pullquote {
 		padding-left: 20px;
@@ -729,11 +742,6 @@
 	font-style: italic;
 }
 
-.wp-block-pullquote .wp-block-pullquote__citation:before {
-}
-
-.rtl .editor-block-list__block .wp-block-pullquote blockquote {
-}
 
 /* Table */
 
@@ -758,7 +766,13 @@
 	background: #f1f2f3;
 	font-weight: bold;
 	padding: 10px 20px;
+	border: 0;
 	border-bottom: 1px solid #f1f2f3;
+	text-align: left;
+}
+
+.rtl .editor-block-list__block table.wp-block-table th {
+	text-align: right;
 }
 
 @media screen and (max-width: 767px) {
@@ -873,4 +887,4 @@
 
 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 	margin-bottom: 1em;
-}
+}