base article block styles

2026-02-03 22:54:29 +00:00
parent ea0e3478cd
commit 040f0cf464
7 changed files with 155 additions and 5 deletions
--- a/resources/views/blocks/article/style.scss
+++ b/resources/views/blocks/article/style.scss
@@ -0,0 +1,139 @@
+
+@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;
+    }
+  }
+}
+