From c677ba470ba19eb9bfbf6ec2df73c4a7d189a8dc Mon Sep 17 00:00:00 2001
From: Dilson's Pickles <a.dawson@mu.se>
Date: Wed, 29 Mar 2023 17:06:00 +0100
Subject: [PATCH] Update responsive styling

---
 src/components/button/DownloadButton.jsx        | 2 +-
 src/components/button/DownloadMuseHubButton.jsx | 2 +-
 src/components/homepage/HeroBanner.astro        | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/button/DownloadButton.jsx b/src/components/button/DownloadButton.jsx
index 030ff35..256508a 100644
--- a/src/components/button/DownloadButton.jsx
+++ b/src/components/button/DownloadButton.jsx
@@ -12,7 +12,7 @@ function DownloadButton(props) {
   function renderButton(href) {
     return (
       <a
-        className={`flex flex-col flex-grow gap-1 py-3 px-8 items-center rounded justify-center text-center + ${
+        className={`flex flex-col flex-1 gap-1 py-3 items-center rounded justify-center text-center + ${
           primary
             ? "bg-blue-700 hover:bg-blue-600 active:bg-blue-800 text-white rounded"
             : "bg-white hover:bg-gray-200 text-blue-700"
diff --git a/src/components/button/DownloadMuseHubButton.jsx b/src/components/button/DownloadMuseHubButton.jsx
index 8b2ff5c..ec32845 100644
--- a/src/components/button/DownloadMuseHubButton.jsx
+++ b/src/components/button/DownloadMuseHubButton.jsx
@@ -11,7 +11,7 @@ function DownloadMuseHubButton(props) {
   function renderButton(href) {
     return (
       <a
-        className="flex flex-col flex-grow gap-1 py-3 px-4 items-center rounded justify-center border border-gray-200 text-blue-700 hover:bg-gray-100 hover:border-gray-300"
+        className="flex flex-col flex-1 gap-1 py-3 items-center rounded justify-center border border-gray-200 text-blue-700 hover:bg-gray-100 hover:border-gray-300 text-center"
         href={href}
       >
         Audacity + free effects & samples
diff --git a/src/components/homepage/HeroBanner.astro b/src/components/homepage/HeroBanner.astro
index cc176cf..5bb4506 100644
--- a/src/components/homepage/HeroBanner.astro
+++ b/src/components/homepage/HeroBanner.astro
@@ -5,13 +5,13 @@ import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
 ---
 
 <section>
-  <div class="mt-12 mx-auto max-w-md xl:max-w-xl px-3 lg:px-0">
+  <div class="mt-12 mx-auto max-w-md sm:max-w-xl px-3 lg:px-0">
     <div
       class="pt-12 pb-16 lg:pt-12 lg:pb-16 flex flex-col space-y-8 lg:space-y-8"
     >
       <div class="flex flex-col items-center text-center space-y-4">
         <img class="w-16 xl:w-24" src={Audacity_Logo} />
-        <h1 class="text-2xl xl:text-4xl leading-snug font-bold text-gray-800">
+        <h1 class="text-2xl xl:text-3xl leading-snug font-bold text-gray-800">
           The world's most popular audio editing and recording app
         </h1>
       </div>
@@ -25,7 +25,7 @@ import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
           <p class="text-gray-600 px-3">Latest version 3.2.4</p><a
             href="https://github.com/audacity/audacity/releases/tag/Audacity-3.2.4"
             target="_blank"
-            class="text-gray-600 px-3 underline">Read release notes</a
+            class="text-gray-600 px-3 underline hover:text-blue-700">Read release notes</a
           >
         </div>
       </div>