From 4c38753830b9fed6f0f69dae1bd8e6436e51ae8d Mon Sep 17 00:00:00 2001 From: Steve Ross Date: Wed, 4 Feb 2026 13:55:13 +0000 Subject: [PATCH] article block: organise styles by core block --- resources/css/global/_fonts.scss | 1 + resources/css/global/_typography.scss | 4 +- resources/views/blocks/article/css/_base.scss | 21 +++ .../views/blocks/article/css/_gallery.scss | 12 ++ .../views/blocks/article/css/_image.scss | 52 +++++++ .../views/blocks/article/css/_media-text.scss | 24 +++ .../views/blocks/article/css/_quote.scss | 117 +++++++++++++++ resources/views/blocks/article/style.scss | 141 +----------------- 8 files changed, 234 insertions(+), 138 deletions(-) create mode 100644 resources/views/blocks/article/css/_base.scss create mode 100644 resources/views/blocks/article/css/_gallery.scss create mode 100644 resources/views/blocks/article/css/_image.scss create mode 100644 resources/views/blocks/article/css/_media-text.scss create mode 100644 resources/views/blocks/article/css/_quote.scss diff --git a/resources/css/global/_fonts.scss b/resources/css/global/_fonts.scss index 672184d5..91a83770 100644 --- a/resources/css/global/_fonts.scss +++ b/resources/css/global/_fonts.scss @@ -1,4 +1,5 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif; +$blockquote: serif; /* * Roots Fonts Setup diff --git a/resources/css/global/_typography.scss b/resources/css/global/_typography.scss index 4a5b9e1b..994ab451 100644 --- a/resources/css/global/_typography.scss +++ b/resources/css/global/_typography.scss @@ -4,11 +4,11 @@ @use "variables/spacing"; .wysiwyg { - *:first-child { + > *:first-child { margin-top: 0; } - *:last-child { + > *:last-child { margin-bottom: 0; } } diff --git a/resources/views/blocks/article/css/_base.scss b/resources/views/blocks/article/css/_base.scss new file mode 100644 index 00000000..17238f56 --- /dev/null +++ b/resources/views/blocks/article/css/_base.scss @@ -0,0 +1,21 @@ +@use "sass:math"; + +@use "../../../../css/global/variables/breakpoints"; +@use "../../../../css/global/variables/spacing"; +@use "../../../../css/global/variables/colours"; +@use "../../../../css/global/fonts"; + +.wp-block-badegg-article { + container-name: BadEggArticle; + container-type: inline-size; + + > .container > [class^="wp-block-"]:not(.wp-block-heading) { + margin: spacing.$innerLarge auto; + } + + .is-layout-flex { + display: flex; + flex-wrap: wrap; + gap: spacing.$gap; + } +} diff --git a/resources/views/blocks/article/css/_gallery.scss b/resources/views/blocks/article/css/_gallery.scss new file mode 100644 index 00000000..fbaa2411 --- /dev/null +++ b/resources/views/blocks/article/css/_gallery.scss @@ -0,0 +1,12 @@ +@use "sass:math"; + +@use "../../../../css/global/variables/breakpoints"; +@use "../../../../css/global/variables/spacing"; + +.wp-block-badegg-article { + .wp-block-gallery { + @for $i from 2 through 8 { + &.columns-#{$i} > * { width: calc(math.div(1, $i) * 100% - (spacing.$gap - math.div(spacing.$gap, $i))); } + } + } +} diff --git a/resources/views/blocks/article/css/_image.scss b/resources/views/blocks/article/css/_image.scss new file mode 100644 index 00000000..9a9585e4 --- /dev/null +++ b/resources/views/blocks/article/css/_image.scss @@ -0,0 +1,52 @@ +@use "../../../../css/global/variables/breakpoints"; +@use "../../../../css/global/variables/spacing"; + +.wp-block-badegg-article { + figure { + img { + display: block; + } + } + + .wp-block-image { + &.is-style-rounded { + img { + border-radius: 9999px; + } + } + + @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) { + .alignleft, + .alignright { + margin-bottom: spacing.$innerSmall; + } + + .alignleft { + float: left; + margin-right: spacing.$innerLarge; + } + + .alignright { + float: right; + margin-left: spacing.$innerLarge; + } + } + } + + .is-image-fill-element, + .is-cropped { + figure { + display: flex; + flex-direction: column; + margin: 0; + + img { + flex: 1 0 0%; + height: 100%; + object-fit: cover; + width: 100%; + aspect-ratio: 1; + } + } + } +} diff --git a/resources/views/blocks/article/css/_media-text.scss b/resources/views/blocks/article/css/_media-text.scss new file mode 100644 index 00000000..8ee2ab06 --- /dev/null +++ b/resources/views/blocks/article/css/_media-text.scss @@ -0,0 +1,24 @@ +@use "../../../../css/global/variables/breakpoints"; +@use "../../../../css/global/variables/spacing"; + +.wp-block-badegg-article { + .wp-block-media-text { + display: grid; + gap: spacing.$innerLarge; + + @container BadEggArticle (max-width: #{breakpoints.$screen-xs-max}) { + &.is-stacked-on-mobile { + display: block; + + .wp-block-media-text__media { + margin-bottom: spacing.$innerLarge; + } + } + } + + &__content { + > *:first-child { margin-top: 0; } + > *:last-child { margin-bottom: 0; } + } + } +} diff --git a/resources/views/blocks/article/css/_quote.scss b/resources/views/blocks/article/css/_quote.scss new file mode 100644 index 00000000..2ca8595b --- /dev/null +++ b/resources/views/blocks/article/css/_quote.scss @@ -0,0 +1,117 @@ +@use "../../../../css/global/variables/breakpoints"; +@use "../../../../css/global/variables/spacing"; +@use "../../../../css/global/variables/colours"; +@use "../../../../css/global/fonts"; + +.wp-block-badegg-article { + .wp-block-pullquote blockquote, + .wp-block-quote { + position: relative; + text-align: center; + font-size: 1.25em; + padding: 0; + padding: 1em 0; + margin: spacing.$innerLarge auto; + + * { + position: relative; + z-index: 3; + } + + p { + font-family: fonts.$blockquote; + font-style: italic; + margin: 0 0 0.25em; + color: colours.$primary; + } + + cite { + font-size: 0.6em; + font-family: fonts.$font; + font-style: normal; + color: colours.$grey; + } + + &::before { + content: '\201C'; + position: absolute; + z-index: 2; + top: -0.25em; + left: calc(50% - 0.5em); + display: block; + text-align: center; + font-size: 1.5em; + width: 1em; + color: colours.$secondary; + } + + &::after { + content: ''; + position: absolute; + inset: auto calc(20% - 1em) 0; + border-width: 1px 0 0; + border-style: solid; + } + + > *:first-child { + &::before, + &::after { + content: ''; + position: absolute; + top: -0.75em; + display: block; + width: 30%; + border-width: 1px 0 0; + border-style: solid; + } + + &::before { + right: calc(50% + 1em); + } + + &::after { + left: calc(50% + 1em); + } + } + + &::after, + > *:first-child::before, + > *:first-child::after { + border-color: colours.$grey-lighter; + } + + &.is-style-plain { + &::before, + &::after, + > *:first-child::before, + > *:first-child::after { + content: none; + } + } + + @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) { + font-size: 1.5em; + } + } + + @media screen { + &.knockout { + .wp-block-pullquote blockquote, + .wp-block-quote { + p { + color: colours.$primary-light; + } + + cite { + color: rgba(colours.$white, 0.7); + } + + &::after, + > *:first-child::before, + > *:first-child::after { + border-color: rgba(colours.$white,0.2); + } + } + } + } +} diff --git a/resources/views/blocks/article/style.scss b/resources/views/blocks/article/style.scss index 1a8d31fe..dd345128 100644 --- a/resources/views/blocks/article/style.scss +++ b/resources/views/blocks/article/style.scss @@ -1,139 +1,8 @@ -@use "sass:math"; -@use "../../../css/global/variables/breakpoints"; -@use "../../../css/global/variables/spacing"; -@use "../../../css/global/variables/colours"; -@use "../../../css/global/fonts"; -.wp-block-badegg-article { - container-name: BadEggArticle; - container-type: inline-size; - - figure { - img { - display: block; - } - } - - .wp-block { - &-image, - &-audio, - &-media-text, - &-quote, - &-pullquote { - margin: spacing.$innerMedium auto; - } - } - - .is-layout-flex { - display: flex; - flex-wrap: wrap; - gap: spacing.$gap; - } - - @for $i from 2 through 8 { - .columns-#{$i} > * { width: calc(math.div(1, $i) * 100% - (spacing.$gap - math.div(spacing.$gap, $i))); } - } - - .wp-block-image { - &.is-style-rounded { - img { - border-radius: 9999px; - } - } - - @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) { - .alignleft { - float: left; - margin-right: spacing.$innerMedium; - } - - .alignright { - float: right; - margin-left: spacing.$innerMedium; - } - } - } - - .is-image-fill-element, - .is-cropped { - figure { - display: flex; - flex-direction: column; - margin: 0; - - img { - flex: 1 0 0%; - height: 100%; - object-fit: cover; - width: 100%; - aspect-ratio: 1; - } - } - } - - .wp-block-media-text { - display: grid; - gap: spacing.$innerMedium; - - @container BadEggArticle (max-width: #{breakpoints.$screen-xs-max}) { - display: block; - } - } - - blockquote { - text-align: center; - font-size: 1.25em; - padding: 0; - margin: spacing.$innerLarge auto; - - p { - font-family: serif; - font-style: italic; - margin: 0 0 0.25em; - } - - cite { - font-size: 0.6em; - font-family: fonts.$font; - font-style: normal; - } - - &:not(.is-style-plain) { - position: relative; - padding: 1em 0; - margin: 2em auto; - - * { - position: relative; - z-index: 3; - } - - &::before, - &::after { - position: absolute; - z-index: 2; - left: calc(50% - 0.5em); - display: block; - text-align: center; - font-size: 1.5em; - width: 1em; - } - - &::before { - content: '\201C'; - top: -0.25em; - } - - &::after { - content: '\201D'; - bottom: -1em; - } - } - - @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) { - font-size: 1.5em; - } - } -} +@use 'css/base'; +@use 'css/image'; +@use 'css/gallery'; +@use 'css/media-text'; +@use 'css/quote';