framework/bedrock
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

article block: organise styles by core block

Browse Source
This commit is contained in:
Steve Ross
2026-02-04 13:55:13 +00:00
parent a0ff9876db
commit 9deb4a8f73
8 changed files with 234 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/themes/badegg/resources/css/global/_fonts.scss
View File

@@ -1,4 +1,5 @@
$font: "Ubuntu", Helvetica, Arial, sans-serif;
$blockquote: serif;
/*
* Roots Fonts Setup

4
web/app/themes/badegg/resources/css/global/_typography.scss
View File

@@ -4,11 +4,11 @@
@use "variables/spacing";
.wysiwyg {
*:first-child {
> *:first-child {
margin-top: 0;
}
*:last-child {
> *:last-child {
margin-bottom: 0;
}
}

21
web/app/themes/badegg/resources/views/blocks/article/css/_base.scss Normal file
View File

@@ -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;
}
}

12
web/app/themes/badegg/resources/views/blocks/article/css/_gallery.scss Normal file
View File

@@ -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))); }
}
}
}

52
web/app/themes/badegg/resources/views/blocks/article/css/_image.scss Normal file
View File

@@ -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;
}
}
}
}

24
web/app/themes/badegg/resources/views/blocks/article/css/_media-text.scss Normal file
View File

@@ -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; }
}
}
}

117
web/app/themes/badegg/resources/views/blocks/article/css/_quote.scss Normal file
View File

@@ -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);
}
}
}
}
}

141
web/app/themes/badegg/resources/views/blocks/article/style.scss
View File

@@ -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';