Updates after rebase, fix mobile alignment of circles

frequency-chain · Nov 12, 2024 · 7741b7b · 7741b7b
1 parent 5295db7
commit 7741b7b
Showing 4 changed files with 11 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>