From 4ea07d0fbe2b126aa60b430b579e1bdfe9ce1cdd Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 6 Nov 2018 09:41:34 -0800 Subject: [PATCH] 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. --- illustratr/blocks.css | 82 +++++++++++++++--------------------- illustratr/editor-blocks.css | 58 +++++++++++++++---------- 2 files changed, 71 insertions(+), 69 deletions(-) diff --git a/illustratr/blocks.css b/illustratr/blocks.css index ca147d6b8..3b9d556f6 100644 --- a/illustratr/blocks.css +++ b/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; } /*-------------------------------------------------------------- diff --git a/illustratr/editor-blocks.css b/illustratr/editor-blocks.css index 971dd719b..a12120c2f 100644 --- a/illustratr/editor-blocks.css +++ b/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; -} \ No newline at end of file +}