Index: wp-content/themes/twentynineteen/sass/blocks/_blocks.scss =================================================================== --- wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (revision 55900) +++ wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (working copy) @@ -1,6 +1,5 @@ /* !Block styles */ - // Default block margin and alignment rules. // These are replicated inside of the Group block // so that child blocks in there appear the same way. @@ -30,17 +29,17 @@ &.alignfull { position: relative; - left: -#{$size__spacing-unit }; - width: calc( 100% + (2 * #{$size__spacing-unit})); - max-width: calc( 100% + (2 * #{$size__spacing-unit})); + 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 ); + left: calc(-12.5% - 75px); + width: calc(125% + 150px); + max-width: calc(125% + 150px); } } @@ -91,7 +90,6 @@ .entry .entry-content > *, .entry .entry-summary > * { - > *:first-child { margin-top: 0; } @@ -108,7 +106,6 @@ */ .entry .entry-content, .entry .entry-summary { - .entry-content, .entry-summary, .entry { @@ -125,7 +122,6 @@ } .entry .entry-content { - //! Paragraphs p.has-background { padding: 20px 30px; @@ -133,7 +129,6 @@ //! Audio .wp-block-audio { - width: 100%; audio { @@ -142,7 +137,6 @@ &.alignleft audio, &.alignright audio { - max-width: (0.33 * $mobile_width); @include media(tablet) { @@ -157,7 +151,6 @@ //! Video .wp-block-video { - video { width: 100%; } @@ -165,17 +158,16 @@ //! Button .wp-block-button { - .wp-block-button__link { @include button-transition; border: none; font-size: $font__size-sm; - @include font-family( $font__heading ); + @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; + padding: ($size__spacing-unit * 0.76) $size__spacing-unit; outline: none; outline: none; @@ -239,7 +231,7 @@ list-style: none; li > a { - @include font-family( $font__heading ); + @include font-family($font__heading); font-size: calc(#{$font__size_base} * #{$font__size-ratio}); font-weight: bold; line-height: $font__line-height-heading; @@ -249,7 +241,6 @@ .wp-block-archives, .wp-block-categories { - &.aligncenter { text-align: center; } @@ -257,9 +248,8 @@ //! Latest categories .wp-block-categories { - ul { - padding-top: ( .75 * $size__spacing-unit ); + padding-top: (0.75 * $size__spacing-unit); } li ul { @@ -272,9 +262,8 @@ //! Latest posts .wp-block-latest-posts { - .wp-block-latest-posts__post-date { - @include font-family( $font__heading ); + @include font-family($font__heading); font-size: $font__size-xs; color: $color__text-light; line-height: 1.2; @@ -287,7 +276,7 @@ } li { - padding-bottom: ( .5 * $size__spacing-unit ); + padding-bottom: (0.5 * $size__spacing-unit); &.menu-item-has-children, &:last-child { @@ -295,7 +284,7 @@ } :not(:last-child) .wp-block-latest-posts__post-excerpt { - padding-bottom: ( .5 * $size__spacing-unit ); + padding-bottom: (0.5 * $size__spacing-unit); } } @@ -305,13 +294,13 @@ margin-bottom: (2 * $size__spacing-unit); a { &:after { - content: ''; + content: ""; } } &:last-child { margin-bottom: auto; a:after { - content: ''; + content: ""; } } } @@ -326,7 +315,7 @@ //! Verse .wp-block-verse { - @include font-family( $font__body ); + @include font-family($font__body); font-size: $font__size_base; line-height: 1.8; } @@ -334,13 +323,13 @@ //! Paragraphs .has-drop-cap { &:not(:focus):first-letter { - @include font-family( $font__heading ); + @include font-family($font__heading); font-size: $font__size-xxxl; line-height: 1; font-weight: bold; margin: 0 0.25em 0 0; - @-moz-document url-prefix() { + @-moz-document url-prefix() { & { margin-top: 0.2em; } @@ -357,8 +346,8 @@ blockquote { border: none; - margin-top: calc(4 * #{ $size__spacing-unit}); - margin-bottom: calc(4.33 * #{ $size__spacing-unit}); + margin-top: calc(4 * #{$size__spacing-unit}); + margin-bottom: calc(4.33 * #{$size__spacing-unit}); margin-right: 0; padding-left: 0; } @@ -381,7 +370,7 @@ cite { display: inline-block; - @include font-family( $font__heading ); + @include font-family($font__heading); line-height: 1.6; text-transform: none; color: $color__text-light; @@ -464,7 +453,6 @@ &.alignright, &.alignleft { - @include media(tablet) { padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); } @@ -471,7 +459,6 @@ } &.alignfull { - @include media(tablet) { padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); @@ -482,7 +469,6 @@ //! Blockquote .wp-block-quote { - &:not(.is-large), &:not(.is-style-large) { border-width: 2px; @@ -545,9 +531,9 @@ display: block; } - // If an image does not have a left/center/right alignment, - // it's a direct child of .wp-block-image. If it has no other - // alignment added, we want to make sure the image and its + // If an image does not have a left/center/right alignment, + // it's a direct child of .wp-block-image. If it has no other + // alignment added, we want to make sure the image and its // caption do not extend beyond the width of the text column. &:not(.alignwide):not(.alignfull) > img, &:not(.alignwide):not(.alignfull) > a > img, @@ -557,7 +543,6 @@ } .aligncenter { - @include postContentMaxWidth(); @include media(tablet) { @@ -580,10 +565,10 @@ &.alignfull img { width: 100vw; - max-width: calc( 100% + (2 * #{$size__spacing-unit})); + max-width: calc(100% + (2 * #{$size__spacing-unit})); @include media(tablet) { - max-width: calc( 125% + 150px ); + max-width: calc(125% + 150px); margin-left: auto; margin-right: auto; } @@ -604,7 +589,7 @@ .wp-block-cover-image-text, .wp-block-cover-text, h2 { - @include font-family( $font__heading ); + @include font-family($font__heading); font-size: $font__size-lg; font-weight: bold; line-height: 1.25; @@ -627,7 +612,6 @@ } &.alignfull { - .wp-block-cover-image-text, .wp-block-cover-text, h2 { @@ -669,10 +653,10 @@ .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { font-size: $font__size-xs; - @include font-family( $font__heading ); + @include font-family($font__heading); line-height: $font__line-height-pre; margin: 0; - padding: ( $size__spacing-unit * .5 ); + padding: ($size__spacing-unit * 0.5); text-align: center; } @@ -721,7 +705,6 @@ * is followed by an H1, or H2 */ & + h1, & + h2 { - &:before { display: none; } @@ -735,7 +718,6 @@ //! Table .wp-block-table { - th, td { border-color: $color__text-light; @@ -744,7 +726,7 @@ //! File .wp-block-file { - @include font-family( $font__heading ); + @include font-family($font__heading); .wp-block-file__button { display: table; @@ -753,11 +735,11 @@ border-radius: 5px; background: $color__background-button; font-size: $font__size-base; - @include font-family( $font__heading ); + @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; + padding: ($size__spacing-unit * 0.75) $size__spacing-unit; color: #fff; margin-left: 0; margin-top: calc(0.75 * #{$size__spacing-unit}); @@ -764,7 +746,7 @@ @include media(desktop) { font-size: $font__size-base; - padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5); + padding: ($size__spacing-unit * 0.875) ($size__spacing-unit * 1.5); } &:hover { @@ -793,9 +775,7 @@ //! Columns .wp-block-columns { - .wp-block-column > * { - &:first-child { margin-top: 0; } @@ -810,7 +790,6 @@ .wp-block-image:not(.alignwide):not(.alignfull) > a > img, .wp-block-image > img:not(.alignwide):not(.alignfull), .wp-block-image > figure { - @include media(tablet) { max-width: 100%; } @@ -831,12 +810,10 @@ //! Group .wp-block-group { - - // When the Group block is standard/wide, we need to prevent full-aligned + // When the Group block is standard/wide, we need to prevent full-aligned // child blocks from expanding out of their container. &:not(.alignfull) > .wp-block-group__inner-container > .alignfull, &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img { - @include media(tablet) { left: 0; max-width: 100%; @@ -845,7 +822,7 @@ // The full-width Group block's inner container should mimic .entry-content styles. &.alignfull > .wp-block-group__inner-container { - max-width: calc(100% - (2 * #{ $size__spacing-unit })); + max-width: calc(100% - (2 * #{$size__spacing-unit})); margin: 0 $size__spacing-unit; @include media(tablet) { @@ -863,7 +840,6 @@ // Remove the top and bottom margins of inner blocks. .wp-block-group__inner-container { - > *:first-child { margin-top: 0; } @@ -873,7 +849,7 @@ } } - // If the Group block is full-width, it does not need this extra padding. + // If the Group block is full-width, it does not need this extra padding. &.alignfull { padding-left: 0; padding-right: 0; @@ -888,22 +864,20 @@ &:not(.alignfull) > .wp-block-group__inner-container > .alignfull { width: 100%; max-width: 100%; - + @include media(tablet) { - width: calc( 100% + #{$size__spacing-unit * 2} ); - max-width: calc( 100% + #{$size__spacing-unit * 2} ); + width: calc(100% + #{$size__spacing-unit * 2}); + max-width: calc(100% + #{$size__spacing-unit * 2}); margin-left: -#{$size__spacing-unit}; } } } - } //! Latest Comments .wp-block-latest-comments { - .wp-block-latest-comments__comment-meta { - @include font-family( $font__heading ); + @include font-family($font__heading); font-weight: bold; .wp-block-latest-comments__comment-date { @@ -918,11 +892,9 @@ } &.has-avatars { - } &.has-dates { - .wp-block-latest-comments__comment-date { font-size: $font__size-xs; } @@ -929,10 +901,14 @@ } &.has-excerpts { - } } + //! wp-block-social-links + .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor { + text-decoration: none; + } + //! Font Sizes .has-small-font-size { font-size: $font__size-sm; @@ -955,7 +931,6 @@ .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; @@ -1009,7 +984,7 @@ .has-white-background-color, .wp-block-pullquote.is-style-solid-color.has-white-background-color { - background-color: #FFF; + background-color: #fff; } //! Custom foreground colors @@ -1043,6 +1018,6 @@ .has-white-color, .wp-block-pullquote blockquote.has-white-color, .wp-block-pullquote.is-style-solid-color blockquote.has-white-color { - color: #FFF; + color: #fff; } }