article block: organise styles by core block

web/app/themes/badegg/resources/css/global/_fonts.scss

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

web/app/themes/badegg/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;
   }
 }

web/app/themes/badegg/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;
+  }
+}

web/app/themes/badegg/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))); }
+    }
+  }
+}

web/app/themes/badegg/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;
+      }
+    }
+  }
+}

web/app/themes/badegg/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; }
+    }
+  }
+}

web/app/themes/badegg/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);
+      }
+    }
+  }
+  }
+}

web/app/themes/badegg/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 {
+@use 'css/base';
-  container-name: BadEggArticle;
+@use 'css/image';
-  container-type: inline-size;
+@use 'css/gallery';
-
+@use 'css/media-text';
-  figure {
+@use 'css/quote';
-    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;
-    }
-  }
-}