diff options
Diffstat (limited to 'themes/twentynineteen/sass/blocks/_blocks.scss')
| -rw-r--r-- | themes/twentynineteen/sass/blocks/_blocks.scss | 923 |
1 files changed, 923 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/blocks/_blocks.scss b/themes/twentynineteen/sass/blocks/_blocks.scss new file mode 100644 index 00000000..479ee33d --- /dev/null +++ b/themes/twentynineteen/sass/blocks/_blocks.scss @@ -0,0 +1,923 @@ +/* !Block styles */ + +.entry .entry-content > *, +.entry .entry-summary > * { + margin: 32px 0; + max-width: 100%; + + @include postContentMaxWidth(); + + @include media(tablet) { + margin: 32px 0; + } + + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + &.alignwide { + margin-left: auto; + margin-right: auto; + clear: both; + + @include media(tablet) { + width: 100%; + max-width: 100%; + } + } + + &.alignfull { + position: relative; + left: -#{$size__spacing-unit }; + width: calc( 100% + (2 * #{$size__spacing-unit})); + max-width: calc( 100% + (2 * #{$size__spacing-unit})); + clear: both; + + @include media(tablet) { + margin-top: calc(2 * #{$size__spacing-unit}); + margin-bottom: calc(2 * #{$size__spacing-unit}); + left: calc( -12.5% - 75px ); + width: calc( 125% + 150px ); + max-width: calc( 125% + 150px ); + } + } + + &.alignleft { + /*rtl:ignore*/ + float: left; + max-width: calc(5 * (100vw / 12)); + margin-top: 0; + margin-left: 0; + /*rtl:ignore*/ + margin-right: $size__spacing-unit; + + @include media(tablet) { + max-width: calc(4 * (100vw / 12)); + /*rtl:ignore*/ + margin-right: calc(2 * #{$size__spacing-unit}); + } + } + + &.alignright { + /*rtl:ignore*/ + float: right; + max-width: calc(5 * (100vw / 12)); + margin-top: 0; + margin-right: 0; + /*rtl:ignore*/ + margin-left: $size__spacing-unit; + + @include media(tablet) { + max-width: calc(4 * (100vw / 12)); + margin-right: 0; + /*rtl:ignore*/ + margin-left: calc(2 * #{$size__spacing-unit}); + } + } + &.aligncenter { + margin-left: auto; + margin-right: auto; + + @include postContentMaxWidth(); + + @include media(tablet) { + margin-left: 0; + margin-right: 0; + } + } +} + +/* + * Unset nested content selector styles + * - Prevents layout styles from cascading too deeply + * - helps with plugin compatibility + */ +.entry .entry-content, +.entry .entry-summary { + + .entry-content, + .entry-summary, + .entry { + margin: inherit; + max-width: inherit; + padding: inherit; + + @include media(tablet) { + margin: inherit; + max-width: inherit; + padding: inherit; + } + } +} + +.entry .entry-content { + + //! Paragraphs + p.has-background { + padding: 20px 30px; + } + + //! Audio + .wp-block-audio { + + width: 100%; + + audio { + width: 100%; + } + + &.alignleft audio, + &.alignright audio { + + max-width: (0.33 * $mobile_width); + + @include media(tablet) { + max-width: (0.5 * $tablet_width); + } + + @include media(wide) { + max-width: (0.33 * $desktop_width); + } + } + } + + //! Video + .wp-block-video { + + video { + width: 100%; + } + } + + //! Button + .wp-block-button { + + .wp-block-button__link { + @include button-transition; + border: none; + font-size: $font__size-sm; + @include font-family( $font__heading ); + line-height: $font__line-height-heading; + box-sizing: border-box; + font-weight: bold; + text-decoration: none; + padding: ($size__spacing-unit * .76) $size__spacing-unit; + outline: none; + outline: none; + + &:not(.has-background) { + background-color: $color__background-button; + } + + &:not(.has-text-color) { + color: white; + } + + &:hover { + color: white; + background: $color__background-button-hover; + cursor: pointer; + } + + &:focus { + color: white; + background: $color__background-button-hover; + outline: thin dotted; + outline-offset: -4px; + } + } + + &:not(.is-style-squared) .wp-block-button__link { + border-radius: 5px; + } + + &.is-style-outline .wp-block-button__link, + &.is-style-outline .wp-block-button__link:focus, + &.is-style-outline .wp-block-button__link:active { + @include button-all-transition; + border-width: 2px; + border-style: solid; + + &:not(.has-background) { + background: transparent; + } + + &:not(.has-text-color) { + color: $color__background-button; + border-color: currentColor; + } + } + + &.is-style-outline .wp-block-button__link:hover { + color: white; + border-color: $color__background-button-hover; + &:not(.has-background) { + color: $color__background-button-hover; + } + } + } + + //! Latest posts, categories, archives + .wp-block-archives, + .wp-block-categories, + .wp-block-latest-posts { + padding: 0; + list-style: none; + + li { + color: $color__text-light; + @include 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; + } + } + } + + .wp-block-archives, + .wp-block-categories { + + &.aligncenter { + text-align: center; + } + } + + //! Latest categories + .wp-block-categories { + + ul { + padding-top: ( .75 * $size__spacing-unit ); + } + + li ul { + list-style: none; + padding-left: 0; + } + + @include nestedSubMenuPadding(); + } + + //! 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 preformatted text + .wp-block-preformatted { + font-size: $font__size-xs; + line-height: 1.8; + padding: $size__spacing-unit; + } + + //! Verse + .wp-block-verse { + @include font-family( $font__body ); + font-size: $font__size_base; + line-height: 1.8; + } + + //! Paragraphs + .has-drop-cap { + &:not(:focus):first-letter { + @include font-family( $font__heading ); + font-size: $font__size-xxxl; + line-height: 1; + font-weight: bold; + margin: 0 0.25em 0 0; + } + } + + //! Pullquote + .wp-block-pullquote { + border-color: transparent; + border-width: 2px; + padding: $size__spacing-unit; + + blockquote { + color: $color__text-main; + border: none; + margin-top: calc(4 * #{ $size__spacing-unit}); + margin-bottom: calc(4.33 * #{ $size__spacing-unit}); + margin-right: 0; + padding-left: 0; + } + + p { + font-size: $font__size-lg; + font-style: italic; + line-height: 1.3; + margin-bottom: 0.5em; + margin-top: 0.5em; + + em { + font-style: normal; + } + + @include media(tablet) { + font-size: $font__size-xl; + } + } + + cite { + display: inline-block; + @include font-family( $font__heading ); + line-height: 1.6; + text-transform: none; + color: $color__text-light; + + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); + } + + &.alignleft, + &.alignright { + width: 100%; + padding: 0; + + blockquote { + margin: $size__spacing-unit 0; + padding: 0; + text-align: left; + max-width: 100%; + + p:first-child { + margin-top: 0; + } + } + } + + &.is-style-solid-color { + background-color: $color__link; + padding-left: 0; + padding-right: 0; + + @include media(tablet) { + padding-left: 10%; + padding-right: 10%; + } + + p { + font-size: $font__size-lg; + line-height: 1.3; + margin-bottom: 0.5em; + margin-top: 0.5em; + + @include media(tablet) { + font-size: $font__size-xl; + } + } + + a { + color: $color__background-body; + } + + cite { + color: inherit; + } + + blockquote { + max-width: 100%; + color: $color__background-body; + padding-left: 0; + margin-left: $size__spacing-unit; + margin-right: $size__spacing-unit; + + &.has-text-color p, + &.has-text-color a, + &.has-primary-color, + &.has-secondary-color, + &.has-dark-gray-color, + &.has-light-gray-color, + &.has-white-color { + color: inherit; + } + + @include media(tablet) { + margin-left: 0; + margin-right: 0; + } + } + + &.alignright, + &.alignleft { + + @include media(tablet) { + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); + } + } + + &.alignfull { + + @include media(tablet) { + padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); + padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); + } + } + } + } + + //! Blockquote + .wp-block-quote { + + &:not(.is-large), + &:not(.is-style-large) { + border-width: 2px; + border-color: $color__link; + padding-top: 0; + padding-bottom: 0; + } + + p { + font-size: 1em; + font-style: normal; + line-height: 1.8; + } + + cite { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); + } + + &.is-large, + &.is-style-large { + margin: $size__spacing-unit 0; + padding: 0; + border-left: none; + + p { + font-size: $font__size-lg; + line-height: 1.4; + font-style: italic; + } + + cite, + footer { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); + } + + @include media(tablet) { + margin: $size__spacing-unit 0; + padding: $size__spacing-unit 0; + + p { + font-size: $font__size-lg; + } + } + } + } + + //! Image + .wp-block-image { + max-width: 100%; + + img { + display: block; + } + + .aligncenter { + + @include postContentMaxWidth(); + + @include media(tablet) { + margin: 0; + width: $size__site-tablet-content; + + img { + margin: 0 auto; + } + } + + @include media(desktop) { + width: $size__site-desktop-content; + + img { + margin: 0 auto; + } + } + } + + &.alignfull img { + width: 100vw; + max-width: calc( 100% + (2 * #{$size__spacing-unit})); + + @include media(tablet) { + max-width: calc( 125% + 150px ); + margin-left: auto; + margin-right: auto; + } + } + } + + //! Cover Image + .wp-block-cover-image, + .wp-block-cover { + position: relative; + min-height: 430px; + padding: $size__spacing-unit; + + @include media(tablet) { + padding: $size__spacing-unit 10%; + } + + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + @include font-family( $font__heading ); + font-size: $font__size-lg; + font-weight: bold; + line-height: 1.25; + padding: 0; + color: #fff; + + @include media(tablet) { + font-size: $font__size-xl; + max-width: 100%; + } + } + + &.alignleft, + &.alignright { + width: 100%; + + @include media(tablet) { + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); + } + } + + &.alignfull { + + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + @include postContentMaxWidth(); + } + + @include media(tablet) { + padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); + padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); + + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + padding: 0; + } + } + } + } + + //! Galleries + .wp-block-gallery { + list-style-type: none; + padding-left: 0; + + .blocks-gallery-image:last-child, + .blocks-gallery-item:last-child { + margin-bottom: 16px; + } + + figcaption a { + color: #fff; + } + } + + //! Captions + .wp-block-audio figcaption, + .wp-block-video figcaption, + .wp-block-image figcaption, + .wp-block-gallery .blocks-gallery-image figcaption, + .wp-block-gallery .blocks-gallery-item figcaption { + font-size: $font__size-xs; + @include font-family( $font__heading ); + line-height: $font__line-height-pre; + margin: 0; + padding: ( $size__spacing-unit * .5 ); + text-align: center; + } + + //! Separator + .wp-block-separator, + hr { + background-color: $color__text-light; + border: 0; + height: 2px; + margin-bottom: (2 * $size__spacing-unit); + margin-top: (2 * $size__spacing-unit); + max-width: 2.25em; + text-align: left; + + &.is-style-wide { + max-width: 100%; + @include postContentMaxWidth(); + } + + &.is-style-dots { + max-width: 100%; + @include postContentMaxWidth(); + background-color: inherit; + border: inherit; + height: inherit; + text-align: center; + + &:before { + color: $color__text-light; + font-size: $font__size-lg; + letter-spacing: $font__size-sm; + padding-left: $font__size-sm; + } + } + + /* Remove duplicate rule-line when a separator + * is followed by an H1, or H2 */ + & + h1, + & + h2 { + + &:before { + display: none; + } + } + } + + //! Twitter Embed + .wp-block-embed-twitter { + word-break: break-word; + } + + //! Table + .wp-block-table { + + th, + td { + border-color: $color__text-light; + } + } + + //! File + .wp-block-file { + @include font-family( $font__heading ); + + .wp-block-file__button { + display: table; + @include button-transition; + border: none; + border-radius: 5px; + background: $color__background-button; + font-size: $font__size-base; + @include font-family( $font__heading ); + line-height: $font__line-height-heading; + text-decoration: none; + font-weight: bold; + padding: ($size__spacing-unit * .75) $size__spacing-unit; + color: #fff; + margin-left: 0; + margin-top: calc(0.75 * #{$size__spacing-unit}); + + @include media(desktop) { + font-size: $font__size-base; + padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5); + } + + &:hover { + background: $color__background-button-hover; + cursor: pointer; + } + + &:focus { + background: $color__background-button-hover; + outline: thin dotted; + outline-offset: -4px; + } + } + } + + //! Code + .wp-block-code { + border-radius: 0; + + code { + font-size: $font__size-md; + white-space: pre-wrap; + word-break: break-word; + } + } + + //! Columns + .wp-block-columns { + + &.alignfull { + padding-left: $size__spacing-unit; + padding-right: $size__spacing-unit; + } + + @include media(mobile) { + flex-wrap: nowrap; + } + + @include media(tablet) { + .wp-block-column > * { + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &[class*='has-'] > * { + margin-right: $size__spacing-unit; + + &:last-child { + margin-right: 0; + } + } + + &.alignfull, + &.alignfull .wp-block-column { + padding-left: calc(2 * #{$size__spacing-unit}); + padding-right: calc(2 * #{$size__spacing-unit}); + } + } + } + + //! Latest Comments + .wp-block-latest-comments { + + .wp-block-latest-comments__comment-meta { + @include 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; + } + + &.has-avatars { + + } + + &.has-dates { + + .wp-block-latest-comments__comment-date { + font-size: $font__size-xs; + } + } + + &.has-excerpts { + + } + } + + //! 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; + } + + //! Custom background colors + .has-primary-background-color, + .has-secondary-background-color, + .has-dark-gray-background-color, + .has-light-gray-background-color { + + // Use white text against these backgrounds by default. + color: $color__background-body; + + p, + h1, + h2, + h3, + h4, + h5, + h6, + a { + color: $color__background-body; + } + } + + .has-white-background-color { + color: $color__text-main; + + // Use dark gray text against this background by default. + p, + h1, + h2, + h3, + h4, + h5, + h6, + a { + color: $color__text-main; + } + } + + .has-primary-background-color, + .wp-block-pullquote.is-style-solid-color.has-primary-background-color { + background-color: $color__link; + } + + .has-secondary-background-color, + .wp-block-pullquote.is-style-solid-color.has-secondary-background-color { + background-color: $color__border-link-hover; + } + + .has-dark-gray-background-color, + .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color { + background-color: $color__text-main; + } + + .has-light-gray-background-color, + .wp-block-pullquote.is-style-solid-color.has-light-gray-background-color { + background-color: $color__text-light; + } + + .has-white-background-color, + .wp-block-pullquote.is-style-solid-color.has-white-background-color { + background-color: #FFF; + } + + //! Custom foreground colors + .has-primary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color p { + color: $color__link; + } + + .has-secondary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color p { + color: $color__border-link-hover; + } + + .has-dark-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color p { + color: $color__text-main; + } + + .has-light-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color p { + color: $color__text-light; + } + + .has-white-color, + .wp-block-pullquote.is-style-solid-color blockquote.has-white-color { + color: #FFF; + } +} |