From ec11220ce83fb3ebc627981904b3dc30623a4e58 Mon Sep 17 00:00:00 2001
From: Dilson's Pickles <a.dawson@mu.se>
Date: Mon, 27 Feb 2023 14:49:59 +0000
Subject: [PATCH] Improve responsive styling

---
 src/components/homepage/ReleaseVideo.astro    |  4 +-
 .../homepage/features/RealTimeEffects.astro   |  6 +--
 .../homepage/features/ShareToAudio.astro      | 53 ++++++++++---------
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/homepage/ReleaseVideo.astro b/src/components/homepage/ReleaseVideo.astro
index 76f6f07..f3831e8 100644
--- a/src/components/homepage/ReleaseVideo.astro
+++ b/src/components/homepage/ReleaseVideo.astro
@@ -1,12 +1,12 @@
 <section class="bg-gray-900">
   <div
-    class="max-w-4xl mx-auto pt-16 pb-24 lg:pt-24 lg:pb-32 xl:px-0 px-3"
+    class="max-w-4xl mx-auto pt-16 pb-24 lg:pt-24 lg:pb-32 xl:px-0 px-8"
   >
     <div class="space-y-4 text-center text-white">
       <h2 class="text-xl lg:text-2xl font-bold">New in Audacity 3.2</h2>
     </div>
     <iframe
-      class="w-full aspect-video rounded-md shadow-xl mt-4 lg:mt-8 "
+      class="w-full aspect-video rounded-md shadow-xl mt-8 lg:mt-8 "
       src="https://www.youtube.com/embed/DTRnDNR9LR8"
       title="YouTube video player"></iframe>
   </div>
diff --git a/src/components/homepage/features/RealTimeEffects.astro b/src/components/homepage/features/RealTimeEffects.astro
index d28fd53..4aee2b7 100644
--- a/src/components/homepage/features/RealTimeEffects.astro
+++ b/src/components/homepage/features/RealTimeEffects.astro
@@ -4,8 +4,8 @@ import RealTimeEffects from "../../../assets/img/features/Spectrogram.png";
 ---
 
 <section class="bg-gray-100">
-  <div class="grid lg:grid-cols-2 mx-auto max-w-6xl">
-    <div class="flex flex-col justify-center lg:pr-16 px-3 mt-6 mb-8">
+  <div class="grid sm:grid-cols-2 mx-auto max-w-xl sm:max-w-6xl pb-8 sm:pb-0">
+    <div class="flex flex-col justify-center lg:pr-16 p-3 sm:p-6">
       <Badge badgeText="New in v3.2" />
       <h1 class="text-2xl lg:text-4xl font-bold mt-2">Real-time effects</h1>
       <p class="text-base lg:text-lg mt-2 lg:mt-6">
@@ -30,6 +30,6 @@ import RealTimeEffects from "../../../assets/img/features/Spectrogram.png";
       >
     </div>
 
-   <div class="h-56 lg:h-auto row-start-1 lg:row-auto"><img class="object-cover w-full h-full" src={RealTimeEffects} /></div>
+   <div class="flex h-56 sm:h-auto p-3 sm:p-0 row-start-1 sm:row-auto"><img class="rounded-sm object-cover w-full" src={RealTimeEffects} /></div>
   </div>
 </section>
diff --git a/src/components/homepage/features/ShareToAudio.astro b/src/components/homepage/features/ShareToAudio.astro
index d36dc7c..ab61517 100644
--- a/src/components/homepage/features/ShareToAudio.astro
+++ b/src/components/homepage/features/ShareToAudio.astro
@@ -4,32 +4,33 @@ import ShareAudio from "../../../assets/img/features/ShareAudio.png";
 ---
 
 <section class="">
-  <div class="grid lg:grid-cols-2 mx-auto max-w-6xl">
-    <div class="h-56 lg:h-auto row-start-1 lg:row-auto"><img class="object-cover w-full h-full" src={ShareAudio} /></div>
-    <div class="grid lg:grid-cols-2 mx-auto max-w-6xl">
-      <div class="flex flex-col justify-center lg:pr-16 px-3 mt-6 mb-8">
-        <Badge badgeText="New in v3.2" />
-        <h1 class="text-2xl lg:text-4xl font-bold mt-2">Share to Audio.com</h1>
-        <p class="text-base lg:text-lg mt-2 lg:mt-6">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-          commodo consequat.
-        </p>
-        <a
-          class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-8 lg:mt-12"
-          href="https://support.audacityteam.org/audio-editing/using-realtime-effects"
-          target="_blank"
-          >Find out more<svg
-            class="fill-blue-700 w-4"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512"
-          >
-            <path
-              d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
-            ></path></svg
-          ></a
+  <div class="grid sm:grid-cols-2 mx-auto max-w-xl sm:max-w-6xl pb-8 sm:pb-0">
+    <div class="flex h-56 sm:h-auto p-3 sm:p-0 lg:row-auto"><img class="rounded-sm object-cover w-full" src={ShareAudio} /></div>
+    <div class="flex flex-col justify-center lg:pl-16 p-3 sm:p-6">
+      <Badge badgeText="New in v3.2" />
+      <h1 class="text-2xl lg:text-4xl font-bold mt-2">Share to audio.com</h1>
+      <p class="text-base lg:text-lg mt-2 lg:mt-6">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+      <a
+        class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-8 lg:mt-12"
+        href="https://support.audacityteam.org/audio-editing/using-realtime-effects"
+        target="_blank"
+        >Find out more<svg
+          class="fill-blue-700 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
         >
-      </div>
+          <path
+            d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
+          ></path></svg
+        ></a
+      >
+    </div>
+
+ 
   </div>
 </section>