feat(layout): ?uwu qs == spin

Co-authored-by: Jake Hamilton <jake.hamilton@hey.com>
This commit is contained in:
mei (ckie) 2024-10-25 01:51:56 +03:00
parent d3ba4573c9
commit 518fbaf61e
Signed by: ckie
GPG key ID: 13E79449C0525215
4 changed files with 14 additions and 3 deletions

BIN
bun.lockb

Binary file not shown.

View file

@ -28,6 +28,7 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@sveltejs/enhanced-img": "^0.3.9", "@sveltejs/enhanced-img": "^0.3.9",
"clsx": "^2.1.1",
"svelte-highlight": "^7.7.0" "svelte-highlight": "^7.7.0"
} }
} }

4
src/lib/uwu.ts Normal file
View file

@ -0,0 +1,4 @@
import { page } from "$app/stores";
import { get } from "svelte/store";
export const isUwU = () => get(page).url.searchParams.has("uwu");

View file

@ -3,6 +3,8 @@
import "../main.css"; import "../main.css";
import Footer from "$lib/components/Footer.svelte"; import Footer from "$lib/components/Footer.svelte";
import Nav from "$lib/components/Nav.svelte"; import Nav from "$lib/components/Nav.svelte";
import { isUwU } from "$lib/uwu";
import clsx from "clsx";
let { children } = $props(); let { children } = $props();
globalThis.PKGS = "petalpkgs"; globalThis.PKGS = "petalpkgs";
@ -20,10 +22,14 @@
<div class="flex flex-col underline-offset-[4px]"> <div class="flex flex-col underline-offset-[4px]">
<nav class="min-h-16 h-16 bg-zinc-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="group flex h-full items-center justify-center font-aladin text-3xl/10
text-coral-970 transition-colors duration-75 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-500 hover:from-15% hover:to-coral-400 hover:text-transparent" text-coral-970 transition-colors duration-75 no-link-style gap-x-2
hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-500 hover:from-15% hover:to-coral-400 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"
class={clsx(isUwU() && "transform rotate-0 group-hover:rotate-[360deg] transition-transform ease-in-out duration-500")}
/>
floral.systems floral.systems
</a> </a>
<span></span> <span></span>