Rift, whatever autoformatter you are using is giving me cancer
This commit is contained in:
parent
2425f07d6b
commit
5fe93963f3
3 changed files with 22 additions and 78 deletions
|
|
@ -6,40 +6,22 @@ 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 content-center justify-center pb-64 roboto"
|
||||
>
|
||||
{
|
||||
assets_json.error ? (
|
||||
<h1 class="text-text-color text-3xl">
|
||||
Unexpected error. Are you sure you typed the name right?
|
||||
</h1>
|
||||
<div 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 ? (
|
||||
<h1 class="text-text-color text-3xl"> Unexpected error. Are you sure you typed the name right? </h1>
|
||||
) : (
|
||||
<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-[44rem] h-[25rem] object-cover rounded-xl"
|
||||
>
|
||||
<video src={`/videos/${assets_json.background_video}`} controls class="w-[44rem] h-[25rem] object-cover rounded-xl">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
) : assets_json.backgroundImage ? (
|
||||
// Background image
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(/images/${assets_json.backgroundImage})`,
|
||||
}}
|
||||
class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"
|
||||
/>
|
||||
<div style={{backgroundImage: `url(/images/${assets_json.backgroundImage})`}} 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-[44rem] h-[25rem] object-cover rounded-xl"
|
||||
/>
|
||||
<img src={`/images/${assets_json.image}`} alt={assets_json.title} class="w-[44rem] h-[25rem] object-cover rounded-xl"/>
|
||||
)}
|
||||
<div class="flex flex-col ml-7 p-16">
|
||||
<div class="text-xl">{assets_json.type}</div>
|
||||
|
|
@ -48,10 +30,7 @@ const assets_json = await response.json();
|
|||
By <strong>{assets_json.author}</strong>
|
||||
</div>
|
||||
<div class="text-xl">{assets_json.description}</div>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<button 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
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,65 +15,30 @@ const last_page = assets_json.pages;
|
|||
---
|
||||
|
||||
<Layout title="Catalog">
|
||||
<div
|
||||
class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto"
|
||||
>
|
||||
<div>
|
||||
{page}
|
||||
The Nebula Catalog is a place for you to find user-created themes and plugins.
|
||||
</div>
|
||||
<div class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto">
|
||||
<div> The Nebula Catalog is a place for you to find user-created themes and plugins. </div>
|
||||
<CatalogCard client:only="svelte" page={page} />
|
||||
<div class="flex flex-row pb-8 gap-4 roboto">
|
||||
{
|
||||
/* The first page. If the user is on this page, or the one after it, don't show it. */
|
||||
}
|
||||
{
|
||||
parseInt(page!) > 2 && (
|
||||
<a
|
||||
href={"/catalog/" + 1}
|
||||
class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
{/* The first page. If the user is on this page, or the one after it, don't show it. */}
|
||||
{parseInt(page!) > 2 && (
|
||||
<a href={"/catalog/" + 1} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"> 1 </a>
|
||||
)
|
||||
}
|
||||
{
|
||||
previous_page > 0 && (
|
||||
<a
|
||||
href={"/catalog/" + previous_page}
|
||||
class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
|
||||
>
|
||||
{previous_page}
|
||||
</a>
|
||||
{previous_page > 0 && (
|
||||
<a href={"/catalog/" + previous_page} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{previous_page}</a>
|
||||
)
|
||||
}
|
||||
|
||||
{/* The greyed out page the user is currently on */}
|
||||
<a
|
||||
class="w-8 h-8 bg-lighter items-center text-center content-center text-text-color rounded-md"
|
||||
>
|
||||
{page}
|
||||
</a>
|
||||
|
||||
{
|
||||
next_page < last_page && (
|
||||
<a
|
||||
href={"/catalog/" + next_page}
|
||||
class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
|
||||
>
|
||||
{next_page}
|
||||
</a>
|
||||
<a class="w-8 h-8 bg-lighter items-center text-center content-center text-text-color rounded-md">{page}</a>
|
||||
{next_page < last_page && (
|
||||
<a href={"/catalog/" + next_page} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{next_page}</a>
|
||||
)
|
||||
}
|
||||
{/* Pagnation input */}
|
||||
<Pagnation />
|
||||
{/* The last page. If the user is on this page, don't show it. */}
|
||||
{
|
||||
page != last_page && (
|
||||
<a
|
||||
href={"/catalog/" + assets_json.pages}
|
||||
class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
|
||||
>
|
||||
{page != last_page && (
|
||||
<a href={"/catalog/" + assets_json.pages} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">
|
||||
{assets_json.pages}
|
||||
</a>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ export default {
|
|||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
colors: {
|
||||
primary: "var(--background-primary)",
|
||||
lighter: "var(--background-lighter)",
|
||||
"primary": "var(--background-primary)",
|
||||
"lighter": "var(--background-lighter)",
|
||||
"navbar-text-color": "var(--navbar-text-color)",
|
||||
"navbar-color": "var(--navbar-color)",
|
||||
"text-color": "var(--navbar-link-color)",
|
||||
"text-hover-color": "var(--navbar-link-hover-color)",
|
||||
input: "var(--input-background-color)",
|
||||
"input": "var(--input-background-color)",
|
||||
"input-text": "var(--input-text-color)",
|
||||
"input-border-color": "var(--input-border-color)",
|
||||
"dropdown-option-hover-color": "var(--dropdown-option-hover-color)",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue