Splash

As mentioned earlier, the plan is to build a full-stack file storage app that lets you log in and upload stuff. So we need a login page.

Create a new file, src/routes/login/+page.svelte. This is going to double as our splash screen, so we’ll add a <div class="splash">, and inside that we’ll start building our login form:

<div class="splash">
	<form>
		<label>
			Sign in
			<input />
		</label>
		<button>Log in to Squirrel</button>
	</form>
</div>

Make it look a bit less awful:

<style>
	.splash {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		max-width: 40rem;

		input {
			display: block;
			width: 100%;
			margin: 0.5rem 0;
		}
	}
</style>

Add the logo. You can grab it from svelte-and-sveltekit.vercel.app/squirrel/logo.svg. Save it to lib/assets/logo.svg.

As with the favicon, we can import the URL of the asset, like so:

<script lang="ts">
	import logo from '$lib/assets/logo.svg';
</script>

This is a Vite feature, and it does two things:

• it ensures that the asset is included in the deployment
• it creates a content-based hash, which allows the asset to be cached indefinitely

Add the image. Notice that until we add alt text, the compiler gives us a warning that the image isn’t accessible:

<img alt="Squirrel logo" src={logo} />

Our form elements look a bit cramped — tweak the global styles:

input,
button {
	font: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: none;
+	padding: 0.5rem 1rem;
}

button {
	cursor: pointer;
}

+.rounded {
+	border-radius: 9999px;
+}

+.primary {
+	background-color: var(--accent);
+	color: var(--bg);
+}