jakehamilton/floral.systems
0
0
Fork 0
forked from the-distro/floral.systems
Code Pull requests Activity

refactor(header): extract nav link component, add search widget stub, recolor header

Browse source
This commit is contained in:
Jake Hamilton 2024-10-24 14:19:28 -07:00
parent a9562e75ec
commit cea75cc1da
Signed by: jakehamilton
GPG key ID: 9762169A1B35EA68
3 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/nav-link.svelte Normal file
View file

@ -0,0 +1,10 @@
<script>
let props = $props()
</script>
<a
{...props}
class="{props.class ?? ""} no-link-style hover:underline"
>
{@render props.children?.()}
</a>

7
src/components/search.svelte Normal file
View file

@ -0,0 +1,7 @@
<div class="flex grow justify-end pl-4">
<input
type="text"
placeholder="Search..."
class="rounded-md bg-zinc-100 px-4 py-[6px] text-md/10 grow-0 focus:grow transition-all hover:ring-1 hover:ring-zinc-500 focus:outline-none focus:ring-2 focus:ring-coral-200 placeholder:text-zinc-500"
/>
</div>

19
src/routes/+layout.svelte
View file

@ -2,6 +2,8 @@
import { page } from "$app/stores"; import { page } from "$app/stores";
import "../main.css"; import "../main.css";
import Footer from "./footer.svelte"; import Footer from "./footer.svelte";
import NavLink from "../components/nav-link.svelte";
import Search from "../components/search.svelte";
let { children } = $props(); let { children } = $props();
globalThis.PKGS = "petalpkgs"; globalThis.PKGS = "petalpkgs";
@ -16,11 +18,11 @@
<meta name="theme-color" content="#136951"> <meta name="theme-color" content="#136951">
</svelte:head> </svelte:head>
<div class="flex flex-col text-blue-950 underline-offset-[4px]"> <div class="flex flex-col underline-offset-[4px]">
<nav class="min-h-16 h-16 bg-teal-700 text-coral-50 mb-2"> <nav class="min-h-16 h-16 bg-zinc-50 mb-2">
<div class="mx-auto container flex h-full justify-between"> <div class="mx-auto container flex h-full justify-between">
<a class="flex h-full items-center justify-center font-aladin text-3xl/10 <a class="flex h-full items-center justify-center font-aladin text-3xl/10
text-coral-50 hover:text-coral-100 no-link-style gap-x-2" text-zinc-800 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-400 hover:from-10% hover:to-coral-300 hover:text-transparent"
href="/"> href="/">
<enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" /> <enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" />
floral.systems floral.systems
@ -28,14 +30,11 @@
<span></span> <span></span>
<div <div
class="max-md:hidden text-lg flex gap-2 h-full items-center class="max-md:hidden flex gap-x-4 h-full items-center grow"
*:py-1 *:px-2 *:h-min *:bg-coral-100 *:rounded-md *:border-b-2 *:border-r-2 *:border-coral-200 text-blue-950
*:hover:bg-coral-200 <-TODO-fix-that-hover"
> >
<a href="/colors" class="no-link-style">colors</a> <Search />
<a href="/docs/intro" class="no-link-style">intro</a> <NavLink href="/docs/intro">Docs</NavLink>
<a href="https://fleurixos.org" class="no-link-style">Try {DISTRO}</a> <NavLink href="https://fleurixos.org" class="text-coral-600">Try {DISTRO}</NavLink>
<a href="https://petalpkgs.org" class="no-link-style">Use {PKGS}</a>
</div> </div>
</div> </div>
</nav> </nav>