baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

mobile-friendly #2

Merged
baobeld merged 6 commits from mobile-friendly into main 2025-05-01 13:33:06 -04:00
Conversation 0 Commits 6 Files changed 12 +50 -31
4 changed files with 50 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 5b8eaca2cb - Show all commits

4
src/lib/components/Footer.svelte
View file

@ -9,8 +9,8 @@
let { links }: Props = $props(); let { links }: Props = $props();
</script> </script>
<div class="flex justify-between"> <div class="flex justify-between text-xs lg:text-lg">
<div class="flex gap-8"> <div class="flex gap-2 lg:gap-8">
{#each links as link (link.href)} {#each links as link (link.href)}
<a <a
href={link.href} href={link.href}

18
src/lib/components/Navbar.svelte
View file

@ -1,30 +1,36 @@
<script lang="ts"> <script lang="ts">
import { Menu } from 'lucide-svelte';
interface Props { interface Props {
drawerId: string;
title: string; title: string;
pages: { slug: string; name: string }[]; pages: { slug: string; name: string }[];
route: { id: string | null }; route: { id: string | null };
} }
let { title, pages, route }: Props = $props(); let { drawerId, title, pages, route }: Props = $props();
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="flex flex-1 items-center gap-4"> <div class="flex flex-1 items-center gap-4">
<a href="/"> <a href="/">
<div class="avatar avatar-placeholder w-12"> <div class="avatar avatar-placeholder">
<div <div
class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl" class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-8 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:text-2xl lg:w-12"
> >
<span class="text-2xl"> {title.at(0)} </span> <span class="text-xl lg:text-2xl"> {title.at(0)} </span>
</div> </div>
</div> </div>
</a> </a>
<h2 class="text-primary text-3xl font-light"> <h2 class="text-primary text-2xl font-light lg:text-3xl">
<span class="text-base-content font-semibold">Benjamin</span> <span class="text-base-content font-semibold">Benjamin</span>
Palko Palko
</h2> </h2>
</div> </div>
<div class="flex gap-4 text-lg"> <label for={drawerId} aria-label="open sidebar" class="btn btn-square btn-outline lg:hidden">
<Menu />
</label>
<div class="hidden gap-4 text-lg lg:flex">
{#each pages as page (page.slug)} {#each pages as page (page.slug)}
<a <a
href={page.slug} href={page.slug}

9
src/lib/components/WIP.svelte
View file

@ -6,11 +6,11 @@
{#snippet Banner(messages: string[], backwards: boolean)} {#snippet Banner(messages: string[], backwards: boolean)}
<div <div
class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-6 text-xl font-semibold text-black" class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-3 text-xs font-semibold text-black lg:py-6 lg:text-lg"
class:rotate-5={!backwards} class:rotate-5={!backwards}
class:-rotate-5={backwards} class:-rotate-5={backwards}
> >
<div class="scroll-parent w-full overflow-x-hidden bg-amber-400 px-8"> <div class="scroll-parent h-4 w-full overflow-x-hidden bg-amber-400 px-8 lg:h-6">
<div <div
class="scroll-element flex justify-around" class="scroll-element flex justify-around"
class:primary={!backwards} class:primary={!backwards}
@ -40,9 +40,9 @@
</div> </div>
{/snippet} {/snippet}
<div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-6"> <div class="bg-hazard rounded-box h-full w-full border border-amber-400 p-4 lg:p-6">
<div <div
class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-48 overflow-hidden border border-amber-400" class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-32 overflow-hidden border border-amber-400 lg:gap-48"
> >
{@render Banner(messages, false)} {@render Banner(messages, false)}
{@render Banner(messages, true)} {@render Banner(messages, true)}
@ -52,7 +52,6 @@
<style> <style>
.scroll-parent { .scroll-parent {
position: relative; position: relative;
height: 1.8rem;
} }
.scroll-element { .scroll-element {

50
src/routes/+layout.svelte
View file

@ -23,23 +23,37 @@
let current = $derived(pages.find((p) => p.slug === page.route.id)); let current = $derived(pages.find((p) => p.slug === page.route.id));
</script> </script>
<div class="h-screen w-screen p-12"> <div class="drawer drawer-end">
<div <input id="navigation-drawer" type="checkbox" class="drawer-toggle" />
class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] rounded-4xl"
> <div class="drawer-content h-screen w-screen lg:p-12">
<header class=" p-8"> <div
<Navbar title="Benjamin Palko" {pages} route={page.route} /> class=" bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] lg:rounded-4xl"
</header> >
{#if current && current.slug !== '/'} <header class="lg:p-8">
<div class="bg-base-300 w-full px-12 py-8"> <Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
<h1 class="text-4xl font-light">{current.name}</h1> </header>
</div> {#if current && current.slug !== '/'}
{/if} <div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
<main> <h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
{@render children()} </div>
</main> {/if}
<footer class="p-8"> <main>
<Footer links={socialLinks} /> {@render children()}
</footer> </main>
<footer class="p-8">
<Footer links={socialLinks} />
</footer>
</div>
</div>
<div class="drawer-side">
<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 flex min-h-full w-full flex-col-reverse gap-4 p-4">
{#each pages as page (page.slug)}
<li><a href={page.slug} class="btn btn-primary btn-lg">{page.name}</a></li>
{/each}
<label for="navigation-drawer" class="btn btn-error btn-lg">Close</label>
</ul>
</div> </div>
</div> </div>