From 6ee1389152506f3b9da160801d929f246bc7ecf8 Mon Sep 17 00:00:00 2001
From: hobbes7878 <jon.r.mcclure@gmail.com>
Date: Thu, 22 Aug 2024 12:32:14 +0100
Subject: [PATCH] fix layout demo css

---
 src/components/Article/Article.stories.svelte | 62 +++++++++---------
 src/components/Block/Block.stories.svelte     | 63 +++++++++----------
 2 files changed, 58 insertions(+), 67 deletions(-)

diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte
index b544e042..2e94caca 100644
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@@ -74,41 +74,35 @@
   </Article>
 </Story>
 
-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  :global(html) {
-    #article-story-basic,
-    #article-column-widths-demo {
-      width: calc(100% + 30px);
-      margin-left: -15px;
-    }
-    #article-column-widths-demo {
-      background-color: #ddd;
-      position: relative;
-      margin-bottom: 10px;
-
-      .article-boundaries {
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        background-color: #bbb;
-        &.custom {
-          div.article-block {
-            background: rgb(211, 132, 123);
-          }
-        }
-      }
-
-      div.article-block {
-        height: 300px;
-        background: #81a1c1;
-        margin-bottom: 2px;
-        height: 50px;
-        padding-left: 3px;
-        color: white;
-        font-size: 12px;
-      }
-    }
+  :global(#article-story-basic, #article-column-widths-demo) {
+    width: calc(100% + 30px);
+    margin-left: -15px;
+  }
+  :global(#article-column-widths-demo) {
+    background-color: #ddd;
+    position: relative;
+    margin-bottom: 10px;
+  }
+  :global(#article-column-widths-demo .article-boundaries) {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #bbb;
+  }
+  :global(
+      #article-column-widths-demo .article-boundaries.custom div.article-block
+    ) {
+    background: rgb(211, 132, 123);
+  }
+  :global(#article-column-widths-demo div.article-block) {
+    height: 300px;
+    background: #81a1c1;
+    margin-bottom: 2px;
+    height: 50px;
+    padding-left: 3px;
+    color: white;
+    font-size: 12px;
   }
 
   div.demo-container {
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index 253bb5ea..831ffb68 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -118,40 +118,37 @@
   </Article>
 </Story>
 
-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  :global(html) {
-    #block-demo-article {
-      background-color: #ddd;
-      position: relative;
-      width: calc(100% + 30px);
-      margin-left: -15px;
-
-      .article-boundaries {
-        padding: 0 0 18px;
-        width: 100%;
-        height: 100%;
-        background-color: #bbb;
-      }
-
-      div.article-block {
-        height: 100px;
-        background: #81a1c1;
-        &.block-snap-widths-demo {
-          margin-bottom: 2px;
-          height: 40px;
-          font-size: 11px;
-          &.even {
-            background: rgb(211, 132, 123);
-          }
-        }
-      }
-      .label,
-      div.article-block.block-snap-widths-demo {
-        padding-left: 3px;
-        color: white;
-      }
-    }
+  :global(#block-demo-article) {
+    background-color: #ddd;
+    position: relative;
+    width: calc(100% + 30px);
+    margin-left: -15px;
+  }
+  :global(#block-demo-article .article-boundaries) {
+    padding: 0 0 18px;
+    width: 100%;
+    height: 100%;
+    background-color: #bbb;
+  }
+  :global(#block-demo-article div.article-block) {
+    height: 100px;
+    background: #81a1c1;
+  }
+  :global(#block-demo-article div.article-block.block-snap-widths-demo) {
+    margin-bottom: 2px;
+    height: 40px;
+    font-size: 11px;
+  }
+  :global(#block-demo-article div.article-block.block-snap-widths-demo.even) {
+    background: rgb(211, 132, 123);
+  }
+  :global(
+      #block-demo-article .label,
+      #block-demo-article div.article-block.block-snap-widths-demo
+    ) {
+    padding-left: 3px;
+    color: white;
   }
 
   div#block-flex-example {