Style package page better

This commit is contained in:
rift 2024-08-14 23:17:51 -05:00
parent 607adcf737
commit 088071fa38

View file

@ -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