mirror of https://github.com/VERT-sh/VERT.git
Final mobile optimizations and about page source code link
This commit is contained in:
Realmy
parent
a8c90e90f1
commit
4584fbcf09
23
src/app.css
23
src/app.css
|
|
@ -17,8 +17,24 @@
|
|||
--fg: hsl(0, 0%, 10%);
|
||||
--fg-muted: hsl(0, 0%, 50%);
|
||||
--fg-muted-alt: hsl(0, 0%, 75%);
|
||||
--fg-highlight: hsl(303, 52%, 42%);
|
||||
--fg-failure: hsl(0, 67%, 49%);
|
||||
--transition: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
|
||||
--transition: linear(
|
||||
0,
|
||||
0.006,
|
||||
0.025 2.8%,
|
||||
0.101 6.1%,
|
||||
0.539 18.9%,
|
||||
0.721 25.3%,
|
||||
0.849 31.5%,
|
||||
0.937 38.1%,
|
||||
0.968 41.8%,
|
||||
0.991 45.7%,
|
||||
1.006 50.1%,
|
||||
1.015 55%,
|
||||
1.017 63.9%,
|
||||
1.001
|
||||
);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -33,7 +49,10 @@ body {
|
|||
|
||||
.btn {
|
||||
@apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-highlight {
|
||||
|
|
|
|||
|
|
@ -44,13 +44,24 @@
|
|||
|
||||
<div
|
||||
role="main"
|
||||
class="w-full h-full flex items-center p-4 flex-col gap-16"
|
||||
class="w-full h-full max-w-screen-lg mx-auto p-4"
|
||||
ondragenter={maybeNavToHome}
|
||||
>
|
||||
<div class="flex justify-center mb-5 lg:hidden">
|
||||
<a
|
||||
href="/"
|
||||
class="px-6 relative h-16 mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:hidden flex"
|
||||
>
|
||||
<div class="h-6 w-24 items-center flex justify-center">
|
||||
<Logo />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-screen-md p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt flex"
|
||||
class="w-full max-w-screen-md p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt flex mb-10 mx-auto lg:mt-5"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div class="md:p-1">
|
||||
<a
|
||||
href="/"
|
||||
class="px-3 relative w-full h-full mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:flex hidden"
|
||||
|
|
@ -110,13 +121,11 @@
|
|||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full max-w-screen-lg h-full grid grid-cols-1 grid-rows-1 relative"
|
||||
>
|
||||
<div class="w-full max-w-screen-lg grid grid-cols-1 grid-rows-1 relative">
|
||||
{#key data.pathname}
|
||||
<div class="w-full h-full">
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full"
|
||||
class="absolute top-0 left-0 w-full"
|
||||
in:blur={{
|
||||
duration,
|
||||
easing: quintOut,
|
||||
|
|
|
|||
|
|
@ -55,6 +55,19 @@
|
|||
<h2
|
||||
class="font-display text-3xl mt-12 text-transition"
|
||||
style="--delay: {5 * multiplier}ms"
|
||||
>
|
||||
👨💻 source code
|
||||
</h2>
|
||||
<p class="mt-6 text-transition" style="--delay: {6 * multiplier}ms">
|
||||
VERT is licensed under AGPL-3.0, and the source code can be found on <a
|
||||
class="hover:underline font-medium text-foreground-highlight"
|
||||
href="https://github.com/not-nullptr/VERT">GitHub</a
|
||||
>.
|
||||
</p>
|
||||
|
||||
<h2
|
||||
class="font-display text-3xl mt-12 text-transition"
|
||||
style="--delay: {7 * multiplier}ms"
|
||||
>
|
||||
🎨 credits
|
||||
</h2>
|
||||
|
|
@ -63,7 +76,7 @@
|
|||
<div class="hover:scale-105 w-48 transition-transform">
|
||||
<div
|
||||
class="border-2 credit-transition border-solid border-foreground-muted-alt rounded-2xl overflow-hidden"
|
||||
style="--delay: {i * 50 + multiplier * 5}ms;"
|
||||
style="--delay: {i * 50 + multiplier * 8}ms;"
|
||||
>
|
||||
<a class="w-48" href={credit.url} target="_blank">
|
||||
<img src={credit.avatar} alt="{credit.name}'s avatar" />
|
||||
|
|
@ -79,7 +92,10 @@
|
|||
{/each}
|
||||
</div>
|
||||
|
||||
<p class="text-foreground-muted text-base mt-10">
|
||||
<p
|
||||
class="text-foreground-muted text-base mt-10 text-transition"
|
||||
style="--delay: {9 * multiplier}ms"
|
||||
>
|
||||
(obviously inspired by <a
|
||||
href="https://cobalt.tools"
|
||||
class="hover:underline">cobalt.tools</a
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<div class="grid md:grid-cols-2 gap-3 mt-8">
|
||||
<button
|
||||
onclick={convertAll}
|
||||
class={clsx("btn flex-grow", {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export default {
|
|||
"foreground-muted": "var(--fg-muted)",
|
||||
"foreground-muted-alt": "var(--fg-muted-alt)",
|
||||
"foreground-failure": "var(--fg-failure)",
|
||||
"foreground-highlight": "var(--fg-highlight)",
|
||||
"accent-background": "var(--accent-bg)",
|
||||
"accent-foreground": "var(--accent-fg)",
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue