diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss index f8dc588a3..b2a332ae2 100755 --- a/newspack-theme/sass/blocks/_blocks.scss +++ b/newspack-theme/sass/blocks/_blocks.scss @@ -78,29 +78,6 @@ &.wp-block-cover { width: auto; } - - &.wp-block-columns { - margin-left: calc( 25% - 25vw - 16px ); - margin-right: calc( 25% - 25vw - 16px ); - max-width: calc( 100vw + 32px ); - width: auto; - - &.is-style-borders { - margin-left: calc( 25% - 25vw - 24px ); - margin-right: calc( 25% - 25vw - 24px ); - max-width: calc( 100vw + 48px ); - } - } - } - - @include media( desktop ) { - &.wp-block-columns { - &.is-style-borders { - margin-left: calc( 25% - 25vw - 32px ); - margin-right: calc( 25% - 25vw - 32px ); - max-width: calc( 100vw + 64px ); - } - } } } .alignfull { @@ -111,33 +88,6 @@ &.wp-block-cover { width: 100vw; } - - &.wp-block-columns { - @include media( mobile ) { - margin-left: calc( 50% - 50vw - 16px ); - margin-right: calc( 50% - 50vw - 16px ); - max-width: calc( 100vw + 32px ); - width: calc( 100vw + 32px ); - } - - @include media( tablet ) { - &.is-style-borders { - margin-left: calc( 50% - 50vw - 24px ); - margin-right: calc( 50% - 50vw - 24px ); - max-width: calc( 100vw + 48px ); - width: calc( 100vw + 48px ); - } - } - - @include media( desktop ) { - &.is-style-borders { - margin-left: calc( 50% - 50vw - 32px ); - margin-right: calc( 50% - 50vw - 32px ); - max-width: calc( 100vw + 64px ); - width: calc( 100vw + 64px ); - } - } - } } .wp-block-cover, @@ -375,36 +325,6 @@ p.has-background { } } -// Temporarily make some column styles more specific -.entry .entry-content > .wp-block-columns, -[id='pico'] > .wp-block-columns { - &.is-not-stacked-on-mobile { - margin-left: -16px; - margin-right: -16px; - max-width: calc( 100% + 32px ); - } - - @include media( mobile ) { - margin-left: -16px; - margin-right: -16px; - max-width: calc( 100% + 32px ); - } - - @include media( tablet ) { - &.is-style-borders { - margin-left: -24px; - max-width: calc( 100% + 48px ); - } - } - - @include media( desktop ) { - &.is-style-borders { - margin-left: -32px; - max-width: calc( 100% + 64px ); - } - } -} - //! Cover Image .wp-block-cover-image, .wp-block-cover { @@ -1457,31 +1377,6 @@ $colors: ( margin-right: calc( 25% - 25vw ); max-width: 100vw; } - - @include media( tablet ) { - &.wp-block-columns { - margin-left: calc( 25% - 25vw - 16px ); - margin-right: calc( 25% - 25vw - 16px ); - max-width: calc( 100vw + 32px ); - width: auto; - - &.is-style-borders { - margin-left: calc( 25% - 25vw - 24px ); - margin-right: calc( 25% - 25vw - 24px ); - max-width: calc( 100vw + 48px ); - } - } - } - - @include media( desktop ) { - &.wp-block-columns { - &.is-style-borders { - margin-left: calc( 25% - 25vw - 32px ); - margin-right: calc( 25% - 25vw - 32px ); - max-width: calc( 100vw + 64px ); - } - } - } } &.alignfull { @@ -1584,17 +1479,6 @@ $colors: ( } } } - - //! Columns Block - .wp-block-columns { - @include media( tablet ) { - &.alignfull, - &.alignfull .wp-block-column { - padding-left: calc( 2 * #{$size__spacing-unit} ); - padding-right: calc( 2 * #{$size__spacing-unit} ); - } - } - } } .newspack-front-page, diff --git a/newspack-theme/sass/blocks/_patterns.scss b/newspack-theme/sass/blocks/_patterns.scss index 47e4b122d..17d1333c8 100644 --- a/newspack-theme/sass/blocks/_patterns.scss +++ b/newspack-theme/sass/blocks/_patterns.scss @@ -219,20 +219,9 @@ margin: 0; padding: 0; - @include media( mobile ) { - margin-left: -16px; - margin-right: -16px; - } - - &:not( .is-not-stacked-on-mobile ) > .wp-block-column { - margin-bottom: 16px; - - @include media( mobile ) { - margin-bottom: 0; - } - - &:last-child { - margin-bottom: 0; + &:not( .is-not-stacked-on-mobile ) { + @include media( tabletonly ) { + gap: 16px; } } diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss index ec87352e1..1daf9ceac 100644 --- a/newspack-theme/sass/style-editor-base.scss +++ b/newspack-theme/sass/style-editor-base.scss @@ -347,21 +347,18 @@ h1.wp-block-post-title { .wp-block-cover__inner-container { width: 100%; } -} - -/** === Columns === */ -.wp-block-columns.is-style-borders { - [data-type='core/column'] { - @include media( tablet ) { - flex-basis: calc( 50% - 32px ); + .wp-block-column { + > * { + margin-bottom: 0; + margin-top: 0; &:not( :first-child ) { - margin-left: 64px; + margin-top: 32px; } - &::after { - right: -32px; + &:not( :last-child ) { + margin-bottom: 32px; } } }