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.
This commit is contained in:
Laurel Fulford
parent
e51bf29941
commit
4ea07d0fbe
2 changed files with 71 additions and 69 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue