/* !Block styles */ .entry .entry-content > *, .entry .entry-summary > * { margin: $size__vertical-spacing-unit 0; max-width: 100%; @include postContentMaxWidth(); @include media(tablet) { margin: $size__vertical-spacing-unit auto; } > *: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: $size__vertical-spacing-unit; margin-bottom: $size__vertical-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; } */ } } /* * Make sure the first block has margin-top: 0 */ .entry:not(.has-post-thumbnail) .entry-content > :first-child { margin-top: 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 { //! Headers & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 { margin: $size__vertical-spacing-unit auto; text-align: center; } & > h2 { font-size: $font__size-md; font-weight: 700; } //! 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%; } } .wp-block-media-text { margin: 0 auto; &:nth-child(odd) { background-color: $color__background-media-text; color: $color__text-media; } &:nth-child(even) { background-color: $color__background-media-text-alt; } &.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media { grid-row: 1; } &.alignfull { .wp-block-media-text__content { padding: 8% 1rem; @include media(tablet) { padding: 0 #{2 * $size__vertical-spacing-unit} 0 0; } } &.has-media-on-the-right .wp-block-media-text__content { @include media(tablet) { padding: 0 0 0 #{2 * $size__vertical-spacing-unit}; } } } .wp-block-media-text__content { padding: 8%; } &.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content { grid-row: 2; @media only screen and (min-width: 600px) { grid-row: 1; } } @include media(tablet) { padding: #{2 * $size__vertical-spacing-unit} 0; .wp-block-media-text__media { margin-left: -#{2 * $size__vertical-spacing-unit}; margin-right: #{2 * $size__vertical-spacing-unit}; max-width: calc( 100% ); } .wp-block-media-text__content { padding: 0 #{2 * $size__vertical-spacing-unit} 0 0; } &.alignfull { margin-left: #{2 * $size__vertical-spacing-unit}; margin-right: #{2 * $size__vertical-spacing-unit}; max-width: calc( 125% + 30px ); } &.has-media-on-the-right .wp-block-media-text__media { margin-right: -#{2 * $size__vertical-spacing-unit}; margin-left: #{2 * $size__vertical-spacing-unit}; } &.has-media-on-the-right .wp-block-media-text__content { padding: 0 0 0 #{2 * $size__vertical-spacing-unit}; } } :first-child { margin-top: 0; } :last-child { margin-bottom: 0; } a, a:hover { color: inherit; } // Temporary fix for IE 11 for this issue: https://github.com/WordPress/gutenberg/issues/11577 @media all and (-ms-high-contrast:none) { &:after { display: table; content: ""; clear: both; } figure { float: left; width: 50%; } .wp-block-media-text__content { float: right; width: 50%; } &.has-media-on-the-right figure { float: right; } &.has-media-on-the-right .wp-block-media-text__content { float: left; } } } //! Button .wp-block-button { .wp-block-button__link { @include button-transition; border: none; font-size: $font__size-sm; 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; 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__vertical-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__vertical-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: $size__vertical-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 { font-family: $font__body; font-size: $font__size_base; line-height: 1.8; } //! Paragraphs .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; } } //! Pullquote .wp-block-pullquote { border-color: transparent; border-width: 2px; padding: $size__spacing-unit; blockquote { color: $color__text-main; border: none; margin-top: calc(3 * #{ $size__vertical-spacing-unit}); margin-bottom: calc(3.33 * #{ $size__vertical-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; 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__vertical-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-color: $color__link; border-width: 2px; 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__vertical-spacing-unit auto; 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__vertical-spacing-unit auto; padding: $size__spacing-unit 0; p { font-size: $font__size-lg; } } } } //! Image .wp-block-image { max-width: 100%; img { display: block; } &.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) { min-height: 640px; padding: $size__spacing-unit 10%; } .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text { color: #fff; padding: 0; text-shadow: 0 0 12px #000; @include media(tablet) { max-width: 100%; } a { color: inherit; } } h1, h2, h3, h4, h5, h6 { font-weight: 300; } h1 { font-size: $font__size-xl; @include media(tablet) { font-size: $font__size-xxxl; } } .wp-block-cover-image-text, .wp-block-cover-text, h2 { font-size: $font__size-lg; margin: inherit; max-width: inherit; padding: 0; text-align: inherit; @include media(tablet) { font-size: $font__size-xxl; } } h2 { &.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; @include media(tablet) { font-size: $font__size-xl; } } h4 { font-size: $font__size_base; @include media(tablet) { font-size: $font__size-lg; } } h5 { font-size: $font__size-sm; @include media(tablet) { font-size: $font__size-md; } } h6 { font-size: $font__size-xs; @include media(tablet) { font-size: $font__size_base; } } &.alignleft, &.alignright { width: 100%; @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})); .wp-block-cover__inner-container, .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; 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: 1px; margin: $size__vertical-spacing-unit auto; max-width: 5em; 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; } } /* Remove duplicate rule-line when a separator * is followed by an H1, or H2 */ & + h1, & + h2 { &:before { display: none; } } } //! Spacer .wp-block-spacer { &.desktop-only { display: none; @include media(tablet) { display: block; } } } //! 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 { 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; 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__vertical-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(tabletalt) { .wp-block-column { margin-left: #{0.5 * $size__spacing-unit}; margin-right: #{0.5 * $size__spacing-unit}; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } } .wp-block-column > * { &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &.alignfull { 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 { font-family: $font__heading; font-weight: 700; .wp-block-latest-comments__comment-date { font-weight: 300; } } .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 { } } //! 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; } //! Posts List .a8c-posts-list-item__title, .a8c-posts-list-item__meta { a { text-decoration: none; } } .a8c-posts-list__view-all { text-decoration: none; } .a8c-posts-list-item__title { a { color: inherit; &:hover, &:focus { color: $color__text-hover; } } } .a8c-posts-list-item__meta { a { color: inherit; &:hover, &:focus { color: $color__link; } } .a8c-posts-list-item__edit-link { a { color: $color__background-body; } } } .a8c-posts-list { text-align: center; } .a8c-posts-list__item:not(:first-child) { margin-top: calc(6 * #{$size__spacing-unit}); } .a8c-posts-list-item__featured { text-align: center; span { background: $color__background-button; color: #fff; display: inline-block; font-size: $font__size-xs; font-weight: bold; line-height: 1; padding: .25rem; text-transform: uppercase; z-index: 1; } } .a8c-posts-list-item__post-thumbnail { margin-bottom: $size__vertical-spacing-unit; img { display: block; } } .a8c-posts-list-item__title { font-size: $font__size-lg; margin: 0; text-align: center; font-weight: 300; } .a8c-posts-list-item__meta { color: $color__text-light; font-size: $font__size-xs; font-weight: 500; text-align: center; } .a8c-posts-list-item__author { margin-right: calc(.5 * #{$size__spacing-unit}); } .a8c-posts-list-item__edit-link { @include button-transition; background: $color__background-button; border-radius: 3px; font-family: $font__heading; font-weight: 700; padding: .05rem .4rem; &:hover, &:focus { background: $color__background-button-hover; cursor: pointer; } } .a8c-posts-list-item__excerpt { @include postContentMaxWidth(); margin: 0 auto; text-align: left; p { margin: $size__vertical-spacing-unit 0; } } .a8c-posts-list__view-all { @include button-transition; background: $color__background-button; border: none; border-radius: 5px; box-sizing: border-box; color: $color__background-body; display: inline-block; font-family: $font__heading; font-size: $font__size-sm; font-weight: 700; line-height: $font__line-height-heading; margin-top: calc(6 * #{$size__spacing-unit} - #{$size__vertical-spacing-unit}); outline: none; padding: ( $size__spacing-unit * .76 ) $size__spacing-unit; vertical-align: bottom; &:hover { background: $color__background-button-hover; cursor: pointer; } &:visited { color: $color__background-body; text-decoration: none; } &:focus { background: $color__background-button-hover; outline: thin dotted; outline-offset: -4px; } } }