forked from the-distro/floral.systems
refactor(header): extract nav link component, add search widget stub, recolor header
This commit is contained in:
parent
a9562e75ec
commit
cea75cc1da
10
src/components/nav-link.svelte
Normal file
10
src/components/nav-link.svelte
Normal 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
7
src/components/search.svelte
Normal 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>
|
|
@ -2,6 +2,8 @@
|
|||
import { page } from "$app/stores";
|
||||
import "../main.css";
|
||||
import Footer from "./footer.svelte";
|
||||
import NavLink from "../components/nav-link.svelte";
|
||||
import Search from "../components/search.svelte";
|
||||
|
||||
let { children } = $props();
|
||||
globalThis.PKGS = "petalpkgs";
|
||||
|
@ -16,11 +18,11 @@
|
|||
<meta name="theme-color" content="#136951">
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex flex-col text-blue-950 underline-offset-[4px]">
|
||||
<nav class="min-h-16 h-16 bg-teal-700 text-coral-50 mb-2">
|
||||
<div class="flex flex-col underline-offset-[4px]">
|
||||
<nav class="min-h-16 h-16 bg-zinc-50 mb-2">
|
||||
<div class="mx-auto container flex h-full justify-between">
|
||||
<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="/">
|
||||
<enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" />
|
||||
floral.systems
|
||||
|
@ -28,14 +30,11 @@
|
|||
<span></span>
|
||||
|
||||
<div
|
||||
class="max-md:hidden text-lg flex gap-2 h-full items-center
|
||||
*: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"
|
||||
class="max-md:hidden flex gap-x-4 h-full items-center grow"
|
||||
>
|
||||
<a href="/colors" class="no-link-style">colors</a>
|
||||
<a href="/docs/intro" class="no-link-style">intro</a>
|
||||
<a href="https://fleurixos.org" class="no-link-style">Try {DISTRO}</a>
|
||||
<a href="https://petalpkgs.org" class="no-link-style">Use {PKGS}</a>
|
||||
<Search />
|
||||
<NavLink href="/docs/intro">Docs</NavLink>
|
||||
<NavLink href="https://fleurixos.org" class="text-coral-600">Try {DISTRO}</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
Loading…
Reference in a new issue