From fd70c5b59fb8ab22a2069439cb4e620f123960c2 Mon Sep 17 00:00:00 2001
From: Dilson's Pickles <a.dawson@mu.se>
Date: Thu, 24 Aug 2023 16:06:06 +1000
Subject: [PATCH] Update responsive text

---
 src/components/button/DownloadButton.jsx |  2 +-
 src/components/card/IconLinkCard.jsx     | 10 ++--
 src/pages/downloads.astro                | 59 +++++++++++++++---------
 src/styles/icons.css                     |  4 ++
 src/styles/input.css                     |  8 ++--
 5 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/components/button/DownloadButton.jsx b/src/components/button/DownloadButton.jsx
index 3c49847..ace40bd 100644
--- a/src/components/button/DownloadButton.jsx
+++ b/src/components/button/DownloadButton.jsx
@@ -21,7 +21,7 @@ function DownloadButton() {
     return (
       <a className="flex flex-1 flex-col justify-center bg-blue-700 hover:bg-blue-600 rounded-md items-center text-center py-3" href={href} onClick={() => handleDownloadButtonClick()}>
           <div className="flex gap-2 items-center">
-            <span className="icon icon-export text-white"></span>
+            <span className="icon icon-import text-white"></span>
             <p className="button-text font-semibold text-white"> Download Audacity</p>
           </div>
           <p className="button-caption text-white opacity-80">Installs with no add-ons</p>
diff --git a/src/components/card/IconLinkCard.jsx b/src/components/card/IconLinkCard.jsx
index 9ea436e..86df78a 100644
--- a/src/components/card/IconLinkCard.jsx
+++ b/src/components/card/IconLinkCard.jsx
@@ -5,13 +5,13 @@ function IconLinkCard(props) {
   return (
     <div className="col-span-12 sm:col-span-6 flex flex-1 flex-col gap-12 border rounded-lg drop-shadow-lg bg-white p-6 justify-between">
       <div className="flex flex-col gap-2">
-        <span className={`icon icon-large ${icon} text-blue-700`}></span>
-        <h4 className="text-xl font-bold">{title}</h4>
-        <p className="text-xl">{description}</p>
+        <span className={`icon icon-medium ${icon} text-blue-700`}></span>
+        <h4>{title}</h4>
+        <p>{description}</p>
       </div>
 
-      <a href={targetURL} className="text-blue-700 underline text-xl">
-        {linkText} <span className="icon icon-share text-blue-700"></span>
+      <a href={targetURL} className="hyperlink">
+        {linkText}
       </a>
     </div>
   );
diff --git a/src/pages/downloads.astro b/src/pages/downloads.astro
index 587c47d..0e28383 100644
--- a/src/pages/downloads.astro
+++ b/src/pages/downloads.astro
@@ -5,52 +5,69 @@ import "../styles/icons.css";
 ---
 
 <BaseLayout title="Audacity | Downloads">
-  <section class="mt-14 max-w-screen-xl mx-auto">
+  <section class="max-w-screen-xl mx-auto">
     <div class="grid grid-cols-12 py-12 gap-y-12">
       <div class="col-start-2 col-span-10 sm:text-center">
-        <h2 class="text-5xl font-bold">Downloads</h2>
-        <div class="mt-4">
-          Current version: 3.3.3 | <a class="text-blue-700 underline" href="https://github.com/audacity/audacity/releases/latest" target="_blank"
-            >View release notes</a
+        <h1>Downloads</h1>
+        <div class="inline-flex items-center mt-2">
+          <p>Current version: 3.3.3 |</p>
+          <a
+            class="hyperlink ml-2"
+            href="https://github.com/audacity/audacity/releases/latest"
+            target="_blank">View release notes</a
           >
         </div>
       </div>
       <div class="col-start-2 col-span-10 sm:col-start-2 sm:col-span-5">
-        <h4 class="text-gray-600">Download for</h4>
+        <small>Download for</small>
         <div class="flex flex-col gap-4 mt-2">
-          <OperatingSystemCard title="Windows" description="32 & 64 bit" targetURL="/downloads/download-for-windows"/>
-          <OperatingSystemCard title="Mac OS" description="64 bit intel" targetURL="/downloads/download-for-mac"/>
-          <OperatingSystemCard title="Linux" description="64 bit appimage" targetURL="/downloads/download-for-linux"/>
+          <OperatingSystemCard
+            title="Windows"
+            description="32 & 64 bit"
+            targetURL="/downloads/download-for-windows"
+          />
+          <OperatingSystemCard
+            title="Mac OS"
+            description="64 bit intel"
+            targetURL="/downloads/download-for-mac"
+          />
+          <OperatingSystemCard
+            title="Linux"
+            description="64 bit appimage"
+            targetURL="/downloads/download-for-linux"
+          />
         </div>
       </div>
       <div class="col-start-2 col-span-10 sm:col-start-8 sm:col-span-4">
-        <h4 class="text-gray-600">Additional resources</h4>
+        <small>Additional resources</small>
         <div class="flex flex-col gap-6 mt-2">
           <div>
-            <h3 class="text-lg font-bold">Manual download</h3>
+            <h4>Manual download</h4>
             <div class="gap-2">
-              <a href="/" class="text-blue-700 underline" href="/"
-                >Download Audacity manual</a
+              <a href="/" class="hyperlink" href="/">Download Audacity manual</a
               >
-              <span class="align-middle icon icon-share text-blue-700"></span>
+              <span class="align-middle icon icon-share text-blue-600"></span>
             </div>
           </div>
           <div>
-            <h3 class="text-lg font-bold">Ffmpeg library</h3>
+            <h4>Ffmpeg library</h4>
             <div class="gap-2">
-              <a href="/" class="text-blue-700 underline" href="/"
+              <a href="/" class="hyperlink" href="/"
                 >Ffmpeg import/export library</a
               >
-              <span class="align-middle icon icon-share text-blue-700"></span>
+              <span class="align-middle icon icon-share text-blue-600"></span>
             </div>
           </div>
           <div>
-            <h3 class="text-lg font-bold">Older versions of Audacity</h3>
+            <h4>Older versions of Audacity</h4>
             <div class="gap-2">
-              <a href="https://www.fosshub.com/Audacity.html" target="_blank" class="text-blue-700 underline" href="/"
-                >Download older versions from Fosshub</a
+              <a
+                href="https://www.fosshub.com/Audacity.html"
+                target="_blank"
+                class="hyperlink"
+                href="/">Download older versions from Fosshub</a
               >
-              <span class="align-middle icon icon-share text-blue-700"></span>
+              <span class="align-middle icon icon-share text-blue-600"></span>
             </div>
           </div>
         </div>
diff --git a/src/styles/icons.css b/src/styles/icons.css
index 8fa070e..329949b 100644
--- a/src/styles/icons.css
+++ b/src/styles/icons.css
@@ -30,6 +30,10 @@
     content: "\EF24"
 }
 
+.icon-import:before {
+    content: "\F357"
+}
+
 .icon-mixer:before {
     content: "\EF27"
 }
diff --git a/src/styles/input.css b/src/styles/input.css
index efa3d2e..faacf77 100644
--- a/src/styles/input.css
+++ b/src/styles/input.css
@@ -4,20 +4,20 @@
 
 @layer base {
     h1 {
-        @apply text-3xl md:text-4xl lg:text-5xl text-gray-900 font-semibold
+        @apply text-3xl md:text-4xl lg:text-5xl text-gray-900 font-bold xl:leading-snug
     }
 
     h2 {
-        @apply text-2xl md:text-3xl lg:text-4xl text-gray-800 font-semibold
+        @apply text-2xl md:text-3xl lg:text-4xl text-gray-800 font-bold
     }
 
 
     h3 {
-        @apply text-xl md:text-2xl lg:text-3xl text-gray-700 font-semibold
+        @apply text-xl md:text-2xl lg:text-3xl text-gray-700 font-bold
     }
 
     h4 {
-        @apply text-base lg:text-lg text-gray-700 font-semibold
+        @apply text-base md:text-lg text-gray-700 font-bold xl:leading-snug
     }
 
     p {