/* * Theme Name: Illustratr * Description: Gutenberg Block Editor Styles */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 General Typography 2.0 General Block Styles 3.0 Blocks - Common Blocks 4.0 Blocks - Formatting 5.0 Blocks - Layout Elements 6.0 Blocks - Widgets --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 General Typography --------------------------------------------------------------*/ .edit-post-visual-editor .editor-block-list__block, .edit-post-visual-editor .editor-block-list__block p, .editor-default-block-appender textarea.editor-default-block-appender__content { font-family: "Source Sans Pro", sans-serif; line-height: 1.5; font-size: 22px; } .edit-post-visual-editor .editor-block-list__block { color: #7f8d8c; } @media screen and (max-width: 767px) { .edit-post-visual-editor .editor-block-list__block, .edit-post-visual-editor .editor-block-list__block p, .editor-default-block-appender textarea.editor-default-block-appender__content { font-size: 18px; } } .alignleft { display: inline; float: left; margin: 20px 40px 20px 0; } .alignright { display: inline; float: right; margin: 20px 0 40px 20px; } .aligncenter { margin-left: auto; margin-right: auto; } /* Title */ .editor-post-title__block .editor-post-title__input { clear: both; margin-bottom: 20px; color: #24282d; font-family: "Source Sans Pro", sans-serif; font-weight: 900; font-size: 1.2em; } @media screen and ( min-width: 850px ) { .editor-post-title__block .editor-post-title__input { font-size: 32px; } } /* Headings */ .edit-post-visual-editor h1, .wp-block-freeform.block-library-rich-text__tinymce h1, .edit-post-visual-editor h2, .wp-block-freeform.block-library-rich-text__tinymce h2, .edit-post-visual-editor h3, .wp-block-freeform.block-library-rich-text__tinymce h3, .edit-post-visual-editor h4, .wp-block-freeform.block-library-rich-text__tinymce h4, .edit-post-visual-editor h5, .wp-block-freeform.block-library-rich-text__tinymce h5, .edit-post-visual-editor h6, .wp-block-freeform.block-library-rich-text__tinymce h6 { clear: both; margin-bottom: 20px; color: #24282d; font-family: "Source Sans Pro", sans-serif; font-weight: bold; } .edit-post-visual-editor h1, .wp-block-freeform.block-library-rich-text__tinymce h1 { font-size: 1.8em; line-height: 1.2; } .edit-post-visual-editor h2, .wp-block-freeform.block-library-rich-text__tinymce h2 { font-size: 1.6em; line-height: 1.3; } .edit-post-visual-editor h3, .wp-block-freeform.block-library-rich-text__tinymce h3 { font-size: 1.4em; line-height: 1.4; } .edit-post-visual-editor h4, .wp-block-freeform.block-library-rich-text__tinymce h4 { font-size: 1.2em; } .edit-post-visual-editor h5, .wp-block-freeform.block-library-rich-text__tinymce h5 { font-size: 1em; } .edit-post-visual-editor h6, .wp-block-freeform.block-library-rich-text__tinymce h6 { font-size: 0.8em; } @media screen and (max-width: 767px) { .edit-post-visual-editor h1 { font-size: 1.7em; } .edit-post-visual-editor h2 { font-size: 1.5em; } .edit-post-visual-editor h3 { font-size: 1.3em; } .edit-post-visual-editor h4 { font-size: 1.1em; } .edit-post-visual-editor h5 { font-size: .9em; } .edit-post-visual-editor h6 { font-size: .7em; } } /* Paragraphs */ .edit-post-visual-editor p { margin: 0 0 40px; } .edit-post-visual-editor blockquote p { margin-bottom: 40px; } /* Images */ .wp-block-image figcaption { margin: 10px 0 0; text-align: center; color: #7f8d8c; font-family: "PT Serif", serif; font-size: 0.73em; line-height: 1.3; font-style: italic; text-align: center; } /*-------------------------------------------------------------- 2.0 General Block Styles --------------------------------------------------------------*/ /* Main column width */ .wp-block { max-width: 870px; /* 840px + 30px to account for padding */ } @media screen and (max-width: 959px) and (min-width: 768px) { .wp-block { max-width: 678px; /* 648px + 30px to account for padding */ } } /* Link styles */ .edit-post-visual-editor a, .editor-block-list__block a, .wp-block-freeform.block-library-rich-text__tinymce a { color: #e06d5e; } .edit-post-visual-editor a:hover, .edit-post-visual-editor a:focus, .edit-post-visual-editor a:active, .editor-block-list__block a:hover, .editor-block-list__block a:focus, .editor-block-list__block a:active, .wp-block-freeform.block-library-rich-text__tinymce a:hover, .wp-block-freeform.block-library-rich-text__tinymce a:focus, .wp-block-freeform.block-library-rich-text__tinymce a:active { color: #7f8d8c; } /* List styles */ .edit-post-visual-editor ul:not(.wp-block-gallery), .editor-block-list__block ul:not(.wp-block-gallery), .block-library-list ul, .edit-post-visual-editor ol, .editor-block-list__block ol, .block-library-list ol { margin: 0 0 20px; padding: 0; } .block-library-list .editor-rich-text__tinymce { margin: 0; padding: 0; } .edit-post-visual-editor ul:not(.wp-block-gallery), .editor-block-list__block ul:not(.wp-block-gallery), .block-library-list ul { list-style: disc inside; } .edit-post-visual-editor ol, .editor-block-list__block ol, .block-library-list ol { list-style: decimal inside; } .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul, .editor-block-list__block ul:not(.wp-block-gallery) li > ul, .block-library-list li > ul, .edit-post-visual-editor li > ol, .editor-block-list__block li > ol, .block-library-list li > ol { margin-bottom: 0; margin-left: 40px; } @media screen and (max-width: 767px) { .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul, .editor-block-list__block ul:not(.wp-block-gallery) li > ul, .block-library-list li > ul, .edit-post-visual-editor li > ol, .editor-block-list__block li > ol, .block-library-list li > ol { margin-left: 20px; } } .rtl .edit-post-visual-editor ul:not(.wp-block-gallery), .rtl .editor-block-list__block ul:not(.wp-block-gallery), .rtl .block-library-list ul, .rtl .edit-post-visual-editor ol, .rtl .editor-block-list__block ol, .rtl .block-library-list ol { margin-left: 0; margin-right: 40px; padding: 0; } @media screen and (max-width: 767px) { .rtl .edit-post-visual-editor ul:not(.wp-block-gallery), .rtl .editor-block-list__block ul:not(.wp-block-gallery), .rtl .block-library-list ul, .rtl .edit-post-visual-editor ol, .rtl .editor-block-list__block ol, .rtl .block-library-list ol { margin-left: 0; margin-right: 20px; padding: 0; } } /* Captions */ [class^="wp-block-"] figcaption { margin: 10px 0 0; text-align: center; color: #7f8d8c; font-family: "PT Serif", serif; font-size: 0.73em; line-height: 1.3; font-style: italic; text-align: center; } /* Address styles */ .wp-block-freeform.block-library-rich-text__tinymce address { margin-bottom: 20px; } /* List styles */ .wp-block-freeform.block-library-rich-text__tinymce ol { list-style: decimal; margin-left: 0; padding-left: 40px; } @media screen and (max-width: 767px) { .wp-block-freeform.block-library-rich-text__tinymce ol { padding-left: 20px; } } /* Blockquote styles */ .wp-block-freeform.block-library-rich-text__tinymce blockquote { padding-left: 40px; margin: 0; font-family: "PT Serif", serif; font-size: 26px; border-left: 2px solid #e06d5e; } @media screen and (max-width: 767px) { .wp-block-freeform.block-library-rich-text__tinymce blockquote { padding-left: 20px; font-size: 21px; } } .wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child { margin-bottom: 0; } .wp-block-freeform.block-library-rich-text__tinymce blockquote cite { font-style: italic; } .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote { border-left: 0; border-right: 2px solid #e06d5e; margin-right: 0; padding-left: 0; padding-right: 40px; } @media screen and (max-width: 767px) { .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote { padding-right: 20px; } } .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft { float: left; } .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright { float: right; } .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft { margin: 20px 40px 20px 0; } .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright { margin: 20px 0 20px 40px; } /* Pre styles */ .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; padding: 20px; margin-bottom: 20px; max-width: 100%; } /* Table styles */ .wp-block-freeform.block-library-rich-text__tinymce table { border-collapse: collapse; border-bottom: 1px solid #eee; margin: 0 0 40px 0; width: 100%; } .wp-block-freeform.block-library-rich-text__tinymce table td { border: 0; border-top: 1px solid #eee; padding: 0.4em; } .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; } /* Definition List styles */ .wp-block-freeform.block-library-rich-text__tinymce dt { font-weight: bold; } /*-------------------------------------------------------------- 3.0 Blocks - Common Blocks --------------------------------------------------------------*/ /* Paragraph */ .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter { font-size: 124px; } /* Quote */ .wp-block-quote) { margin: 0; padding-left: 40px; border-left: 2px solid #e06d5e; } .wp-block-quote { padding-left: 40px; margin: 0; font-family: "PT Serif", serif; font-size: 26px; border-left: 2px solid #e06d5e; } @media screen and (max-width: 767px) { .wp-block-quote { padding-left: 20px; font-size: 21px; } } .edit-post-visual-editor .editor-block-list__block blockquote p { font-family: "PT Serif", serif; font-size: 26px; font-style: normal; } @media screen and (max-width: 767px) { .edit-post-visual-editor .editor-block-list__block blockquote p { font-size: 21px; } } .editor-block-list__block .wp-block-quote__citation { font-style: italic; font-size: 80%; } .editor-block-list__block .wp-block-quote em, .editor-block-list__block .wp-block-quote i { font-style: normal; } .editor-block-list__block .wp-block-quote > :last-child { margin-bottom: 0; } .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding-left: 40px; } .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large, .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large, .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p, .edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p { font-style: normal; font-size: 32px; } .editor-block-list__block .wp-block-quote.is-large p, .editor-block-list__block .wp-block-quote.is-style-large p { margin-bottom: 20px; } .rtl .wp-block-quote, .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] { border-left: 0; border-right: 2px solid #e06d5e; padding: 0 20px 0 0; } .rtl .wp-block-quote[style*="text-align:left"], .rtl .wp-block-quote[style*="text-align: left"] { border-left: 2px solid #e06d5e; border-right: 0; padding: 0 0 0 40px; } .wp-block-quote[style*="text-align:center"], .wp-block-quote[style*="text-align: center"] { border: 0; padding: 0; } @media screen and (max-width: 767px) { .rtl .wp-block-quote, .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] { padding: 0 20px 0 0; } .rtl .wp-block-quote[style*="text-align:left"], .rtl .wp-block-quote[style*="text-align: left"] { padding: 0 0 0 20px; } } /* Cover */ .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text, .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-text, .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image h2, .edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-image-text, .edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-text, .edit-post-visual-editor .editor-block-list__block .wp-block-cover h2 { font-size: 2.0em; /* Cover images inherit the paragraph size; this resets it */ } /* File */ .wp-block-file__textlink { color: #e06d5e; text-decoration: underline; } .wp-block-file .wp-block-file__button { background: #464d4d; border: 1px solid #464d4d; border-radius: 0; color: white; font-size: 18px; font-weight: 900; padding: 10px 20px; text-transform: uppercase; } /* Blog Posts */ .wp-block-a8c-blog-posts .entry-title { text-trasform: uppercase; } /*-------------------------------------------------------------- 4.0 Blocks - Formatting --------------------------------------------------------------*/ /* Verse */ .wp-block-verse pre { background: transparent; color: inherit; font-family: "PT Serif", serif; font-style: italic; line-height: inherit; margin-bottom: 40px; max-width: 100%; overflow: auto; padding: 0; } /* Code */ .wp-block-code { background: #f1f2f3; border: 0; border-radius: 0; 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; } /* Preformatted */ .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; padding: 20px; margin-bottom: 20px; max-width: 100%; } /* Pullquote */ .editor-block-list__block .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; } .wp-block-pullquote { padding-left: 0; padding-top: 40px; padding-bottom: 40px; margin: 0 0 20px; font-family: "PT Serif", serif; font-size: 26px; border-left: 0; border-top: 2px solid #e06d5e; border-bottom: 2px solid #e06d5e; } .wp-block-pullquote blockquote { 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; font-size: 21px; } .wp-block-pullquote blockquote { font-size: 21px; } } .wp-block-pullquote.alignleft { margin-right: 40px; } @media screen and (min-width: 1260px) { .wp-block-pullquote.alignleft { margin-left: -130px; } } .wp-block-pullquote.alignright { margin-left: 40px; } @media screen and (min-width: 1260px) { .wp-block-pullquote.alignright { margin-right: -130px; } } .wp-block-pullquote blockquote > .editor-rich-text p { color: inherit; margin: 0; } .wp-block-pullquote.alignleft blockquote > .editor-rich-text p, .wp-block-pullquote.alignright blockquote > .editor-rich-text p { font-size: 26px; } .wp-block-pullquote .wp-block-pullquote__citation { font-style: italic; } /* Table */ .editor-block-list__block .wp-block-table__cell-content { padding: 0; } .editor-block-list__block table.wp-block-table { display: table; margin: 0 0 20px; width: 100%; border-top: 1px solid #f1f2f3; } .editor-block-list__block table.wp-block-table td { border: 0; padding: 10px 20px; border-bottom: 1px solid #f1f2f3; } .editor-block-list__block table.wp-block-table th { 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) { .editor-block-list__block table.wp-block-table th, .editor-block-list__block table.wp-block-table td { padding: 5px 10px; } } /*-------------------------------------------------------------- 5.0 Blocks - Layout Elements --------------------------------------------------------------*/ /* Buttons */ .wp-block-button .wp-block-button__link { padding: 10px 20px; display: inline-block; text-transform: uppercase; font-weight: 900; } .wp-block-button__link { background: #464d4d; color: #fff; } .is-style-outline .wp-block-button__link { border-color: currentColor; } .is-style-outline .wp-block-button__link:not(.has-text-color) { color: #464d4d; } /* Separator */ .wp-block-separator { margin-bottom: 20px; height: 1px; background: #f1f2f3; border: 0; max-width: 66%; } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 66%; } .wp-block-separator.is-style-wide { max-width: 100%; } /*-------------------------------------------------------------- 6.0 Blocks - Widgets --------------------------------------------------------------*/ /* General Widget styles */ .edit-post-visual-editor [data-align="center"] .wp-block-categories__list, .edit-post-visual-editor [data-align="center"] .wp-block-archives, .edit-post-visual-editor [data-align="center"] .wp-block-lastest-posts { list-style-position: inside; } /* Categories */ .editor-block-list__block[data-align=right] .wp-block-categories__list, .editor-block-list__block[data-align=left] .wp-block-categories__list { padding: 0; } /* Latest Comments */ .wp-block-latest-comments__comment-meta a { color: #24282d; font-weight: 900; text-decoration: none; text-transform: uppercase; } .wp-block-latest-comments__comment, .wp-block-latest-comments__comment-date, .wp-block-latest-comments__comment-excerpt p { font-size: inherit; } .wp-block-latest-comments__comment-date { color: #7f8d8c; font-family: "PT Serif", serif; font-size: 0.73em; line-height: 1.3; font-style: italic; } .wp-block-latest-comments .wp-block-latest-comments__comment { border-top: 1px solid #f1f2f3; margin-bottom: 0; padding: 20px 0; } .wp-block-latest-comments__comment-excerpt p:last-child { margin-bottom: 0; } /* Latest Posts */ .edit-post-visual-editor .wp-block-latest-posts.is-grid { list-style: none; margin-left: 0; margin-right: 0; } .edit-post-visual-editor .wp-block-latest-posts.is-grid li { margin-bottom: 1em; }