layout improvements

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

View File

@ -7,6 +7,6 @@
%sveltekit.head%
</head>
<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>
</html>

View File

@ -7,8 +7,8 @@
const { user } = data;
</script>
<header class="p-4 md:flex">
<span class=" mr-6 font-bold xl:inline-block">My App</span>
<header class="p-4 sm:flex">
<span class=" mr-6 font-bold sm:inline-block">My App</span>
<nav class="flex items-center gap-6 text-sm">
<a href="/" class={cn("hover:text-foreground/80 transition-colors",
$page.url.pathname === "/" ? "text-foreground" : "text-foreground/60")}>Home</a>
@ -22,6 +22,9 @@
{@render children()}
</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>
</footer>

View File

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

View File

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