From 7741b7b94ae696a39c3cd2a7ed8baac69cf39254 Mon Sep 17 00:00:00 2001
From: shannonwells <shannonwells@users.noreply.github.com>
Date: Tue, 12 Nov 2024 17:08:16 -0500
Subject: [PATCH] Updates after rebase, fix mobile alignment of circles

---
 src/components/Sections/DeveloperSteps.svelte    |  2 +-
 .../Sections/DeveloperStepsMobile.svelte         | 16 ++++------------
 .../Sections/DeveloperStepsTablet.svelte         |  2 +-
 src/components/Sections/Developers.svelte        | 10 +++++-----
 4 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/Sections/DeveloperSteps.svelte b/src/components/Sections/DeveloperSteps.svelte
index ddfe5981..7c1da6a9 100644
--- a/src/components/Sections/DeveloperSteps.svelte
+++ b/src/components/Sections/DeveloperSteps.svelte
@@ -12,7 +12,7 @@
   const stepTitleClasses = 'text-[44px] font-bold text-navy';
 </script>
 
-<div class="sm:hidden lg:block">
+<div class="hidden lg:block">
   <section class="flex shrink flex-wrap justify-end">
     <!-- STEP ONE -->
     <div class="flex basis-[500px] pl-0 align-super" id="step-1">
diff --git a/src/components/Sections/DeveloperStepsMobile.svelte b/src/components/Sections/DeveloperStepsMobile.svelte
index c106b6d6..210fc1e6 100644
--- a/src/components/Sections/DeveloperStepsMobile.svelte
+++ b/src/components/Sections/DeveloperStepsMobile.svelte
@@ -11,11 +11,11 @@
   const stepTitleClasses = 'text-[44px] font-bold text-navy';
   const circleWidth = '60';
   const sectionClasses = 'flex flex-col px-[36px]';
-  const stepClasses = 'py-[12px]';
+  const stepClasses = 'py-[12px] flex flex-col';
 </script>
 
 <!-- Developer Steps -->
-<div class="sm:block md:hidden lg:hidden">
+<div class="block md:hidden">
   <section class={sectionClasses}>
     <!-- STEP ONE -->
     <div class="{stepClasses} justify-self-start" id="step-1">
@@ -29,36 +29,28 @@
     </div>
     <!-- STEP TWO -->
     <div class="{stepClasses} text-right" id="step-2">
-      <div>
-        <CircleTwo width={circleWidth} classes="justify-self-end" />
-      </div>
-      <div class="">
+        <CircleTwo width={circleWidth} classes="ml-auto"/>
         <h3 class={stepTitleClasses}>{DeveloperStepsText.two.title}</h3>
         <SectionParagraph classes={sectionParagraphClasses}>
           {DeveloperStepsText.two.text_html}
         </SectionParagraph>
-      </div>
     </div>
 
     <!-- STEP THREE -->
     <div class={stepClasses} id="step-3">
       <CircleThree width={circleWidth} />
-      <div class="">
         <h3 class={stepTitleClasses}>{DeveloperStepsText.three.title}</h3>
         <SectionParagraph classes={sectionParagraphClasses}>
           {DeveloperStepsText.three.text_html}
         </SectionParagraph>
-      </div>
     </div>
     <!-- STEP FOUR -->
     <div class="{stepClasses} text-right" id="step-4">
-      <CircleFour width={circleWidth} classes="justify-self-end" />
-      <div class="">
+      <CircleFour width={circleWidth} classes="ml-auto" />
         <h3 class={stepTitleClasses}>{DeveloperStepsText.four.title}</h3>
         <SectionParagraph classes={sectionParagraphClasses}>
           {DeveloperStepsText.four.text_html}
         </SectionParagraph>
-      </div>
     </div>
   </section>
 </div>
diff --git a/src/components/Sections/DeveloperStepsTablet.svelte b/src/components/Sections/DeveloperStepsTablet.svelte
index 5f4d9c15..eed2d2b5 100644
--- a/src/components/Sections/DeveloperStepsTablet.svelte
+++ b/src/components/Sections/DeveloperStepsTablet.svelte
@@ -14,7 +14,7 @@
   const circleWidth = '60';
 </script>
 
-<div class="px-[64px] sm:hidden md:block lg:hidden">
+<div class="px-[64px] hidden md:block lg:hidden">
   <section class="flex shrink">
     `
     <div>
diff --git a/src/components/Sections/Developers.svelte b/src/components/Sections/Developers.svelte
index c59a4b65..4bb9ee69 100644
--- a/src/components/Sections/Developers.svelte
+++ b/src/components/Sections/Developers.svelte
@@ -12,15 +12,15 @@
 </script>
 
 <!-- Graphic and Header -->
-<SectionWrapper id="developers" classes="sm:pt-[30px] md:pt-[38px] lg:pt-[34px] freq-container">
+<SectionWrapper id="developers" classes="pt-[30px] md:pt-[38px] lg:pt-[34px] freq-container">
   <section class="flex shrink flex-col lg:flex-row">
     <div class="developer-squiggles md:mr-[32px] lg:mr-f96">
-      <img src={FrequencyDevelopersMobile} alt="abstract developer timeline" class="md:hidden" />
-      <img src={FrequencyDevelopersTablet} alt="abstract developer timeline" class="sm:hidden md:block lg:hidden" />
+      <img src={FrequencyDevelopersMobile} alt="abstract developer timeline" class="block md:hidden" />
+      <img src={FrequencyDevelopersTablet} alt="abstract developer timeline" class="hidden md:block lg:hidden" />
       <img
         src={FrequencyDevelopers}
         alt="abstract developer timeline"
-        class="ml-f16 max-w-[722px] sm:hidden lg:block"
+        class="ml-f16 max-w-[722px] hidden lg:block"
       />
     </div>
     <div class="px-[36px] md:px-[64px] lg:px-[128px]">
@@ -39,7 +39,7 @@
     <Button size="lg" class="h6 p-f16 lg:hidden">
       {DeveloperStepsText.button.title}
     </Button>
-    <Button size="lg" class="mt-[56px] sm:hidden md:hidden lg:block">
+    <Button size="lg" class="mt-[56px] hidden lg:block">
       {DeveloperStepsText.button.text_html}
     </Button>
   </section>