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/_image.scss
+++ b/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;
+      }
+    }
+  }
+}