#25 Scroller

src/components/Scroller/Background.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ScrollerStep } from  '../@types/global';
+  import type { ScrollerStep } from '../@types/global';
 
   export let index: number;
   export let steps: ScrollerStep[] = [];
@@ -12,7 +12,7 @@
   <!-- Unless stackBackground is true. If so, keep all steps before the current one loaded. -->
   {#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
     <div
-      class="step-background step-{i + 1}"
+      class="step-background step-{i + 1} w-full absolute"
       class:visible="{stackBackground ? i <= index : i === index}"
       class:hidden="{stackBackground ? i > index : i !== index}"
     >
@@ -26,8 +26,6 @@
 
 <style lang="scss">
   .step-background {
-    width: 100%;
-    position: absolute;
     transition: 0.5s opacity ease;
 
     &.hidden {

src/components/Scroller/Embedded/Foreground.svelte

@@ -39,14 +39,9 @@
 {/if}
 
 <style lang="scss">
-  @import './../../../scss/mixins';
   div.embedded-foreground {
     :global(p:last-child) {
       margin-bottom: 0;
     }
   }
-
-  .visually-hidden {
-    @include visually-hidden;
-  }
 </style>

src/components/Scroller/Foreground.svelte

@@ -7,7 +7,10 @@
 </script>
 
 {#each steps as step, i}
-  <div class="step-foreground-container step-{i + 1}">
+  <div
+    class="step-foreground-container step-{i +
+      1} mb-20 h-screen flex items-center justify-center"
+  >
     {#if step.foreground === '' || !step.foreground}
       <!-- Empty foreground -->
       <div class="empty-step-foreground"></div>
@@ -17,7 +20,7 @@
         </div>
       {/if}
     {:else}
-      <div class="step-foreground">
+      <div class="step-foreground w-full">
         {#if typeof step.foreground === 'string'}
           {@html marked.parse(step.foreground)}
         {:else}
@@ -40,16 +43,10 @@
   @import './../../scss/mixins';
 
   div.step-foreground-container {
-    height: 100vh;
     width: initial;
     max-width: initial;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 5rem;
     .step-foreground {
       max-width: 550px;
-      width: 100%;
       padding: 1.2rem 30px;
       background: rgba(255, 255, 255, 0.8);
       :global(p:last-child) {
@@ -60,8 +57,4 @@
       }
     }
   }
-
-  .visually-hidden {
-    @include visually-hidden;
-  }
 </style>

src/components/Scroller/Scroller.svelte

@@ -114,15 +114,16 @@
     >
       <div
         slot="background"
-        class="background"
+        class="background min-h-screen relative p-0 flex justify-center"
         class:right="{foregroundPosition === 'left opposite'}"
         class:left="{foregroundPosition === 'right opposite'}"
         aria-hidden="true"
       >
-        <div class="scroller-graphic-well">
+        <div class="scroller-graphic-well w-full">
           <Block
             width="{backgroundWidth}"
-            class="background-container step-{index + 1}"
+            class="background-container step-{index +
+              1} my-0 min-h-screen flex justify-center items-center relative"
           >
             <Background
               index="{index}"
@@ -134,7 +135,7 @@
         </div>
       </div>
 
-      <div slot="foreground" class="foreground {foregroundPosition}">
+      <div slot="foreground" class="foreground {foregroundPosition} w-full">
         <Foreground steps="{steps}" />
       </div>
     </SvelteScroller>
@@ -150,23 +151,7 @@
 {/if}
 
 <style lang="scss">
-  .scroller-container {
-    width: calc(100% + 30px);
-    margin-left: -15px;
-    max-width: initial;
-    &.embedded {
-      width: 100%;
-      padding: 0 15px;
-    }
-  }
-
   div.background {
-    min-height: 100vh;
-    position: relative;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-
     &.left {
       width: 50%;
       float: left;
@@ -188,27 +173,10 @@
 
     div.scroller-graphic-well {
       padding: 0 15px;
-      width: 100%;
-      :global {
-        div.background-container {
-          margin-top: 0;
-          margin-bottom: 0;
-          min-height: 100vh;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          position: relative;
-          &.fluid {
-            margin: 0 0 0 -15px;
-          }
-        }
-      }
     }
   }
 
   div.foreground {
-    width: 100%;
-
     &.right {
       width: 50%;
       float: right;

src/scss/tokens/sizing/_width.scss

@@ -1,6 +1,10 @@
 .w-full {
   width: 100%;
 }
+.w-full-fluid {
+  width: calc(100% + 30px);
+  margin-left: -15px !important;
+}
 .w-screen {
   width: 100vw;
 }
@@ -85,6 +89,10 @@
 .\!w-full {
   width: 100% !important;
 }
+.\!w-full-fluid {
+  width: calc(100% + 30px) !important;
+  margin-left: -15px !important;
+}
 .\!w-screen {
   width: 100vw !important;
 }