/* Theme Name: Shoreditch Description: Used to style Gutenberg Blocks in the editor. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 General Typography 2.0 General Block Settings 3.0 Blocks - Common Blocks 4.0 Blocks - Formatting 5.0 Blocks - Layout Elements 6.0 Blocks - Widgets 7.0 Blocks - Colors --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 General Typography --------------------------------------------------------------*/ .edit-post-visual-editor .editor-block-list__block, .editor-default-block-appender textarea.editor-default-block-appender__content { font-family: Lato, sans-serif; } /* Font size */ .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: 16px; line-height: 1.5; } @media screen and (min-width: 768px) { .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: 20px; } } /* Color */ .edit-post-visual-editor .editor-block-list__block { color: #73757D; } /* Post title */ .editor-post-title__block .editor-post-title__input { color: #2c313f; font-family: Poppins, sans-serif; font-weight: bold; font-size: 40px; } @media screen and (min-width: 768px) { .editor-post-title__block .editor-post-title__input { font-size: 49px; } } /* 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 { color: #2c313f; font-family: Poppins, sans-serif; font-weight: bold; margin: 0 0 1.875rem; } .edit-post-visual-editor h1, .wp-block-freeform.block-library-rich-text__tinymce h1 { font-size: 40px; } .edit-post-visual-editor h2, .wp-block-freeform.block-library-rich-text__tinymce h2 { font-size: 32px; } .edit-post-visual-editor h3, .wp-block-freeform.block-library-rich-text__tinymce h3 { font-size: 25px; } .edit-post-visual-editor h4, .wp-block-freeform.block-library-rich-text__tinymce h4 { font-size: 20px; } .edit-post-visual-editor h5, .wp-block-freeform.block-library-rich-text__tinymce h5 { font-size: 16px; } .edit-post-visual-editor h6, .wp-block-freeform.block-library-rich-text__tinymce h6 { font-size: 13px; } @media screen and (min-width: 768px) { .edit-post-visual-editor h1, .wp-block-freeform.block-library-rich-text__tinymce h1 { font-size: 49px; } .edit-post-visual-editor h2, .wp-block-freeform.block-library-rich-text__tinymce h2 { font-size: 40px; } .edit-post-visual-editor h3, .wp-block-freeform.block-library-rich-text__tinymce h3 { font-size: 32px; } .edit-post-visual-editor h4, .wp-block-freeform.block-library-rich-text__tinymce h4 { font-size: 25px; } .edit-post-visual-editor h5, .wp-block-freeform.block-library-rich-text__tinymce h5 { font-size: 20px; } .edit-post-visual-editor h6, .wp-block-freeform.block-library-rich-text__tinymce h6 { font-size: 16px; } } /*-------------------------------------------------------------- 2.0 General Block Settings --------------------------------------------------------------*/ /* Main content width */ .wp-block { max-width: 610px; /* 580px + 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: #2c313f; text-decoration: underline; } /* Table styles */ .wp-block-freeform.block-library-rich-text__tinymce table { border-collapse: collapse; } .wp-block-freeform.block-library-rich-text__tinymce table th, .wp-block-freeform.block-library-rich-text__tinymce table td { border-color: #f3f3f3; } .wp-block-freeform.block-library-rich-text__tinymce table th { text-align: center; } /* Quote styles */ .wp-block-freeform.block-library-rich-text__tinymce blockquote { border: 0 solid #3e69dc; border-left-width: 2px; color: inherit; font-style: italic; line-height: 1.5; margin: 0 0 1.5rem; padding-left: 1.5rem; } .wp-block-freeform.block-library-rich-text__tinymce cite { color: #2c313f; font-size: 20px; font-style: italic; } .edit-post-visual-editor .editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote p { font-size: 20px; } @media (min-width: 768px) { .edit-post-visual-editor .editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote p, .wp-block-freeform.block-library-rich-text__tinymce cite { font-size: 25px; } } .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote { border-left-width: 0; border-right-width: 2px; padding-left: 0; padding-right: 1.5rem; } /* List styles */ .wp-block-freeform.block-library-rich-text__tinymce li, .editor-styles-wrapper li { margin-bottom: 0; } /* Code styles */ .wp-block-freeform.block-library-rich-text__tinymce code { background: transparent; } /* Caption styles */ [class^="wp-block-"] figcaption { color: inherit; font-size: 16px; font-style: italic; } [class^="wp-block-"]:not(.wp-block-gallery) figcaption { border-bottom: 1px solid #f3f3f3; margin-top: 0.25em; padding-bottom: 0.25em; } .wp-block:not([data-align="full"]) [class^="wp-block-"]:not(.wp-block-gallery) figcaption { text-align: left; } .rtl .wp-block:not([data-align="full"]) [class^="wp-block-"]:not(.wp-block-gallery) figcaption { text-align: right; } /* Definition List styles */ .wp-block-freeform.block-library-rich-text__tinymce dt { font-weight: bold; } .wp-block-freeform.block-library-rich-text__tinymce dd { margin-left: 1.5em; margin-right: 1.5em; } /* Pre styles */ .wp-block-freeform.block-library-rich-text__tinymce pre { border: 1px solid #f3f3f3; color: #73757D; font-family: Inconsolata, monospace; font-size: 16px; padding: 1.5em; } @media (min-width: 768px) { .wp-block-freeform.block-library-rich-text__tinymce pre { font-size: 20px; } } /* Code, etc styles */ .wp-block-freeform.block-library-rich-text__tinymce code, .wp-block-freeform.block-library-rich-text__tinymce kbd, .wp-block-freeform.block-library-rich-text__tinymce tt, .wp-block-freeform.block-library-rich-text__tinymce var { background: #f3f3f3; font-family: Inconsolata, monospace; font-size: inherit; padding: 0 0.25em; } /* Mark & Ins styles */ .wp-block-freeform.block-library-rich-text__tinymce mark, .wp-block-freeform.block-library-rich-text__tinymce ins { background: #3e69dc; color: #fff; padding: 0 0.25em; text-decoration: none; } /*-------------------------------------------------------------- 3.0 Blocks - Common Blocks --------------------------------------------------------------*/ /* Paragraph */ p.has-drop-cap:not(:focus)::first-letter { font-size: 5em; margin-top: 0.15em; } /* Quote */ .wp-block-quote:not(.is-large):not(.is-style-large), .wp-block-quote.is-large, .wp-block-quote.is-style-large, .rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:left"], .rtl .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: left"], .rtl .wp-block-quote.is-large[style*="text-align:left"], .rtl .wp-block-quote.is-large[style*="text-align: left"], .rtl .wp-block-quote.is-style-large[style*="text-align:left"], .rtl .wp-block-quote.is-style-large[style*="text-align: left"] { border: 0 solid #3e69dc; border-left-width: 2px; color: inherit; font-style: italic; line-height: 1.5; margin: 0 0 1.5rem; padding-left: 1.5rem; } .wp-block-quote:not(.is-large):not(.is-style-large) p { font-size: 20px; } .editor-styles-wrapper .wp-block-quote.is-large p, .editor-styles-wrapper .wp-block-quote.is-style-large p { font-size: 26px; } .wp-block-quote .wp-block-quote__citation { color: #2c313f; font-style: italic; } .wp-block-quote:not(.is-large):not(.is-style-large) .wp-block-quote__citation { font-size: 20px; } .wp-block-quote.is-large .wp-block-quote__citation, .wp-block-quote.is-style-large .wp-block-quote__citation { font-size: 26px } .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:right"], .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: right"], .wp-block-quote.is-large[style*="text-align:right"], .wp-block-quote.is-large[style*="text-align: right"], .wp-block-quote.is-style-large[style*="text-align:right"], .wp-block-quote.is-style-large[style*="text-align:right"], .rtl .wp-block-quote:not(.is-large):not(.is-style-large), .rtl .wp-block-quote.is-large, .rtl .wp-block-quote.is-style-large { border-left-width: 0; border-right-width: 2px; padding-left: 0; padding-right: 1.5rem; } .rtl .wp-block-quote .wp-block-quote__citation { text-align: right; } .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align:center"], .wp-block-quote:not(.is-large):not(.is-style-large)[style*="text-align: center"], .wp-block-quote.is-large[style*="text-align:center"], .wp-block-quote.is-large[style*="text-align: center"], .wp-block-quote.is-style-large[style*="text-align:center"], .wp-block-quote.is-style-large[style*="text-align:center"] { border: 0; padding-left: 0; padding-right: 0; } @media (min-width: 768px) { .wp-block-quote:not(.is-large):not(.is-style-large) p { font-size: 25px; } .editor-styles-wrapper .wp-block-quote.is-large p, .editor-styles-wrapper .wp-block-quote.is-style-large p { font-size: 32px; } .wp-block-quote:not(.is-large):not(.is-style-large) .wp-block-quote__citation { font-size: 26px; } .wp-block-quote.is-large .wp-block-quote__citation, .wp-block-quote.is-style-large .wp-block-quote__citation { font-size: 26px } } /* 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: 1.5em; } /* File */ .wp-block-file__textlink { color: #2c313f; text-decoration: underline; } .wp-block-file .wp-block-file__button { background: #3e69dc; border: 0; border-radius: 5em; color: #fff; font-size: 13px; font-size: 0.8125rem; font-weight: bold; letter-spacing: 0.0625em; line-height: 1.3847; padding: 0.5625rem 1.5em; text-transform: uppercase; } @media (min-width: 768px) { .wp-block-file .wp-block-file__button { font-size: 16px; } } /*-------------------------------------------------------------- 4.0 Blocks - Formatting --------------------------------------------------------------*/ /* Verse */ .wp-block-verse pre { color: #73757D; font-style: italic; } /* Code */ .wp-block-code { border: 1px solid #f3f3f3; border-radius: 0; padding: 1.5em; position: relative; } .wp-block-code .editor-plain-text { background: transparent; color: #73757D; font-family: Inconsolata, monospace; font-size: 16px; } @media (min-width: 768px) { .wp-block-code .editor-plain-text { font-size: 20px; } } /* Preformatted */ .wp-block-preformatted { border: 1px solid #f3f3f3; border-radius: 0; padding: 1.5em; position: relative; } .wp-block-preformatted pre { background: transparent; color: #73757D; font-family: Inconsolata, monospace; font-size: 16px; } @media (min-width: 768px) { .wp-block-preformatted pre { font-size: 20px; } } /* Pullquote */ .wp-block-pullquote { border: 0; padding-left: 0; padding-right: 0; } .wp-block-pullquote blockquote { color: #73757D; font-style: italic; } .wp-block-pullquote__citation { font-style: italic; text-transform: none; } .wp-block-pullquote.alignleft blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, .wp-block-pullquote.alignright blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, .wp-block-pullquote.alignleft blockquote > .editor-rich-text p, .wp-block-pullquote.alignright blockquote > .editor-rich-text p, .wp-block-pullquote__citation{ font-size: 28px; } /* Table */ .wp-block-table th, .wp-block-table td { border-color: #f3f3f3; text-align: center; } .wp-block-table__cell-content { padding: 0.1em 0.25em; } /*-------------------------------------------------------------- 5.0 Blocks - Layout Elements --------------------------------------------------------------*/ /* Buttons */ .wp-block-button__link { background: #3e69dc; color: #fff; } .wp-block-button .wp-block-button__link { font-size: 13px; font-size: 0.8125rem; font-weight: bold; letter-spacing: 0.0625em; line-height: 22.15px; padding: 0.5625rem 1.5em; text-transform: uppercase; } .is-style-outline .wp-block-button__link { color: #3e69dc; } .wp-block-button .editor-rich-text__tinymce.mce-content-body { line-height: 22.15px; } @media (min-width: 768px) { .wp-block-button .wp-block-button__link { font-size: 16px; } } /* Separator */ .wp-block-separator { border-color: #f3f3f3; border-width: 1px; } /*-------------------------------------------------------------- 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; } /* Latest Comments */ .wp-block-latest-comments { margin-left: 0; margin-right: 0; } .wp-block-latest-comments__comment-date { color: inherit; } .wp-block-latest-comments__comment-meta a { box-shadow: none; } .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 { font-size: 80%; } /*-------------------------------------------------------------- 7.0 Blocks - Colors --------------------------------------------------------------*/ .has-blue-color, .has-blue-color:hover, .has-blue-color:focus, .has-blue-color:active, .has-blue-color:visited { color: #3e69dc; } .has-blue-background-color, .has-blue-background-color:hover, .has-blue-background-color:focus, .has-blue-background-color:active, .has-blue-background-color:visited { background-color: #3e69dc; } .has-dark-gray-color, .has-dark-gray-color:hover, .has-dark-gray-color:focus, .has-dark-gray-color:active, .has-dark-gray-color:visited { color: #2c313f; } .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:visited { background-color: #2c313f; } .has-medium-gray-color, .has-medium-gray-color:hover, .has-medium-gray-color:focus, .has-medium-gray-color:active, .has-medium-gray-color:visited { color: #73757D; } .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:visited { background-color: #73757D; } .has-light-gray-color, .has-light-gray-color:hover, .has-light-gray-color:focus, .has-light-gray-color:active, .has-light-gray-color:visited { color: #f3f3f3; } .has-light-gray-background-color, .has-light-gray-background-color:hover, .has-light-gray-background-color:focus, .has-light-gray-background-color:active, .has-light-gray-background-color:visited { background-color: #f3f3f3; } .has-white-color, .has-white-color:hover, .has-white-color:focus, .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-white-background-color:active, .has-white-background-color:visited { background-color: #fff; }