From a262674c0a7a3a0ead90511d0e2c59c67fc53d66 Mon Sep 17 00:00:00 2001
From: Giselle van Dongen <giselle.vd@gmail.com>
Date: Thu, 5 Dec 2024 12:04:48 +0100
Subject: [PATCH 1/4] Fix mobile rendering of scrollycoding

---
 src/components/code/scrollycoding.module.css | 30 +++++++++++++++--
 src/components/code/scrollycoding.tsx        | 34 ++++++++++++++------
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/components/code/scrollycoding.module.css b/src/components/code/scrollycoding.module.css
index cf69488d..478df51a 100644
--- a/src/components/code/scrollycoding.module.css
+++ b/src/components/code/scrollycoding.module.css
@@ -19,7 +19,7 @@
   }
 }
 
-.step {
+.step, .stepMobile {
   border-radius: 0;
   padding: 24px;
   border: 0;
@@ -28,7 +28,11 @@
   margin: 0 0 0 -0.5rem;
 }
 
-.step[data-selected="true"] {
+.stepMobile {
+  display: none;
+}
+
+.step[data-selected="true"], .stepMobile[data-selected="true"]{
   border-radius: 0;
   padding: 24px;
   box-shadow: inset 0 1px #e3e8ee;
@@ -55,3 +59,25 @@
   top: 4rem;
   overflow: auto;
 }
+
+@media screen and (max-width: 768px) {
+  .stepMobile {
+    display: block;
+  }
+  .step {
+    display: none;
+  }
+  .scrollycodingContainer {
+    flex-direction: column;
+  }
+  .stepsContainer {
+    min-width: auto;
+    max-width: 100%;
+  }
+
+  .sticker {
+    min-width: 100%;
+    max-width: 100%;
+    height: auto;
+  }
+}
diff --git a/src/components/code/scrollycoding.tsx b/src/components/code/scrollycoding.tsx
index 665fe0e2..f5d4ac08 100644
--- a/src/components/code/scrollycoding.tsx
+++ b/src/components/code/scrollycoding.tsx
@@ -31,15 +31,31 @@ export function Scrollycoding(props: unknown) {
         <SelectionProvider className={styles.scrollycodingContainer}>
             <div className={styles.stepsContainer}>
                 {steps.map((step, i) => (
-                    <Selectable
-                        key={i}
-                        index={i}
-                        selectOn={["hover", "scroll", "click"]}
-                        className={styles.step}
-                    >
-                        {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
-                        <div>{step.children}</div>
-                    </Selectable>
+                    <>
+                        <Selectable
+                            key={i}
+                            index={i}
+                            selectOn={["hover", "scroll", "click"]}
+                            className={styles.step}
+                        >
+                            {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
+                            <div>{step.children}</div>
+                        </Selectable>
+                        {/*<div className={styles.stepMobile}>*/}
+                        <Selectable
+                            key={i}
+                            index={i}
+                            selectOn={["click"]}
+                            className={styles.stepMobile}
+                        >
+                            {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
+                            <div>{step.children}</div>
+                        </Selectable>
+                        {/*    {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}*/}
+                        {/*    <div>{step.children}</div>*/}
+                        {/*</div>*/}
+                    </>
+
                 ))}
             </div>
             <Selection

From eeb97b17450a4bf001043ed084d935c6fc437db3 Mon Sep 17 00:00:00 2001
From: Giselle van Dongen <giselle.vd@gmail.com>
Date: Thu, 5 Dec 2024 12:13:32 +0100
Subject: [PATCH 2/4] Fix mobile rendering of TextAndCode

---
 .../code/code/text-and-code.module.css           | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/code/code/text-and-code.module.css b/src/components/code/code/text-and-code.module.css
index 2446604a..e8f1d549 100644
--- a/src/components/code/code/text-and-code.module.css
+++ b/src/components/code/code/text-and-code.module.css
@@ -19,4 +19,20 @@
     flex: 0 0 60%;
     box-sizing: border-box;
     display: block;
+}
+
+@media screen and (max-width: 768px) {
+    .text-and-code {
+        display: block;
+    }
+
+    .text-and-code-content {
+        min-width: auto;
+        max-width: 100%;
+    }
+
+    .text-and-code-sticker {
+        min-width: 100%;
+        max-width: 100%;
+    }
 }
\ No newline at end of file

From e57a3fbc31c655870d96339fc3528daf8a3edea6 Mon Sep 17 00:00:00 2001
From: Giselle van Dongen <giselle.vd@gmail.com>
Date: Thu, 5 Dec 2024 12:14:29 +0100
Subject: [PATCH 3/4] cleanup

---
 src/components/code/scrollycoding.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/code/scrollycoding.tsx b/src/components/code/scrollycoding.tsx
index f5d4ac08..adc59604 100644
--- a/src/components/code/scrollycoding.tsx
+++ b/src/components/code/scrollycoding.tsx
@@ -41,7 +41,7 @@ export function Scrollycoding(props: unknown) {
                             {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
                             <div>{step.children}</div>
                         </Selectable>
-                        {/*<div className={styles.stepMobile}>*/}
+                        {/*Mobile:*/}
                         <Selectable
                             key={i}
                             index={i}
@@ -51,9 +51,6 @@ export function Scrollycoding(props: unknown) {
                             {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
                             <div>{step.children}</div>
                         </Selectable>
-                        {/*    {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}*/}
-                        {/*    <div>{step.children}</div>*/}
-                        {/*</div>*/}
                     </>
 
                 ))}

From 657ee958ba0c2e951d7a648b82fa6dc9dcb39ba9 Mon Sep 17 00:00:00 2001
From: Giselle van Dongen <giselle.vd@gmail.com>
Date: Thu, 5 Dec 2024 12:28:31 +0100
Subject: [PATCH 4/4] Fix padding

---
 src/components/code/scrollycoding.module.css | 27 +++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/code/scrollycoding.module.css b/src/components/code/scrollycoding.module.css
index 478df51a..0fa1de49 100644
--- a/src/components/code/scrollycoding.module.css
+++ b/src/components/code/scrollycoding.module.css
@@ -19,9 +19,18 @@
   }
 }
 
-.step, .stepMobile {
+.step {
   border-radius: 0;
-  padding: 24px;
+  padding: 10px;
+  border: 0;
+  border-left: 4px solid transparent;
+  box-shadow: inset 0 1px #e3e8ee;
+  margin: 0 0 0 -0.5rem;
+}
+
+.stepMobile {
+  border-radius: 0;
+  padding: 5px;
   border: 0;
   border-left: 4px solid transparent;
   box-shadow: inset 0 1px #e3e8ee;
@@ -32,9 +41,19 @@
   display: none;
 }
 
-.step[data-selected="true"], .stepMobile[data-selected="true"]{
+.step[data-selected="true"]{
+  border-radius: 0;
+  padding: 10px;
+  box-shadow: inset 0 1px #e3e8ee;
+  margin: 0 0 0 -0.5rem;
+  border: 0;
+  border-left: 4px solid var(--ifm-color-secondary-darkest);
+  background-color: var(--docusaurus-highlighted-code-line-bg);
+}
+
+.stepMobile[data-selected="true"]{
   border-radius: 0;
-  padding: 24px;
+  padding: 5px;
   box-shadow: inset 0 1px #e3e8ee;
   margin: 0 0 0 -0.5rem;
   border: 0;