Style package page better
This commit is contained in:
parent
607adcf737
commit
088071fa38
1 changed files with 8 additions and 8 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue