RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new home page 

makes vert logo clickable on both desktop and mobile
This commit is contained in:
JovannMC 2025-02-05 19:54:15 +03:00
parent a6cbdefc40
commit d835a50a01
No known key found for this signature in database
6 changed files with 28 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/app.scss
View File

@ -45,20 +45,10 @@
// backgrounds
--bg: hsl(0, 0%, 95%);
--bg-gradient: linear-gradient(
to bottom left,
hsla(235, 100%, 50%, 0.3),
hsla(235, 100%, 50%, 0) 75%
),
linear-gradient(
to bottom right,
hsla(353, 100%, 50%, 0.4),
hsla(353, 100%, 50%, 0) 50%
),
linear-gradient(
to bottom,
hsla(287, 100%, 50%, 0.2),
hsla(287, 100%, 50%, 0)
);
to bottom,
var(--accent-pink),
hsla(303, 100%, 50%, 0) 100%
);
--bg-gradient-pink: linear-gradient(
to bottom,
var(--accent-pink),
@ -106,20 +96,10 @@
// backgrounds
--bg: hsl(220, 5%, 12%);
--bg-gradient: linear-gradient(
to bottom,
hsla(287, 100%, 50%, 0.1),
hsla(287, 100%, 50%, 0)
),
linear-gradient(
to bottom left,
hsla(235, 100%, 50%, 0.07),
hsla(235, 100%, 50%, 0) 50%
),
linear-gradient(
to bottom right,
hsla(353, 100%, 50%, 0.07),
hsla(353, 100%, 50%, 0) 50%
);
to bottom,
hsla(303, 100%, 50%, 0.1),
hsla(303, 100%, 50%, 0) 100%
);
--bg-gradient-pink: linear-gradient(
to bottom,
hsla(303, 100%, 50%, 0.1),

27
src/lib/assets/vert-bg.svg
View File

@ -1,22 +1,7 @@
<svg width="1389" height="1080" viewBox="0 0 1389 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M418.719 1080L0.480804 0H2.62554L420.863 1080H418.719Z" fill="url(#paint0_linear_6_220)" fill-opacity="0.1"/>
<path d="M829.044 1080L412.359 0H410.215L826.9 1080H829.044Z" fill="url(#paint1_linear_6_220)" fill-opacity="0.1"/>
<path d="M788.673 555.925L987.856 0H989.981L790.985 555.402L1064.61 827.169L1386.13 0H1388.27L1065.37 830.741L788.673 555.925Z" fill="url(#paint2_linear_6_220)" fill-opacity="0.1"/>
<defs>
<linearGradient id="paint0_linear_6_220" x1="694.377" y1="0" x2="694.377" y2="1080" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.75" stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_6_220" x1="694.377" y1="0" x2="694.377" y2="1080" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.75" stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_6_220" x1="694.377" y1="0" x2="694.377" y2="1080" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.75" stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 382 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.836581,0,0,0.836581,489.292,-1056.51)">
<path d="M-237.415,1365.74L-343.006,1337.94L-327.12,1262.89L-129.419,1327.24L-146.976,1409.51L-371.65,1473.83L-355.043,1393.57L-237.415,1365.74ZM-354.366,1394.23L-370.603,1472.7L-147.656,1408.87L-130.348,1327.77L-326.524,1263.92L-342.069,1337.36L-234.128,1365.79L-354.366,1394.23ZM-353.43,1527.47L-326.582,1500.63L-272.886,1554.32L-299.734,1581.17C-329.97,1611.41 -371.734,1630.11 -417.831,1630.11C-510.023,1630.11 -584.871,1555.27 -584.871,1463.07C-584.871,1370.88 -510.023,1296.03 -417.831,1296.03L-379.862,1296.03L-379.862,1371.97L-417.831,1371.97C-468.111,1371.97 -508.933,1412.79 -508.933,1463.07C-508.933,1513.35 -468.111,1554.17 -417.831,1554.17C-392.692,1554.17 -369.92,1543.96 -353.43,1527.47ZM-352.867,1528.04C-369.501,1544.67 -392.472,1554.97 -417.831,1554.97C-468.551,1554.97 -509.73,1513.79 -509.73,1463.07C-509.73,1412.35 -468.551,1371.17 -417.831,1371.17L-380.659,1371.17L-380.659,1296.83L-417.831,1296.83C-509.583,1296.83 -584.074,1371.32 -584.074,1463.07C-584.074,1554.83 -509.583,1629.32 -417.831,1629.32C-371.954,1629.32 -330.39,1610.7 -300.297,1580.61L-274.013,1554.32L-326.582,1501.75L-352.867,1528.04Z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

11
src/lib/components/functional/Navbar.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { browser } from "$app/environment";
import { page } from "$app/stores";
import { page } from "$app/state";
import { duration, fade } from "$lib/animation";
import { setTheme } from "$lib/store/index.svelte";
import clsx from "clsx";
@ -31,7 +31,7 @@
const linkRects = $derived(links.map((l) => l.getBoundingClientRect()));
const selectedIndex = $derived(
items.findIndex((i) => i.activeMatch($page.url.pathname)),
items.findIndex((i) => i.activeMatch(page.url.pathname)),
);
</script>
@ -45,7 +45,7 @@
"w-16 md:w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden",
{
"bg-panel-accented":
item.activeMatch($page.url.pathname) && !browser,
item.activeMatch(page.url.pathname) && !browser,
},
)}
draggable={false}
@ -116,13 +116,14 @@
0)}px; transition: left var(--transition) {duration}ms, top var(--transition) {duration}ms;"
></div>
{/if}
<div
<a
class="w-32 h-full bg-accent rounded-xl items-center justify-center hidden md:flex"
href="/"
>
<div class="h-5 w-full">
<Logo />
</div>
</div>
</a>
{#each items as item, i (item.url)}
{@render link(item, i)}
{/each}

8
src/lib/sections/settings/Appearance.svelte
View File

@ -29,8 +29,8 @@
}
}
function setAnimation(motion: boolean) {
if (motion) {
function setEffects(effects: boolean) {
if (effects) {
enableMotionElement.classList.add("selected");
disableMotionElement.classList.remove("selected");
setMotion(true);
@ -127,7 +127,7 @@
<div class="flex gap-3 w-full">
<button
bind:this={enableMotionElement}
onclick={() => setAnimation(true)}
onclick={() => setEffects(true)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PlayIcon size="24" class="inline-block mr-2" />
@ -136,7 +136,7 @@
<button
bind:this={disableMotionElement}
onclick={() => setAnimation(false)}
onclick={() => setEffects(false)}
class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
>
<PauseIcon size="24" class="inline-block mr-2" />

1
src/lib/store/index.svelte.ts
View File

@ -197,5 +197,4 @@ export const showGradient = writable(true);
export const gradientColor = writable("");
export const isMobile = writable(false);
export const isFirefox = writable(false);
export const motion = writable(true);

8
src/routes/+layout.svelte
View File

@ -173,12 +173,12 @@
in:fade={{
duration,
easing: quintOut,
delay: isMobile ? 0 : 100,
delay: $isMobile ? 0 : 100,
}}
out:fade={{
duration,
easing: quintOut,
delay: isMobile ? 0 : 200,
delay: $isMobile ? 0 : 200,
}}
>
{@render children()}
@ -217,7 +217,7 @@
<div
class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
>
<VertVBig class="fill-[--fg] opacity-50" />
<VertVBig class="fill-[--fg] opacity-10 w-[108%] h-[108%]"/>
</div>
<div
id="gradient-bg"
@ -242,7 +242,7 @@
}}
>
<img
class="object-cover w-full {!isMobile
class="object-cover w-full {!$isMobile
? 'h-[calc(100%-66px)]'
: 'h-full'} blur-md"
src={files.files[0].blobUrl}