add missing gradient to pages

This commit is contained in:
JovannMC 2025-01-13 19:13:39 +03:00
parent b1cd2e3c26
commit 4bf1be16ea
No known key found for this signature in database
3 changed files with 58 additions and 2 deletions

View File

@ -59,12 +59,32 @@
hsla(287, 100%, 50%, 0.2),
hsla(287, 100%, 50%, 0)
);
--bg-gradient-pink: linear-gradient(
to bottom,
var(--accent-pink),
hsla(303, 100%, 50%, 0) 25%
);
--bg-gradient-red: linear-gradient(
to bottom,
var(--accent-red),
hsla(348, 100%, 50%, 0) 25%
);
--bg-gradient-purple: linear-gradient(
to bottom,
var(--accent-purple),
hsla(264, 100%, 50%, 0) 25%
);
--bg-gradient-blue: linear-gradient(
to bottom,
var(--accent-blue),
hsla(220, 100%, 50%, 0) 25%
);
--bg-panel: hsl(0, 0%, 100%);
--bg-panel-accented: hsl(0, 0%, 92%);
--bg-separator: hsl(0, 0%, 88%);
--bg-button: var(--bg-panel-accented);
--bg-badge: hsl(0, 0%, 0%);
--bg-input: #E0E0E0;
--bg-input: #e0e0e0;
--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
}
@ -100,6 +120,26 @@
hsla(353, 100%, 50%, 0.07),
hsla(353, 100%, 50%, 0) 50%
);
--bg-gradient-pink: linear-gradient(
to bottom,
hsla(303, 100%, 50%, 0.1),
hsla(303, 100%, 50%, 0) 25%
);
--bg-gradient-red: linear-gradient(
to bottom,
hsla(348, 100%, 50%, 0.1),
hsla(348, 100%, 50%, 0) 25%
);
--bg-gradient-purple: linear-gradient(
to bottom,
hsla(264, 100%, 50%, 0.1),
hsla(264, 100%, 50%, 0) 25%
);
--bg-gradient-blue: linear-gradient(
to bottom,
hsla(220, 100%, 50%, 0.1),
hsla(220, 100%, 50%, 0) 25%
);
--bg-panel: hsl(220, 4%, 18%);
--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
--bg-separator: hsl(220, 4%, 28%);

View File

@ -181,4 +181,19 @@
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient);"
></div>
{:else if data.pathname === "/convert"}
<div
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-pink);"
></div>
{:else if data.pathname === "/settings"}
<div
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-blue);"
></div>
{:else if data.pathname === "/about"}
<div
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-pink);"
></div>
{/if}

View File

@ -44,6 +44,7 @@
onMount(async () => {
// Fetch GitHub contributors
// TODO: cache it, so we don't have to fetch it every time the page is loaded
try {
const response = await fetch(
"https://api.github.com/repos/not-nullptr/VERT/contributors",