CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout improvements

Browse Source
This commit is contained in:
Yuri Tatishchev 2024-11-02 00:34:21 -07:00
parent 31d23c5e87
commit 7169bf0fb1
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
4 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -7,6 +7,6 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents" class="flex flex-col min-h-screen">%sveltekit.body%</div> <div class="flex flex-col min-h-screen">%sveltekit.body%</div>
</body> </body>
</html> </html>

9
src/routes/+layout.svelte
View File

@ -7,8 +7,8 @@
const { user } = data; const { user } = data;
</script> </script>
<header class="p-4 md:flex"> <header class="p-4 sm:flex">
<span class=" mr-6 font-bold xl:inline-block">My App</span> <span class=" mr-6 font-bold sm:inline-block">My App</span>
<nav class="flex items-center gap-6 text-sm"> <nav class="flex items-center gap-6 text-sm">
<a href="/" class={cn("hover:text-foreground/80 transition-colors", <a href="/" class={cn("hover:text-foreground/80 transition-colors",
$page.url.pathname === "/" ? "text-foreground" : "text-foreground/60")}>Home</a> $page.url.pathname === "/" ? "text-foreground" : "text-foreground/60")}>Home</a>
@ -22,6 +22,9 @@
{@render children()} {@render children()}
</main> </main>
<footer class="p-4 text-center"> <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
<!--Some shenanings needed to be done to get the footer position to stick correctly,
didn't work with display: contents-->
<footer class="p-4 relative text-center inset-x-0 bottom-0">
<p>&copy; 2024</p> <p>&copy; 2024</p>
</footer> </footer>

4
src/routes/+page.svelte
View File

@ -5,6 +5,10 @@
const { user } = data; const { user } = data;
</script> </script>
<svelte:head>
<title>VpGen</title>
</svelte:head>
<h1>Welcome to SvelteKit</h1> <h1>Welcome to SvelteKit</h1>
{#if user } {#if user }

4
src/routes/user/+page.svelte
View File

@ -16,6 +16,10 @@
} }
</script> </script>
<svelte:head>
<title>User Profile</title>
</svelte:head>
<p> <p>
{JSON.stringify(data.user)} {JSON.stringify(data.user)}
</p> </p>