140 lines
2.4 KiB
SCSS
140 lines
2.4 KiB
SCSS
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|