From 36d36474ef581f31e00124ee33a8afd55d1401c4 Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Wed, 1 Apr 2026 09:57:58 -0700
Subject: [PATCH] unified lilypad menu (desktop bottom-left, mobile frog
 toggle), fixed frog sizing/position, mobile login dropdown, remove hover
 animation

---
 src/lib/FrogHeader.svelte  | 199 +++++++++++++++++++++++--------------
 src/lib/LoginButton.svelte |  11 ++
 src/routes/+layout.svelte  |   3 +-
 3 files changed, 134 insertions(+), 79 deletions(-)

diff --git a/src/lib/FrogHeader.svelte b/src/lib/FrogHeader.svelte
index 95bca8d..58626e1 100644
--- a/src/lib/FrogHeader.svelte
+++ b/src/lib/FrogHeader.svelte
@@ -1,7 +1,8 @@
 <!--
 	FrogHeader: Site header with the "vod frog" logo and frog mascot.
-	On mobile, the frog acts as a menu toggle — tapping it reveals lilypad
-	menu items that drift down with staggered animation.
+	Includes a lilypad menu (settings + credits) that is:
+	  - Always visible fixed bottom-left on desktop
+	  - Toggled by tapping the frog on mobile, overlaid on the page
 -->
 <script lang="ts">
 	import LoginButton from './LoginButton.svelte';
@@ -59,26 +60,27 @@
 	<div class="title-area">
 		<a href="/" class="logo-link" onclick={handleClick}><h1 class="logo-text">vod frog</h1></a>
 		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<img
-			src="/froggie.png"
-			alt="A cute frog"
-			class="header-frog"
-			class:menu-open={menuOpen}
-			onclick={onFrogClick}
-			ontouchend={onFrogTouch}
-		/>
-	</div>
-
-	<!-- Mobile lilypad menu — stacked lilypads that drift down -->
-	<div class="mobile-menu" class:open={menuOpen}>
-		<button class="lily-item" onclick={() => { playCroak(); }}>
-			<img src="/lilymenu.svg" alt="" class="lily-img" />
-			<span class="lily-label">settings</span>
-		</button>
-		<button class="lily-item" onclick={openCredits}>
-			<img src="/lilymenu.svg" alt="" class="lily-img" />
-			<span class="lily-label">credits</span>
-		</button>
+		<div class="frog-area">
+			<img
+				src="/froggie.png"
+				alt="A cute frog"
+				class="header-frog"
+				class:menu-open={menuOpen}
+				onclick={onFrogClick}
+				ontouchend={onFrogTouch}
+			/>
+			<!-- Mobile: menu drops down directly under the frog -->
+			<div class="lily-menu mobile-lily" class:open={menuOpen}>
+				<button class="lily-item" onclick={() => { playCroak(); }}>
+					<img src="/lilymenu.svg" alt="" class="lily-img" />
+					<span class="lily-label">settings</span>
+				</button>
+				<button class="lily-item" onclick={openCredits}>
+					<img src="/lilymenu.svg" alt="" class="lily-img" />
+					<span class="lily-label">credits</span>
+				</button>
+			</div>
+		</div>
 	</div>
 
 	<div class="subtitle-lines">
@@ -87,6 +89,18 @@
 	</div>
 </header>
 
+<!-- Desktop: lilypad menu fixed bottom-left -->
+<div class="lily-menu desktop-lily">
+	<button class="lily-item" onclick={() => { playCroak(); }}>
+		<img src="/lilymenu.svg" alt="" class="lily-img" />
+		<span class="lily-label">settings</span>
+	</button>
+	<button class="lily-item" onclick={openCredits}>
+		<img src="/lilymenu.svg" alt="" class="lily-img" />
+		<span class="lily-label">credits</span>
+	</button>
+</div>
+
 {#if showCreditsModal}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="modal-backdrop" onclick={onBackdropClick}>
@@ -142,28 +156,76 @@
 		z-index: 1;
 	}
 
-	.header-frog {
+	.frog-area {
 		position: absolute;
-		right: -80px;
-		top: -60px;
-		width: clamp(120px, 18vw, 220px);
-		height: auto;
+		right: -140px;
+		top: -50px;
 		z-index: 12;
+	}
+
+	.header-frog {
+		width: clamp(150px, 18vw, 280px);
+		height: auto;
 		transform: rotate(-10deg);
 		transform-origin: center center;
 		filter: drop-shadow(2px 4px 6px rgba(10, 24, 43, 0.3));
 		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 	}
 
-	.header-frog:hover {
-		transform: rotate(5deg) scale(1.1);
+
+
+	/* ---- Lilypad menu ---- */
+	.lily-menu {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+	}
+
+	.desktop-lily {
+		position: fixed;
+		bottom: 16px;
+		left: 16px;
+		z-index: 100;
 	}
 
-	/* Mobile menu — hidden on desktop */
-	.mobile-menu {
+	.mobile-lily {
 		display: none;
 	}
 
+	.lily-item {
+		all: unset;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: transform 0.2s ease;
+	}
+
+	.lily-item:hover {
+		transform: scale(1.08) rotate(-3deg);
+	}
+
+	/* Offset alternating pads for a natural stagger */
+	.lily-item:nth-child(even) {
+		margin-left: 24px;
+	}
+
+	.lily-img {
+		width: clamp(70px, 10vw, 100px);
+		height: auto;
+		filter: drop-shadow(1px 2px 3px rgba(10, 24, 43, 0.25));
+	}
+
+	.lily-label {
+		position: absolute;
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: clamp(0.7rem, 1.2vw, 0.9rem);
+		color: #0A182B;
+		pointer-events: none;
+	}
+
 	/* Credits modal */
 	.modal-backdrop {
 		position: fixed;
@@ -291,82 +353,65 @@
 			padding: 20px 16px 8px;
 		}
 
+		.frog-area {
+			right: -75px;
+			top: -35px;
+		}
+
 		.header-frog {
-			right: -60px;
-			top: -20px;
-			width: clamp(90px, 22vw, 130px);
+			width: 150px !important;
 		}
 
 		.header-frog.menu-open {
-			transform: rotate(80deg) scale(1.05);
+			transform: rotate(-80deg) scale(1.05);
+		}
+
+		.desktop-lily {
+			display: none;
 		}
 
-		.mobile-menu {
+		/* On mobile, menu drops from frog, overlaid */
+		.mobile-lily {
 			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 0;
-			overflow: hidden;
-			max-height: 0;
+			position: absolute;
+			top: 100%;
+			left: 0;
+			z-index: 100;
+			pointer-events: none;
 			opacity: 0;
-			transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
-			            opacity 0.3s ease;
-			position: relative;
-			z-index: 11;
-			padding-left: 4px;
+			transition: opacity 0.3s ease;
 		}
 
-		.mobile-menu.open {
-			max-height: 300px;
+		.mobile-lily.open {
+			pointer-events: auto;
 			opacity: 1;
 		}
 
 		.lily-item {
-			all: unset;
-			position: relative;
-			display: flex;
-			align-items: center;
-			justify-content: center;
 			opacity: 0;
-			transform: translateY(-16px) rotate(-6deg);
+			transform: translateY(-20px) rotate(-6deg);
 			transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-			margin-top: -10px;
 		}
 
-		.lily-item:first-child {
-			margin-top: 0;
-		}
-
-		/* Offset alternating pads for a natural stagger */
-		.lily-item:nth-child(even) {
-			margin-left: 30px;
-		}
-
-		.mobile-menu.open .lily-item {
+		.lily-menu.open .lily-item {
 			opacity: 1;
 			transform: translateY(0) rotate(0deg);
 		}
 
-		.mobile-menu.open .lily-item:nth-child(1) { transition-delay: 0.05s; }
-		.mobile-menu.open .lily-item:nth-child(2) { transition-delay: 0.15s; }
-		.mobile-menu.open .lily-item:nth-child(3) { transition-delay: 0.25s; }
+		.lily-menu.open .lily-item:nth-child(1) { transition-delay: 0.05s; }
+		.lily-menu.open .lily-item:nth-child(2) { transition-delay: 0.15s; }
+		.lily-menu.open .lily-item:nth-child(3) { transition-delay: 0.25s; }
 
-		.mobile-menu:not(.open) .lily-item:nth-child(1) { transition-delay: 0.1s; }
-		.mobile-menu:not(.open) .lily-item:nth-child(2) { transition-delay: 0.05s; }
-		.mobile-menu:not(.open) .lily-item:nth-child(3) { transition-delay: 0s; }
+		.lily-menu:not(.open) .lily-item:nth-child(1) { transition-delay: 0.1s; }
+		.lily-menu:not(.open) .lily-item:nth-child(2) { transition-delay: 0.05s; }
+		.lily-menu:not(.open) .lily-item:nth-child(3) { transition-delay: 0s; }
 
 		.lily-img {
 			width: 90px;
-			height: auto;
-			filter: drop-shadow(1px 2px 3px rgba(10, 24, 43, 0.25));
 		}
 
 		.lily-label {
-			position: absolute;
-			font-family: 'PicNic', cursive, system-ui;
 			font-size: 0.8rem;
-			color: #0A182B;
-			pointer-events: none;
 		}
 	}
 </style>
diff --git a/src/lib/LoginButton.svelte b/src/lib/LoginButton.svelte
index c07500b..36c438f 100644
--- a/src/lib/LoginButton.svelte
+++ b/src/lib/LoginButton.svelte
@@ -252,4 +252,15 @@
 		margin: 4px 0 0;
 		text-align: right;
 	}
+
+	@media (max-width: 600px) {
+		.login-form {
+			flex-direction: column;
+			align-items: flex-end;
+		}
+
+		.handle-input {
+			width: clamp(160px, 50vw, 220px);
+		}
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3f48dd6..c607256 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
 	import MeshBackground from '$lib/MeshBackground.svelte';
 	import PlantOverlay from '$lib/PlantOverlay.svelte';
 	import FlySpawner from '$lib/FlySpawner.svelte';
-	import CreditsButton from '$lib/CreditsButton.svelte';
+
 	import { initAuth } from '$lib/auth.svelte';
 
 	let { children } = $props();
@@ -50,7 +50,6 @@
 <MeshBackground />
 <PlantOverlay />
 <FlySpawner />
-<CreditsButton />
 
 {@render children()}
 
-- 
2.51.2