upagge/noteshare.space
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile navbar, mobile landing page

Browse Source
This commit is contained in:
Maxime Cannoodt 2022-07-07 09:39:47 +02:00
parent 6e00255a8b
commit 378e337e9f
5 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/src/lib/components/index/tile.svelte
View File

@ -1,8 +1,8 @@
<div class="w-1/2 p-4">
<div class="md:w-1/2 md:p-4">
<div class="text-2xl font-bold mb-4 text-center">
<slot name="title" />
</div>
<div class="prose-lg text-center text-zinc-700 dark:text-zinc-300">
<div class="prose md:prose-lg text-center text-zinc-700 dark:text-zinc-300">
<slot name="text" />
</div>
</div>

54
webapp/src/lib/components/navbar/NavBar.svelte
View File

@ -1,22 +1,68 @@
<div id="navbar" class="h-14 border-b border-zinc-200 dark:border-zinc-700 transition-colors">
<script lang="ts">
import { onMount } from 'svelte';
import FaBars from 'svelte-icons/fa/FaBars.svelte';
import { slide } from 'svelte/transition';
export let showMobileMenu = false;
const mediaQueryHandler = (e: MediaQueryListEvent) => {
if (!e.matches) {
showMobileMenu = false;
}
};
onMount(() => {
const mediaListener = window.matchMedia('(max-width: 767px)');
mediaListener.addEventListener('change', mediaQueryHandler);
return () => mediaListener.removeEventListener('change', mediaQueryHandler);
});
</script>
<div
id="navbar"
class="h-[65px] md:h-14 border-b border-zinc-200 dark:border-zinc-700 transition-colors"
>
<div
id="navbar-content"
class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap"
>
<div id="navbar-left" class="flex gap-4">
<a href="/" class="self-center h-full pb-0.5">
<span id="name" class="self-center font-bold text-lg dark:text-white"
<span id="name" class="self-center font-bold text-2xl md:text-lg dark:text-white"
>📝 {import.meta.env.VITE_BRANDING}</span
>
</a>
<ul class="flex gap-4 content-center">
<ul class="hidden md:flex gap-4 content-center">
<slot name="left" />
</ul>
</div>
<div id="navbar-right" class="flex gap-8 flex">
<div id="navbar-right" class="hidden md:block flex gap-8 flex">
<ul class="flex gap-2.5 content-center">
<slot name="right" />
</ul>
</div>
<div class="md:hidden ml-6 cursor-pointer text-text-muted hover:text-text-normal w-6">
<button
aria-label="navigation menu"
on:click={() => (showMobileMenu = !showMobileMenu)}
class="flex flex-col justify-center"><FaBars /></button
>
</div>
</div>
</div>
{#if showMobileMenu}
<div
transition:slide
class="fixed top-[65px] w-full sm:w-72 sm:right-1
rounded-lg"
>
<div class="bg-zinc-200 relative mt-2 mx-2 px-4 py-2 rounded-[20px] shadow-sm sm:shadow-lg">
<div on:click={() => (showMobileMenu = !showMobileMenu)} class="flex flex-col gap-0 text-xl">
<slot name="left" />
<slot name="right" />
</div>
</div>
</div>
{/if}

5
webapp/src/lib/components/navbar/NavBarLink.svelte
View File

@ -2,7 +2,10 @@
export let href: string = '/';
</script>
<a {href} class="self-center w-full h-full text-zinc-600 dark:text-zinc-400">
<a
{href}
class="text-center py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 border-b md:border-b-0 border-zinc-300"
>
<div class="h-full flex flex-col justify-center">
<slot />
</div>

2
webapp/src/lib/components/navbar/ThemeToggle.svelte
View File

@ -11,7 +11,7 @@
<button
on:click={onClick}
class="self-center w-full h-full text-zinc-600 dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
class="py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
>
<div class="h-full flex flex-col justify-center">
<span class="h-6 text-black dark:text-zinc-300">

12
webapp/src/routes/index.svelte
View File

@ -19,10 +19,10 @@
<article class="mx-auto max-w-4xl text-zinc-900 dark:text-zinc-100">
<div class="space-y-6 pt-24 pb-32">
<h1 id="title" class="font-extrabold text-5xl text-center">
<h1 id="title" class="font-extrabold text-4xl md:text-5xl text-center">
Securely share your <span class="text-[#705dcf]">Obsidian</span> notes with one click.
</h1>
<p id="tagline" class="prose-2xl text-center text-zinc-700 dark:text-zinc-300">
<p id="tagline" class="prose-xl md:prose-2xl text-center text-zinc-700 dark:text-zinc-300">
Zero configuration. End-to-end encrypted. <br />No account needed.
</p>
<p id="install-button" class="text-center pt-2">
@ -37,7 +37,7 @@
<hr class="border-zinc-200 dark:border-zinc-700 transition-colors" />
<div class="space-y-8 pt-24 pb-16">
<div class="space-y-8 pt-12 md:pt-24 md:pb-16">
<div class="flex flex-row gap-4 mx-auto justify-center">
<Tile>
<h2 slot="title">End-to-end encrypted</h2>
@ -48,7 +48,7 @@
notes.
</p>
</Tile>
<img src="/encrypted.svg" alt="encrypted-art" class="w-80" />
<img src="/encrypted.svg" alt="encrypted-art" class="w-80 hidden md:block" />
</div>
<div class="flex flex-row gap-4 mx-auto justify-center flex-row-reverse">
@ -60,7 +60,7 @@
your Markdown notes. No account is needed to use our service.
</p>
</Tile>
<img src="/zeroconfig.svg" alt="encrypted-art" class="w-80" />
<img src="/zeroconfig.svg" alt="encrypted-art" class="w-80 hidden md:block" />
</div>
<div class="flex flex-row gap-4 mx-auto justify-center">
@ -75,7 +75,7 @@
> under the MIT license.
</p>
</Tile>
<img src="/opensource.svg" alt="encrypted-art" class="w-80" />
<img src="/opensource.svg" alt="encrypted-art" class="w-80 hidden md:block" />
</div>
</div>
</article>