/*! Editor Styles */ /* Includes */ @import "1-base/variables"; @import "1-base/mixins"; .block-editor-block-list__block { margin-top: 0; margin-bottom: 0; } /* Structure */ .wp-block { max-width: $default-content-width; } .editor-styles-wrapper { text-rendering: optimizeLegibility; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; padding: 0 !important; .wp-block[data-align="wide"] .wp-block[data-align="wide"], .wp-block[data-align="full"] .wp-block[data-align="wide"] { max-width: $col12; } } .wp-block[data-align="full"] { margin-left: -10px; margin-right: -10px; } .wp-block[data-align="full"] .wp-block[data-align="wide"] { padding-left: $s-6; padding-right: $s-6; @include breakpoint(xl) { padding-left: 0; padding-right: 0; } } .wp-block .wp-block[data-type="core/group"]:not([data-align="full"]):not([data-align="wide"]):not([data-align="left"]):not([data-align="right"]), .wp-block .wp-block[data-type="core/cover"]:not([data-align="full"]):not([data-align="wide"]):not([data-align="left"]):not([data-align="right"]) { margin-left: auto; margin-right: auto; } // Inner blocks of wide and full aligned blocks .wp-block[data-align="full"] .wp-block[data-type="core/group"]:not([data-align="full"]):not([data-align="wide"]), .wp-block[data-align="wide"] .wp-block[data-type="core/group"]:not([data-align="full"]):not([data-align="wide"]) { max-width: 100%; } *[data-align="right"] .wp-block-edit, *[data-align="left"] .wp-block-edit { max-width: 50%; } .wp-block[data-align="wide"], .wp-block.alignwide { max-width: $col12;; .wp-block { max-width: $wide-content-width; } } .wp-block[data-align="full"], .wp-block.alignfull { max-width: none; .wp-block { max-width: 100%; } } .tpl-fullwidth .wp-block { max-width: $wide-content-width; } .wp-block { .tpl-fullwidth & { max-width: $wide-content-width; } } .editor-styles-wrapper .wp-block[data-align="right"] { margin-right: 0; } .editor-styles-wrapper .wp-block[data-align="left"] { margin: 0; } .editor-styles-wrapper .wp-block[data-align="left"], .editor-styles-wrapper .wp-block[data-align="right"] { margin: 0 auto; max-width: $wide-content-width !important; } .edit-post-visual-editor__post-title-wrapper .editor-post-title { max-width: $wide-content-width; @include outer-margins; } /* Typography */ body { @include font-body; color: var(--global--color-text-two); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Headings */ .editor-post-title .editor-post-title__input { @include font-body; line-height: 1; text-align: center; max-width: $col10; } .editor-post-title__input, h1, h2, h3, h4, h5, h6 { color: var(--global--color-text-one); font-weight: normal; line-height: 1; margin-top: 0; margin-bottom: 0; & a { color: var(--global--color-text-one); text-decoration: none; } } .h-bold .editor-post-title__input, .h-bold h1, .h-bold h2, .h-bold h3, .h-bold h4, .h-bold h5, .h-bold h6 { font-weight: bold; } h1.has-xxxxl-font-size { @include font-h-12; } h1.has-xxxl-font-size, h2.has-xxxxl-font-size { @include font-h-11; } h1.has-xxl-font-size, h2.has-xxxl-font-size, h3.has-xxxxl-font-size { @include font-h-10; } h1.has-xl-font-size, h2.has-xxl-font-size, h3.has-xxxl-font-size, h4.has-xxxxl-font-size { @include font-h-9; } h1.has-l-font-size, h2.has-xl-font-size, h3.has-xxl-font-size, h4.has-xxxl-font-size, h5.has-xxxxl-font-size { @include font-h-8; } .editor-post-title__input, h1.has-m-font-size, h2.has-l-font-size, h3.has-xl-font-size, h4.has-xxl-font-size, h5.has-xxxl-font-size, h6.has-xxxxl-font-size { @include font-h-7; } h1, h1.has-s-font-size, h2.has-m-font-size, h3.has-l-font-size, h4.has-xl-font-size, h5.has-xxl-font-size, h6.has-xxxl-font-size { @include font-h-6; } h2, h1.has-xs-font-size, h2.has-s-font-size, h3.has-m-font-size, h4.has-l-font-size, h5.has-xl-font-size, h6.has-xxl-font-size { @include font-h-5; } h3, h1.has-xxs-font-size, h2.has-xs-font-size, h3.has-s-font-size, h4.has-m-font-size, h5.has-l-font-size, h6.has-xl-font-size, .related-wrap .section-title, .comments-area .comments-title { @include font-h-4; } h2.has-xxs-font-size, h3.has-xs-font-size, h4, h4.has-s-font-size, h5.has-m-font-size, h6.has-l-font-size, h1.site-title, .site-title { @include font-h-3; } h3.has-xxs-font-size, h4.has-xs-font-size, h5, h5.has-s-font-size, h6.has-m-font-size { @include font-h-2; } h4.has-xxs-font-size, h5.has-xs-font-size, h5.has-xxs-font-size, h6, h6.has-s-font-size, h6.has-xs-font-size, h6.has-xxs-font-size, h6.has-xxs-font-size { @include font-h-1; } /* Paragraphs */ p, ol, ul { @include font-body-l; &.has-background { @include s-r-7(padding); } &.has-xxs-font-size { @include font-body-2xs; } &.has-xs-font-size { @include font-body-xs; } &.has-s-font-size { @include font-body-s; } &.has-m-font-size { @include font-body-m; } &.has-l-font-size { @include font-body-l; } &.has-xl-font-size { @include font-body-xl; } &.has-xxl-font-size { @include font-body-2xl; } &.has-drop-cap:not(:focus):first-letter { float: left; @include font-body; margin: 5px 8px 0 -8px; line-height: 0.77; text-transform: uppercase; font-weight: normal; font-size: 100px; @include breakpoint(sm) { font-size: 120px; line-height: 0.77; margin: 6px 12px 0 -8px; } } &.intro.has-drop-cap:not(:focus):first-letter { @include breakpoint(sm) { font-size: 142px; } } } dfn, em, i { font-style: italic; } blockquote { margin: 0; padding: 0; } pre { background: rgba(0, 0, 0, 0.15); font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-size: 15px; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } ins, mark { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* Grid */ .col1 { max-width: $col1; &.nogap { max-width: calc(#{$col1} - #{$s-9}); } } .col2 { max-width: $col2; &.nogap { max-width: calc(#{$col2} - #{$s-9}); } } .col3 { max-width: $col3; &.nogap { max-width: calc(#{$col3} - #{$s-9}); } } .col4 { max-width: $col4; &.nogap { max-width: calc(#{$col4} - #{$s-9}); } } .col5 { max-width: $col5; &.nogap { max-width: calc(#{$col5} - #{$s-9}); } } .col6 { max-width: $col6; &.nogap { max-width: calc(#{$col6} - #{$s-9}); } } .col7 { max-width: $col7; &.nogap { max-width: calc(#{$col7} - #{$s-9}); } } .col8 { max-width: $col8; &.nogap { max-width: calc(#{$col8} - #{$s-9}); } } .col9 { max-width: $col9; &.nogap { max-width: calc(#{$col9} - #{$s-9}); } } .col10 { max-width: $col10; &.nogap { max-width: calc(#{$col10} - #{$s-9}); } } .col11 { max-width: $col11; &.nogap { max-width: calc(#{$col11} - #{$s-9}); } } .col12 { max-width: $col12; &.nogap { max-width: calc(#{$col12} - #{$s-9}); } } /* Links */ a { color: currentColor; text-decoration: underline; p &, blockquote:not(.has-text-color) .wp-block-pullquote__citation & { color: var(--global--color-text-two); } h1, h2 &, h3 &, h4 &, h5 &, h6 & { color: var(--global--color-text-one); } } .wp-block-image figcaption a, .wp-block-embed figcaption a, .wp-block-audio figcaption a { &:hover { color: var(--global--color-primary); } } blockquote:not(.has-text-color) .wp-block-pullquote__citation a:hover { color: var(--global--color-primary); } /* Elements */ @media screen and (min-width: 50em) { .editor-post-title:after, .editor-post-title:before { left: -200%; width: 200%; } .editor-post-title:after { display: none; } .editor-post-title>div:after, .editor-post-title>div:before { display: block; } } .editor-post-title textarea { background-color: transparent; } *, *:after, *:before { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } hr { border: 0; height: 1px; margin-bottom: 1.5em; } ol, ul { margin: 0 0 1.5em 3em; padding: 0; } ul { list-style: disc; } ol { list-style: decimal; } ul li, ol li { padding-bottom: $s-4; } li>ol, li>ul { margin-bottom: 0; margin-left: $s-6; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } .image-border img { border: 4px solid var(--global--color-border); } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } /* Forms */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { border: 1px solid #ccc; } textarea { width: 100%; } /* Default Appender */ .editor-default-block-appender .editor-default-block-appender__content { @include font-body; @include font-body-m; } /* Group */ .wp-block-group { &.has-background { padding-left: 0; padding-right: 0; } } /* Media */ .wp-block-image, .wp-block-embed, .wp-block-audio { figcaption { max-width: 100%; @include font-body-xs; margin: 6px 0 0; text-align: center; } } .wp-block-gallery { margin: 0; } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { figcaption { padding: 40px 12px 8px; font-size: 14px; font-weight: 300; } } .wp-block-image { &.ellipse-horizontal { clip-path: ellipse(50% 45% at 50% 50%); } &.ellipse-vertical { clip-path: ellipse(50% 50% at 50% 50%); } } /* Quotes */ .wp-block-pullquote, .wp-block-quote { margin: 0; padding: 0; font-style: normal; blockquote p { @include font-body-m; } p:last-child, blockquote p:last-child { margin: 0; } &:not(.is-large):not(.is-style-large) { border: none; } &.is-large, &.is-style-large p { margin: 0; @include font-body-l; font-style: normal; } cite, footer, .wp-block-quote__citation, .wp-block-pullquote__citation { display: block; margin: 0; padding: $s-4 0 0; font-weight: bold; font-style: normal; text-transform: none; @include font-body-xs; } cite, footer, .wp-block-quote__citation, & blockquote:not(.has-text-color) .wp-block-pullquote__citation { color: var(--global--color-text-two); } } .wp-block-pullquote { text-align: left; @include border-radius-m; color: var(--global--color-text-two); &.is-style-solid-color { &:not(.has-background) { background: var(--global--color-background); } blockquote { max-width: 100%; padding: $s-6; @include border-radius-m; p { @include font-body-m; } } } .alignleft blockquote, .alignright blockquote { padding: 0; } } .wp-block[data-type="core/pullquote"][data-align="right"], .wp-block[data-type="core/pullquote"][data-align="left"] { height: auto; max-height: none; &>.is-block-content { max-width: $col3; } } @media (min-width: 480px) { .wp-block[data-type="core/pullquote"][data-align="right"], .wp-block[data-type="core/pullquote"][data-align="left"] { height: 0; } } @media (min-width: 1360px) { .wp-block[data-type="core/pullquote"][data-align="left"], .wp-block[data-type="core/pullquote"][data-align="right"] { margin: 0 auto; max-width: $wide-content-width; } } /* Table */ .editor-styles-wrapper .wp-block-table { display: table; width: 100%; .wp-block-table__cell-content { padding: 1rem; } &.alignfull { width: 96vw; } td { border: none; padding: 1rem; } table { background: transparent; tr { padding: 1rem; border-bottom: 1px solid var(--global--color-border); &:last-of-type { border-bottom: 0; } } } &.is-style-stripes { border-bottom: none; tbody tr:nth-child(odd) { background-color: var(--global--color-background); border-bottom: none; } table tr { border-bottom: none; } } } /* Cover */ .wp-block-cover-image { height: 75vh; min-height: 400px; @include s-r-8(margin-top); @include s-r-8(margin-bottom); } .wp-block-cover-image-text, .wp-block-cover-image h2 { max-width: $default-content-width; @include font-h-3; } .wp-block-cover-image, .wp-block-cover { .wp-block-cover__inner-container { width: 100%; } } /* Monospace */ .wp-block-code .block-editor-plain-text { background: var(--global--color-code-one); color: var(--global--color-code-two); @include font-code; @include font-body-xs; @include border-radius-m; @include s-r-7(padding); @include breakpoint(sm) { margin-bottom: $s-7; } .block-editor-plain-text { background: transparent; } } .wp-block-preformatted { background-color: var(--global--color-code-two); color: var(--global--color-code-one); max-width: 100%; overflow: auto; @include s-r-7(padding); @include s-r-7(margin-bottom); @include border-radius-m; @include font-code; & pre { margin: 0; padding: 0; background-color: var(--global--color-code-two); color: var(--global--color-code-one); } } .wp-block[data-type="core/verse"] { background: var(--global--color-background); @include border-radius-m; @include font-code; @include font-body-xs; @include font-regular; @include s-r-7(padding); pre { background: transparent; } } .wp-block-verse pre, pre.wp-block-verse { color: var(--global--color-text-two); white-space: nowrap; font-family: inherit; font-size: inherit; line-height: 1; padding: 0; overflow: auto; } /* Separator */ .block-editor-block-list__block[data-type="core/separator"] { max-width: 100%; } .wp-block-separator { border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid; opacity: 1; &.is-style-wide { border: none; } &.is-style-dots { border: none; } &.is-style-dots:before { color: var(--global--color-border); @include font-body-l; letter-spacing: 1em; padding-left: 1em; } } /* Buttons */ .wp-block-button { .wp-block-button__link { @include btn; @include btn-m; @include btn-primary; font-weight: normal; color: var(--global--color-white); } &:not(.is-style-squared) .wp-block-button__link { border-radius: 8px; } &.is-style-outline { .wp-block-button__link { @include btn-outline; background: transparent; box-shadow: none; border: 1px solid; &:hover { color: var(--global--color-primary); fill: var(--global--color-primary); } } } } /* Block category Widgets */ .wp-block-categories, .wp-block-latest-posts__post-date { margin-top: 0; margin-left: 0; margin-right: 0; @include s-r-9 (margin-bottom); } .wp-block-categories ul, .wp-block-latest-posts { padding-left: 2.5em; } .wp-block-categories li, .wp-block-latest-posts li { margin: 0; padding: 0; text-align: left; } .wp-block-categories li a, .wp-block-latest-posts li a { border: none; text-decoration: none; color: var(--global--color-text-two); } .wp-block[data-type="core/archives"] .wp-block-archives, .wp-block[data-type="core/latest-posts"] .wp-block-latest-posts { margin: 0; padding-left: 1.5rem; @include font-body-m; } .wp-block[data-type="core/latest-comments"] .wp-block-latest-comments { margin: 0; padding: 0; .wp-block-latest-comments__comment-excerpt p { @include font-body-s; margin: 0; } } .wp-block[data-type="core/calendar"] { caption { color: var(--global--color-text-one); margin-bottom: $s-4; text-align: center; @include font-bold; } table { margin-bottom: $s-4; background: var(--global--color-white); th { @include font-bold; background: transparent; text-align: center; } tbody { color: var(--global--color-text-two); border-right: 1px solid var(--global--color-border); } td#today { background: var(--global--color-background); } tbody td, th { padding: 16px 8px; border: 1px solid var(--global--color-border); text-align: center; } } } /* Custom Color Palette */ .has-primary-one-color { color: var(--global--color-primary); fill: var(--global--color-primary); } p.has-primary-one-color a { text-decoration: underline; } .has-primary-one-background-color { background: var(--global--color-primary); border-color: var(--global--color-primary); } .has-text-one-color { color: var(--global--color-text-one); fill: var(--global--color-text-one); } .has-text-one-background-color { background: var(--global--color-text-one); border-color: var(--global--color-text-one); } .has-text-two-color { color: var(--global--color-text-two); fill: var(--global--color-text-two); } .has-text-two-background-color { background: var(--global--color-text-two); border-color: var(--global--color-text-two); } .has-border-color { color: var(--global--color-border); fill: var(--global--color-border); } .has-border-background-color { background: var(--global--color-border); border-color: var(--global--color-border); } .has-background-color { color: var(--global--color-background); fill: var(--global--color-background); } .has-background-background-color { background: var(--global--color-background); border-color: var(--global--color-background); } .has-white-color { color: var(--global--color-white); fill: var(--global--color-white); } .has-white-background-color { background: var(--global--color-white); border-color: var(--global--color-white); } .has-black-color { color: var(--global--color-black); fill: var(--global--color-black); } .has-black-background-color { background: var(--global--color-black); border-color: var(--global--color-black); } /* Custom Gradients Palette */ .has-grayish-blue-to-dark-grayish-blue-gradient-background { background: linear-gradient(0deg, rgb(91, 108, 114) 0%, rgb(60, 68, 72) 100%); } .has-soft-orange-to-desaturated-dark-cyan-gradient-background { background: linear-gradient(270deg, rgb(67, 92, 103) 0%, rgb(114, 164, 163) 46%, rgb(251, 162, 137) 74%, rgb(252, 202, 164) 100%); } .has-light-grayish-magenta-to-very-dark-grayish-pink-gradient-background { background: linear-gradient(0deg, rgb(237, 221, 237) 0%, rgb(230, 196, 223) 21%, rgb(196, 165, 191) 50%, rgb(112, 93, 99) 100%); } .has-light-grayish-red-to-dark-red-gradient-background { background: linear-gradient(0deg, rgb(143, 34, 40) 0%, rgb(250, 110, 115) 50%, rgb(219, 191, 193) 100%); } .has-slightly-desaturated-cyan-to-very-soft-red-gradient-background { background: linear-gradient(0deg, rgb(129, 195, 198) 0%, rgb(251, 198, 167) 48%, rgb(250, 168, 182) 100%); } .has-very-soft-orange-to-very-soft-pink-gradient-background { background: radial-gradient(circle at bottom, rgb(251, 219, 190) 0%, rgb(252, 170, 161) 26%, rgb(250, 152, 162) 54%, rgb(246, 182, 211) 75%, rgb(250, 232, 243) 100%); } .has-grayish-violet-to-soft-orange-gradient-background { background: linear-gradient(180deg, rgb(173, 160, 191) 0%, rgb(225, 205, 236) 29%, rgb(243, 206, 225) 51%, rgb(241, 196, 141) 72%, rgb(240, 193, 97) 100%); } .has-light-grayish-red-to-dark-grayish-blue-gradient-background { background: linear-gradient(180deg, rgb(252, 202, 210) 0%, rgb(222, 158, 167) 46%, rgb(118, 119, 135) 100%); } .has-light-grayish-red-to-very-soft-blue-gradient-background { background: linear-gradient(135deg, rgb(237, 204, 211) 0%, rgb(177, 181, 225) 100%); } .has-soft-blue-to-lime-green-gradient-background { background: linear-gradient(0deg, rgb(104, 134, 254) 0%, rgb(255, 255, 255) 49%, rgb(255, 255, 255) 61%, rgb(213, 233, 207) 75%, rgb(8, 179, 82) 100%); } .has-soft-blue-to-dark-moderate-violet-gradient-background { background: linear-gradient(135deg, rgb(103, 125, 239) 0%, rgb(117, 72, 166) 100%); } .has-soft-red-to-very-soft-blue-gradient-background { background: linear-gradient(0deg, rgb(250, 110, 90) 0%, rgb(255, 202, 192) 24%, rgb(255, 255, 255) 48%, rgb(255, 255, 255) 62%, rgb(223, 227, 255) 77%, rgb(157, 144, 250) 100%); } .has-dark-blue-to-mostly-black-blue-gradient-background { background: radial-gradient(circle at bottom, rgb(19, 20, 143) 0%, rgb(13, 11, 24) 100%); } .has-very-soft-blue-to-dark-grayish-blue-gradient-background { background: radial-gradient(circle at bottom, rgb(153, 203, 233) 0%, rgb(121, 132, 157) 100%); } .has-soft-pink-to-mostly-pure-orange-gradient-background { background: radial-gradient(circle at bottom, rgb(253, 79, 156) 0%, rgb(254, 132, 0) 100%); } .has-bright-cyan-to-soft-magenta-gradient-background { background: linear-gradient(0deg, rgb(48, 203, 247) 0%, rgb(254, 128, 254) 100%); } .has-light-red-to-very-light-pink-gradient-background { background: linear-gradient(90deg, rgb(255, 131, 92) 0%, rgb(255, 148, 193) 100%); } .has-very-soft-violet-to-very-soft-pink-gradient-background { background: linear-gradient(90deg, rgb(198, 163, 245) 0%, rgb(248, 162, 199) 100%); }