Manipulating logo on auth screen for different sizes.

package.json

@@ -26,20 +26,20 @@
 		"seed": "node --loader ts-node/esm prisma/seed.ts"
 	},
 	"devDependencies": {
-		"@melt-ui/pp": "^0.1.2",
+		"@melt-ui/pp": "^0.1.4",
 		"@playwright/test": "^1.37.0",
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-auto": "^2.1.1",
 		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.27.2",
+		"@sveltejs/kit": "^1.27.5",
 		"@types/cookie": "^0.5.1",
 		"@types/node": "^18.17.5",
-		"@typescript-eslint/eslint-plugin": "^6.7.5",
+		"@typescript-eslint/eslint-plugin": "^6.10.0",
-		"@typescript-eslint/parser": "^6.7.5",
+		"@typescript-eslint/parser": "^6.10.0",
 		"autoprefixer": "^10.4.15",
 		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.32.4",
+		"eslint-plugin-svelte": "^2.35.0",
 		"just-clone": "^6.2.0",
 		"just-debounce-it": "^3.2.0",
 		"postcss": "^8.4.31",
@@ -47,18 +47,18 @@
 		"postcss-load-config": "^4.0.1",
 		"postcss-preset-env": "^9.3.0",
 		"prettier": "^3.0.3",
-		"prettier-plugin-svelte": "^3.0.3",
+		"prettier-plugin-svelte": "^3.1.0",
 		"prisma": "^5.3.1",
 		"sass": "^1.65.1",
 		"satori": "^0.10.4",
 		"satori-html": "^0.3.2",
-		"svelte": "^4.2.2",
+		"svelte": "^4.2.3",
-		"svelte-check": "^3.5.2",
+		"svelte-check": "^3.6.0",
-		"svelte-meta-tags": "^3.0.4",
+		"svelte-meta-tags": "^3.1.0",
-		"svelte-preprocess": "^5.0.4",
+		"svelte-preprocess": "^5.1.0",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"sveltekit-flash-message": "^2.2.1",
-		"sveltekit-superforms": "^1.9.0",
+		"sveltekit-superforms": "^1.10.1",
 		"tailwindcss": "^3.3.3",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.6.1",
@@ -82,7 +82,7 @@
 		"@melt-ui/svelte": "^0.57.3",
 		"@paralleldrive/cuid2": "^2.2.2",
 		"@prisma/client": "^5.3.1",
-		"@sentry/sveltekit": "^7.77.0",
+		"@sentry/sveltekit": "^7.80.0",
 		"@types/feather-icons": "^4.29.1",
 		"@vercel/og": "^0.5.13",
 		"bits-ui": "^0.0.27",
@@ -96,7 +96,7 @@
 		"iconify-icon": "^1.0.8",
 		"just-kebab-case": "^4.2.0",
 		"loader": "^2.1.1",
-		"lucia": "^2.7.2",
+		"lucia": "^2.7.4",
 		"lucide-svelte": "^0.256.1",
 		"open-props": "^1.5.13",
 		"radix-svelte": "^0.9.0",

postcss.config.cjs

@@ -10,7 +10,7 @@ const config = {
 		tailwindNesting(),
 		tailwindcss(),
 		postcssPresetEnv({
-			stage: 2,
+			stage: 3,
 			features: {
 				'nesting-rules': false,
 				'custom-media-queries': true,

src/lib/components/header/index.svelte

@@ -16,8 +16,10 @@
 
 <header>
 	<div class="corner">
-		<a href="/" title="Home">
+		<a href="/" class="logo" title="Home">
-			<Logo />
+			<div class="logo-image">
+				<Logo />
+			</div>
 		</a>
 	</div>
 	<!-- <TextSearch /> -->
@@ -128,9 +130,9 @@
 		height: 100%;
 	}
 
-	.corner img {
+	.logo-image {
-		width: 1.5em;
+		width: 2rem;
-		height: 1.5em;
+		height: 2rem;
 		object-fit: contain;
 	}
 

src/routes/(auth)/+layout.svelte

@@ -8,6 +8,12 @@
 </script>
 
 <div class="container">
+	<a href="/" class="auth-logo">
+		<div class="logo-image">
+			<Logo />
+		</div>
+		Bored Game
+	</a>
 	<Button
 		href={$page.url.pathname === "/sign-up" ? "/login" : "/sign-up"}
 		variant="ghost"
@@ -26,12 +32,6 @@
 				background-image:
 					url(https://images.unsplash.com/photo-1588591795084-1770cb3be374?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
 		/>
-		<a href="/" class="logo">
-			<div class="logo-image">
-				<Logo />
-			</div>
-			Bored Game
-		</a>
 		<div class="quote-wrapper">
 			<blockquote class="quote">
 				<p>
@@ -90,29 +90,6 @@
 				background-size: cover;
 			}
 
-			.logo {
-				display: flex;
-				position: relative;
-				z-index: 20;
-				gap: 0.5rem;
-				align-items: center;
-				font-size: 1.125rem;
-				line-height: 1.75rem;
-				font-weight: 500;
-				transition-property: color, background-color, border-color,text-decoration-color, fill, stroke;
-				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-				transition-duration: 300ms;
-
-				&:hover {
-					color: hsl(var(--muted-foreground));
-				}
-
-				.logo-image {
-					width: 2rem;
-					height: 2rem;
-				}
-			}
-
 			.quote-wrapper {
 				position: relative;
 				z-index: 20;
@@ -151,4 +128,43 @@
 			right: 2rem;
 		}
 	}
+
+	:global(.auth-logo) {
+		display: flex;
+		position: relative;
+		z-index: 20;
+		gap: 0.5rem;
+		align-items: center;
+		font-size: 1.125rem;
+		line-height: 1.75rem;
+		font-weight: 500;
+		transition-property: color, background-color, border-color,text-decoration-color, fill, stroke;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		transition-duration: 300ms;
+
+		&:hover {
+			color: hsl(var(--muted-foreground));
+		}
+
+		.logo-image {
+			width: 2rem;
+			height: 2rem;
+		}
+
+		@media (max-width: 768px) {
+			position: absolute;
+			top: 1rem;
+			left: 1rem;
+		}
+
+		@media (min-width: 768px) {
+			position: absolute;
+			top: 2rem;
+			left: 2rem;
+		}
+
+		@media (min-width: 1024px) {
+			color: white;
+		}
+	}
 </style>

src/routes/(auth)/sign-up/+page.svelte

@@ -13,6 +13,7 @@
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import * as Alert from '$lib/components/ui/alert';
 	import { boredState } from '$lib/stores/boredState.js';
+	import { onMount } from 'svelte';
 
 	export let data;
 
@@ -31,6 +32,8 @@
     delayMs: 0,
   });
 
+	let collapsibleOpen = true;
+
 	// const flash = flashModule.getFlash(page);
 
 	// $: {
@@ -40,6 +43,9 @@
 	// 		});
 	// 	}
 	// }
+	onMount(() => {
+		collapsibleOpen = false;
+	});
 </script>
 
 <svelte:head>
@@ -64,7 +70,7 @@
 		{#if $errors.confirm_password}
 			<p class="text-sm text-destructive">{$errors.confirm_password}</p>
 		{/if}
-		<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
+		<Collapsible.Root bind:open={collapsibleOpen} class="grid w-full max-w-sm items-center gap-2.5">
 			<div>
 				Optional Fields:
 				<Collapsible.Trigger asChild let:builder>
@@ -76,29 +82,29 @@
 			</div>
 			<Collapsible.Content>
 				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-				<Label for="email">Email</Label>
+					<Label for="email">Email</Label>
-				<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
+					<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
-				{#if $errors.email}
+					{#if $errors.email}
-					<p class="text-sm text-destructive">{$errors.email}</p>
+						<p class="text-sm text-destructive">{$errors.email}</p>
-				{/if}
+					{/if}
 				</div>
 			</Collapsible.Content>
 			<Collapsible.Content>
 				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-				<Label for="firstName">First Name</Label>
+					<Label for="firstName">First Name</Label>
-				<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
+					<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
-				{#if $errors.firstName}
+					{#if $errors.firstName}
-					<p class="text-sm text-destructive">{$errors.firstName}</p>
+						<p class="text-sm text-destructive">{$errors.firstName}</p>
-				{/if}
+					{/if}
 				</div>
 			</Collapsible.Content>
 			<Collapsible.Content>
 				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-				<Label for="firstName">Last Name</Label>
+					<Label for="firstName">Last Name</Label>
-				<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
+					<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
-				{#if $errors.lastName}
+					{#if $errors.lastName}
-					<p class="text-sm text-destructive">{$errors.lastName}</p>
+						<p class="text-sm text-destructive">{$errors.lastName}</p>
-				{/if}
+					{/if}
 				</div>
 			</Collapsible.Content>
 		</Collapsible.Root>

svelte.config.js

@@ -9,7 +9,11 @@ const config = {
 	// for more information about preprocessors
 	preprocess: sequence([vitePreprocess({}), preprocessMeltUI()]),
 	vitePlugin: {
-		inspector: true
+		inspector: {
+			toggleKeyCombo: 'control-alt-shift',
+			showToggleButton: 'always',
+			toggleButtonPos: 'bottom-right'
+		}
 	},
 	kit: {
 		adapter: adapter(),