/*! Calm (Twenty Nineteen) Editor Styles */ /** === Includes === */ @import "sass/variables-site/variables-site"; @import "sass/mixins/mixins-master"; @import "sass/site/header/site-header"; @import "sass/navigation/menu-main-navigation"; @import "sass/typography/headings"; /** === Editor Frame === */ body { background-color: $color__background-body; font-weight: $font__weight_standard; font-size: 1em; .wp-block[data-align="full"] { width: 100%; } @include media(mobile) { .wp-block[data-align="full"] { width: calc( 100% + 90px ); max-width: calc( 100% + 90px ); } } @include media(tablet) { .editor-writing-flow { max-width: 80%; margin: 0 10%; } .wp-block[data-align="wide"] { width: 100%; } .wp-block[data-align="full"] { position: relative; left: calc( -12.5% - 14px ); width: calc( 125% + 116px ); max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages. } .wp-block[data-align="right"] { max-width: 125%; } } } /** === Content Width === */ .wp-block { width: calc(100vw - (2 * #{$size__spacing-unit})); max-width: 100%; @include media(tablet) { width: $size__site-tablet-content; } @include media(desktop) { width: $size__site-desktop-content; } // Only the top level blocks need specific widths, therefore override for every nested block. .wp-block { width: 100%; } } .block-editor-block-list__layout { padding: 0; } /** === Base Typography === */ body { font-size: $font__size_base; font-family: $font__body; line-height: $font__line-height-body; color: $color__text-main; } p { font-size: $font__size_base; //! Font Sizes &.has-small-font-size { font-size: $font__size-sm; } &.has-normal-font-size { font-size: $font__size-md; } &.has-large-font-size { font-size: $font__size-lg; } &.has-huge-font-size { font-size: $font__size-xl; } } h1, h2, h3, h4, h5, h6 { font-family: $font__heading; font-weight: 600; line-height: $font__line-height-heading; margin-top: $size__vertical-spacing-unit; margin-bottom: $size__vertical-spacing-unit; .editor-inner-blocks & { margin-top: 1.375rem; margin-bottom: 1.375rem; } } h1 { font-size: $font__size-lg; } h2 { font-size: $font__size-md; } h3 { font-size: $font__size_base; } h4 { font-size: $font__size-sm; } h5 { font-size: $font__size-xs; } h6 { font-size: $font__size-xxs; } a { @include link-transition; color: $color__link; *:visited { } &:hover, &:active { color: $color__link-hover; outline: 0; text-decoration: none; } &:focus { outline: 0; text-decoration: underline; } } // Use white text against these backgrounds by default. .has-primary-background-color, .has-secondary-background-color, .has-dark-gray-background-color, .has-light-gray-background-color { color: $color__background-body; p, h1, h2, h3, h4, h5, h6, a { color: $color__background-body; } } // Use dark gray text against this background by default. .has-white-background-color { color: $color__text-main; p, h1, h2, h3, h4, h5, h6, a { color: $color__text-main; } } figcaption, .gallery-caption { font-family: $font__heading; font-size: $font__size-xs; line-height: 1.6; color: $color__text-light; } /** === Post Title === */ .editor-post-title { margin-left: auto; margin-right: auto; padding: 0; @include media(tablet) { width: $size__site-tablet-content; } @include media(desktop) { width: $size__site-desktop-content; } } .editor-post-title__block { font-size: $font__size_base; margin: 0; &:before { margin-top: 0; margin-bottom: 0; position: relative; top: 0.5em; } .editor-post-title__input { font-family: $font__heading; font-size: $font__size-md; @include media(tablet) { font-size: $font__size-lg; } font-weight: 600; } } /** === Default Appender === */ .editor-default-block-appender .editor-default-block-appender__content { font-family: $font__body; font-size: $font__size_base; } /** === Heading === */ .wp-block-heading { strong { font-weight: bolder; } } /** === Paragraph === */ .wp-block-paragraph { &.has-drop-cap:not(:focus)::first-letter { font-family: $font__heading; font-size: $font__size-xxxl; line-height: 1; font-weight: bold; margin: 0 0.25em 0 0; } } /** === Table === */ .wp-block-table { font-family: $font__heading; } /** === Cover === */ .wp-block-cover { position: relative; min-height: 380px; padding: $size__spacing-unit; .wp-block-cover__inner-container { padding: 0; color: #fff; a { color: inherit; } strong { font-weight: bolder; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } h1 { font-size: $font__size-xl; } h2 { font-size: $font__size-lg; max-width: 100%; padding: 0; text-align: inherit; &.has-text-align-left { text-align: left; } &.has-text-align-center { text-align: center; } &.has-text-align-right { text-align: right; } } h3 { font-size: $font__size-md; } h4 { font-size: $font__size_base; } h5 { font-size: $font__size-sm; } h6 { font-size: $font__size-xs; } @include media(tablet) { margin-left: auto; margin-right: auto; padding: 0; h1 { font-size: $font__size-xxxl; } h2 { font-size: $font__size-xxl; } h3 { font-size: $font__size-lg; } h4 { font-size: $font__size-md; } h5 { font-size: $font__size_base; } h6 { font-size: $font__size-sm; } } } h2 { text-align: inherit; } @include media(tablet) { padding: $size__spacing-unit 10%; min-height: 620px; } } .wp-block[data-type="core/cover"][data-align="left"], .wp-block[data-type="core/cover"][data-align="right"] { .wp-block-cover__inner-container { width: calc(2 * (100vw / 12)); } .wp-block-cover { width: 100%; max-width: 100%; padding: calc(1.375 * #{$size__spacing-unit}); p { padding-left: 0; padding-right: 0; } @include media(tablet) { padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); } } } .wp-block[data-type="core/cover"][data-align="wide"], .wp-block[data-type="core/cover"][data-align="full"] { @include media(tablet) { .wp-block-cover__inner-container { max-width: 100%; } } @include media(desktop) { .wp-block-cover__inner-container { max-width: 100%; } } } .wp-block[data-type="core/cover"][data-align="full"] { @include media(tablet) { .wp-block-cover { padding-left: calc(10% + 64px); padding-right: calc(10% + 64px); } } } /** === Gallery === */ .wp-block-gallery { .blocks-gallery-image figcaption, .blocks-gallery-item figcaption, .gallery-item .gallery-caption { font-size: $font__size-xs; line-height: 1.6; } } /** === Button === */ .wp-block-button { .wp-block-button__link { line-height: 1.8; font-family: $font__heading; font-size: $font__size-sm; font-weight: bold; } &:not(.is-style-outline) .wp-block-button__link { background: $color__background-button; } &:not(.is-style-squared) .wp-block-button__link { border-radius: 5px; } &.is-style-outline, &.is-style-outline:hover, &.is-style-outline:focus, &.is-style-outline:active { background: transparent; color: $color__background-button; .wp-block-button__link { background: transparent; &:not(.has-text-color) { color: $color__background-button; } } } } /** === Blockquote === */ .wp-block-quote { &:not(.is-large):not(.is-style-large) { border-width: 2px; border-color: $color__link; } &.is-large, &.is-style-large { margin-top: $font__size-xxl; margin-bottom: $font__size-xxl; } &.is-large p, &.is-style-large p { font-size: $font__size-lg; line-height: 1.3; margin-bottom: 0.5em; margin-top: 0.5em; } cite, footer, .wp-block-quote__citation { font-family: $font__heading; font-size: $font__size-xs; line-height: 1.6; color: $color__text-light; } } /** === Pullquote === */ .wp-block-pullquote { border-color: transparent; border-width: 2px; color: #000; blockquote { margin-top: calc(3 * #{ $size__spacing-unit}); margin-bottom: calc(3.33 * #{ $size__spacing-unit}); hyphens: auto; word-break: break-word; } &:not(.is-style-solid-color) .wp-block-pullquote__citation { color: $color__text-light; } &.is-style-solid-color { blockquote { width: calc(100% - (2 * #{ $size__spacing-unit})); max-width: calc( 100% - (2 * #{ $size__spacing-unit})); a, &.has-text-color p, &.has-text-color a { color: inherit; } &:not(.has-text-color) { color: $color__background-body; } @include media(tablet) { max-width: 80%; } } &:not(.has-background-color) { background-color: $color__link; } } } .wp-block[data-type="core/pullquote"], .wp-block[data-type="core/pullquote"][data-align="left"], .wp-block[data-type="core/pullquote"][data-align="right"] { blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, blockquote > .editor-rich-text p, p { font-size: $font__size-lg; font-style: italic; line-height: 1.3; margin-bottom: 0.5em; margin-top: 0.5em; @include media(tablet) { font-size: $font__size-xl; } } .wp-block-pullquote__citation { font-family: $font__heading; font-size: $font__size-xs; line-height: 1.6; text-transform: none; } em { font-style: normal; } } .wp-block[data-type="core/pullquote"][data-align="left"], .wp-block[data-type="core/pullquote"][data-align="right"] { .editor-block-list__block-edit { width: calc(4 * (100vw / 12)); max-width: 50%; .wp-block-pullquote:not(.is-style-solid-color) { padding: 0; } .wp-block-pullquote.is-style-solid-color { padding: 1em; } } blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, blockquote > .editor-rich-text p, p, .wp-block-pullquote__citation { text-align: left; } } .wp-block[data-type="core/pullquote"][data-align="full"] { @include media(tablet) { .wp-block-pullquote blockquote { max-width: calc(80% - 128px); } } } /** === File === */ .wp-block-file { font-family: $font__heading; .wp-block-file__textlink { text-decoration: underline; color: $color__link; &:hover { color: $color__link-hover; text-decoration: none; } } .wp-block-file__button { display: table; line-height: 1.8; font-size: $font__size-sm; font-weight: bold; background-color: $color__link; border-radius: 5px; } .wp-block-file__button-richtext-wrapper { display: block; margin-top: calc(0.75 * #{$size__spacing-unit}); margin-left: 0; } } /** === Verse === */ .wp-block-verse, .wp-block-verse pre { padding: 0; } /** === Code === */ .wp-block-code { border-radius: 0; } /** === Table === */ .wp-block-table { td, th { border-color: $color__text-light; } } /** === Separator === */ .wp-block-separator, hr { height: 2px; margin-bottom: (2.75 * $size__spacing-unit); margin-top: (2.75 * $size__spacing-unit); text-align: left; max-width: calc(6*(100vw/12) - 28px) !important; border: 0; &:after { background-color: $color__background-hr; content: ''; display: block; height: 2px; max-width: 3.25em; } &.is-style-wide { background-color: $color__background-hr; @include postContentMaxWidth(); &:after { display: none; } } &.is-style-dots { @include postContentMaxWidth(); background-color: inherit; border: inherit; height: inherit; text-align: center; &:before { color: $color__background-hr; font-size: $font__size-lg; letter-spacing: $font__size-sm; padding-left: $font__size-sm; } &:after { display: none; } } /* Remove duplicate rule-line when a separator * is followed by an H1, or H2 */ & + h1, & + h2 { &:before { display: none; } } } /* Remove duplicate rule-line when a separator * is followed by an H1, or H2 */ .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before, .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before { display: none; } /** === Latest Posts, Archives, Categories === */ ul.wp-block-archives, .wp-block-categories, .wp-block-latest-posts { padding: 0; list-style-type: none; ul { padding: 0; list-style-type: none; } li { color: $color__text-light; font-family: $font__heading; font-size: calc(#{$font__size_base} * #{$font__size-ratio}); font-weight: bold; line-height: $font__line-height-heading; padding-bottom: ( .75 * $size__spacing-unit ); &.menu-item-has-children, &:last-child { padding-bottom: 0; } a { text-decoration: none; } ul { padding-left: $size__spacing-unit; } } } .wp-block-categories { ul { padding-top: ( .75 * $size__spacing-unit ); @include nestedSubMenuPadding(); } li ul { list-style: none; padding-left: 0; margin-bottom: ( -.75 * $size__spacing-unit ); } } /** === Latest Posts grid view === */ .wp-block-latest-posts.is-grid { li { border-top: 2px solid $color__border; padding-top: (1 * $size__spacing-unit); margin-bottom: (2 * $size__spacing-unit); a { &:after { content: ''; } } &:last-child { margin-bottom: auto; a:after { content: ''; } } } } /** === Latest Comments === */ .wp-block-latest-comments { .wp-block-latest-comments__comment-meta { font-family: $font__heading; font-weight: bold; .wp-block-latest-comments__comment-date { font-weight: normal; } } .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: $font__size-xs; } } /** === Site Title Block === */ .wp-block-a8c-site-title { text-align: center; } /** === Site Description Block === */ .wp-block-a8c-site-description { text-align: center; margin: 0; } /** === Classic Editor === */ /* Properly center-align captions in the classic-editor block */ .wp-caption { dd { color: $color__text-light; font-size: $font__size-xs; font-family: $font__heading; line-height: $font__line-height-pre; margin: 0; padding: ( $size__spacing-unit * .5 ); text-align: left; text-align: center; -webkit-margin-start: 0px; margin-inline-start: 0px; } } .wp-block-freeform { /* Add style for galleries in classic-editor block */ blockquote { border-left: 2px solid $color__link; cite { font-family: $font__heading; font-size: $font__size-xs; font-style: normal; line-height: 1.6; color: $color__text-light; } } } /* Make sure our non-latin font overrides don't overwrite the iconfont used in the classic editor toolbar */ .wp-block[data-type="core/freeform"] .mce-btn i { font-family: dashicons !important; } /** === Media and Text Block === */ .wp-block-media-text { background-color: $color__background-body-dark; color: $color__text-light; .editor-inner-blocks { align-self: start; padding-top: 32px; padding-bottom: 32px; } &:before { content: ''; position: absolute; left: 0; width: 100%; border-top: 32px solid $color__background-body; border-bottom: 32px solid $color__background-body; height: 100%; } &.has-media-on-the-right { background-color: $color__background-body-light; color: $color__text-main; } .editor-block-list__block { margin: 0; &:first-child { .components-autocomplete { > :first-child { &:before { border-width: 1px; border-style: solid; border-color: inherit; content: ""; display: block; height: 2px; margin: 1.46rem 0 1rem; width: 20px; } } } } } //! Font Sizes .has-small-font-size { font-size: $font__size-sm; } .has-normal-font-size { font-size: $font__size-md; } .has-large-font-size { font-size: $font__size-lg; } .has-huge-font-size { font-size: $font__size-xl; } } // Remove spacing between consecutive Media & Text blocks. [data-type="core/media-text"] { & + [data-type="core/media-text"] { margin-top: -32px; } a { color: inherit; } } /** === Mailchimp Block - Temp Fix === */ .wp-block-jetpack-mailchimp { p { font-size: $font__size-xs; } } /** === Business Hours Block - Temp Fix === */ .wp-block-jetpack-business-hours { dt, dd { float: left; } dt { clear: both; font-weight: bold; margin-right: ( $size__spacing-unit * .5 ); } dd { margin: 0; } }