article block: organise styles by core block

2026-02-04 13:55:13 +00:00
parent 040f0cf464
commit 4c38753830
8 changed files with 234 additions and 138 deletions
--- a/resources/views/blocks/article/css/_quote.scss
+++ 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);
+      }
+    }
+  }
+  }
+}