styles: adjust mobile responsiveness for download cards

Ultramarine-Linux · Sep 16, 2024 · 261722f · 261722f
1 parent 1bc5ec2
commit 261722f
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/DownloadSection.astro b/src/components/DownloadSection.astro
@@ -18,19 +18,19 @@ const checksumLink = downloadLink + ".sha256sum";
 <div class="flex flex-col-reverse md:flex-row bg-gray-900 rounded-xl w-full overflow-hidden">
   <div class="p-6 md:p-8 w-full flex flex-col justify-between relative">
     <div class="z-10">
-      <h2 class="text-2xl md:text-3xl font-bold mb-4">Ultramarine {editionName}</h2>
+      <h2 class="text-2xl md:text-3xl font-bold mb-2 md:mb-4">Ultramarine {editionName}</h2>
       <p class="max-w-md text-sm md:text-base text-gray-400">
         {description}
       </p>
     </div>
-    <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center z-10 mt-6 md:mt-0">
+    <div class="flex flex-col sm:flex-row gap-2 md:gap-4 sm:items-center z-10 mt-6 md:mt-0">
       <button
-        class="flex flex-row gap-2 items-center justify-center px-4 md:px-6 py-2 bg-accent-700 rounded-xl text-gray-50 hover:bg-accent-800 transition-colors w-full sm:w-auto"
+        class="flex flex-row gap-2 items-center justify-center px-3 sm:px-4 md:px-6 py-2 bg-accent-700 rounded-xl text-gray-50 hover:bg-accent-800 transition-colors w-full sm:w-auto text-sm sm:text-base"
       >
         <DownloadIcon />
         <span>Download</span>
       </button>
-      <a href={checksumLink} class="text-gray-400 hover:text-blue-400 text-sm md:text-base">View Checksum</a>
+      <a href={checksumLink} class="text-gray-400 hover:text-blue-400 text-center md:text-left text-xs md:text-base">View Checksum</a>
     </div>
     {background &&
       <div class="absolute inset-0 overflow-hidden">