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

Adjust layout of pages 

makes it easier (at least for me) to handle pages
This commit is contained in:
JovannMC 2024-12-31 10:08:14 +03:00
parent 84da07b1c0
commit 8c17117e43
No known key found for this signature in database
2 changed files with 119 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/routes/+layout.svelte
View File

@ -1,35 +1,24 @@
<script lang="ts">
import "../app.scss";
import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
import { beforeNavigate, goto } from "$app/navigation";
import { page } from "$app/stores";
import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
import { blur, duration } from "$lib/animation";
import { quintOut } from "svelte/easing";
import { files, theme } from "$lib/store/index.svelte";
import Logo from "$lib/components/visual/svg/Logo.svelte";
import featuredImage from "$lib/assets/VERT_Feature.webp";
import {
PUB_ENV,
PUB_HOSTNAME,
PUB_PLAUSIBLE_URL,
} from "$env/static/public";
import FancyMenu from "$lib/components/functional/FancyMenu.svelte";
import { writable } from "svelte/store";
import {
InfoIcon,
MoonIcon,
RefreshCw,
SettingsIcon,
SunIcon,
UploadIcon,
} from "lucide-svelte";
import { browser } from "$app/environment";
import JSCookie from "js-cookie";
import { onMount } from "svelte";
import Panel from "$lib/components/visual/Panel.svelte";
import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
import Navbar from "$lib/components/functional/Navbar.svelte";
import Footer from "$lib/components/visual/Footer.svelte";
import { page } from "$app/stores";
import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
import { files } from "$lib/store/index.svelte";
import {
InfoIcon,
RefreshCw,
SettingsIcon,
UploadIcon,
} from "lucide-svelte";
import { onMount } from "svelte";
import { quintOut } from "svelte/easing";
import { writable } from "svelte/store";
import { fade } from "svelte/transition";
import "../app.scss";
let { children, data } = $props();
let shouldGoBack = writable(false);
@ -121,7 +110,8 @@
></script>{/if}
</svelte:head>
<div class="absolute top-8 left-0 w-screen flex justify-center z-50">
<div class="flex flex-col h-screen">
<div class="p-8 w-screen flex justify-center z-50">
<div class="flex flex-col gap-4">
<Navbar {items} />
{#if items
@ -162,7 +152,7 @@
</div>
</div>
<div class="min-h-screen grid grid-rows-1 grid-cols-1">
<div class="grid grid-rows-1 grid-cols-1 h-full">
{#key data.pathname}
<div
class="row-start-1 col-start-1"
@ -195,11 +185,12 @@
origin: "top center",
}}
>
<div class="min-h-screen">
<div class="flex flex-col h-full">
<div class="flex-grow">
{@render children()}
</div>
<div
class="-mt-14 w-full h-14 border-t border-separator relative -z-50"
class="w-full h-14 border-t border-separator relative -z-50"
>
<Footer
class="w-full h-full"
@ -211,8 +202,10 @@
/>
</div>
</div>
</div>
{/key}
</div>
</div>
{#if data.pathname === "/"}
<div

17
src/routes/+page.svelte
View File

@ -11,12 +11,15 @@
</script>
<div
class="absolute -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
class="w-screen h-full flex items-center justify-center overflow-hidden -mt-20"
>
<div
class="absolute -z-30 top-0 left-0 w-screen flex items-center justify-center overflow-hidden"
>
<VertVBig class="fill-[--fg] opacity-50" />
</div>
<div class="w-screen h-screen flex items-center justify-center">
<div class="w-screen flex items-center justify-center flex-grow">
<div class="max-w-5xl w-full">
<div class="flex items-center h-[266px] gap-24">
<div class="flex-grow w-full">
@ -30,16 +33,20 @@
class="font-normal text-xl text-muted blur-in"
style:--delay="60ms"
>
All processing done on your device. No file size limit, no
ads, and completely open source.
All processing done on your device. No file size limit,
no ads, and completely open source.
</p>
</div>
<div class="flex-grow w-full h-full blur-in" style:--delay="60ms">
<div
class="flex-grow w-full h-full blur-in"
style:--delay="60ms"
>
<Uploader class="w-full h-full" />
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes blur-in {