From 088071fa38cd781d11d9467870973b19393d8d0d Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Wed, 14 Aug 2024 23:17:51 -0500
Subject: [PATCH] Style package page better

---
 src/pages/assets/[...package_name].astro | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/assets/[...package_name].astro b/src/pages/assets/[...package_name].astro
index b4f3a3c..8d25428 100644
--- a/src/pages/assets/[...package_name].astro
+++ b/src/pages/assets/[...package_name].astro
@@ -9,7 +9,7 @@ const assets_json = await response.json();
 
 <Layout title="Package">
   <div
-    class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center"
+    class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center pb-64 roboto"
   >
     {
       assets_json.error ? (
@@ -17,13 +17,13 @@ const assets_json = await response.json();
           Unexpected error. Are you sure you typed the name right?
         </h1>
       ) : (
-        <div class="flex flex-row items-center text-text-color">
+        <div class="flex flex-row items-center text-text-color bg-navbar-color rounded-2xl">
           {assets_json.background_video ? (
             // Background video
             <video
               src={`/videos/${assets_json.background_video}`}
               controls
-              class="w-96 h-72 object-cover rounded-xl"
+              class="w-[44rem] h-[25rem] object-cover rounded-xl"
             >
               Your browser does not support the video tag.
             </video>
@@ -33,25 +33,25 @@ const assets_json = await response.json();
               style={{
                 backgroundImage: `url(/images/${assets_json.backgroundImage})`,
               }}
-              class="w-96 h-72 bg-cover bg-center rounded-xl"
+              class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"
             />
           ) : (
             // Fallback to cover image
             <img
               src={`/images/${assets_json.image}`}
               alt={assets_json.title}
-              class="w-96 h-72 object-cover rounded-xl"
+              class="w-[44rem] h-[25rem] object-cover rounded-xl"
             />
           )}
-          <div class="flex flex-col ml-7">
+          <div class="flex flex-col ml-7 p-16">
             <div class="text-xl">{assets_json.type}</div>
-            <div class="text-3xl">{assets_json.title}</div>
+            <div class="text-4xl roboto font-semibold">{assets_json.title}</div>
             <div class="text-xl">
               By <strong>{assets_json.author}</strong>
             </div>
             <div class="text-xl">{assets_json.description}</div>
             <button
-              class="border-text-color border-2 rounded-lg w-40"
+              class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
               id="install"
             >
               Install