torus/src/routes/workout/+page.svelte

<script>
	import logoMark from '$lib/images/logo_white.svg';

	let { data } = $props();
</script>

<svelte:head>
	<title>Workouts — Torus</title>
</svelte:head>

<div class="page">
	<header class="top">
		<a class="brand" href="/">
			<img class="brand-mark" src={logoMark} alt="" width="28" height="28" />
			<span class="brand-name">Torus</span>
		</a>
		<a class="btn btn-ghost" href="/logout">Log out</a>
	</header>

	<main>
		<section class="panel">
			<div class="panel-head">
				<div class="panel-copy">
					<h1>Workouts</h1>
					<p class="lede">Signed in as {data.user.name}. Your sessions will show up here.</p>
				</div>
				<a class="btn btn-primary new-workout" href="/workout/new">New workout</a>
			</div>
		</section>
	</main>
</div>

<style>
	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 16px 20px;
		border-bottom: 1px solid var(--border);
	}

	.brand {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	.brand-mark {
		display: block;
		width: 28px;
		height: 28px;
		flex-shrink: 0;
	}

	.brand-name {
		font-size: 15px;
	}

	main {
		flex: 1;
		width: min(1120px, 100%);
		margin: 0 auto;
		padding: 40px 20px 64px;
	}

	.panel {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 24px;
	}

	.panel-head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.panel-copy {
		min-width: 0;
		width: 100%;
	}

	.new-workout {
		flex-shrink: 0;
	}

	h1 {
		margin: 0;
		font-size: 1.6rem;
		letter-spacing: -0.03em;
		font-weight: 750;
	}

	.lede {
		margin: 8px 0 0;
		color: var(--text-muted);
		line-height: 1.45;
	}

	@media (min-width: 720px) {
		.top {
			padding: 16px 28px;
		}

		main {
			padding: 48px 28px 80px;
		}

		.panel-head {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
		}

		.panel-copy {
			width: auto;
			flex: 1;
		}
	}
</style>