Improve appearance

src/components/Button.svelte

···
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<button class="button">
+	{@render children()}
+</button>
+
+<style>
+	.button {
+		border: none;
+		border-radius: var(--radius-md);
+	}
+</style>

src/lib/date.ts

···
+export function getRelativeTime(date: Date): string {
+	const now = new Date();
+	const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+	// future dates
+	if (diffInSeconds < 0) {
+		const absDiff = Math.abs(diffInSeconds);
+
+		if (absDiff < 60) return "in a few seconds";
+		if (absDiff < 3600) return `in ${Math.floor(absDiff / 60)} minutes`;
+		if (absDiff < 86400) return `in ${Math.floor(absDiff / 3600)} hours`;
+		if (absDiff < 2592000) return `in ${Math.floor(absDiff / 86400)} days`;
+		if (absDiff < 31536000) return `in ${Math.floor(absDiff / 2592000)} months`;
+		return `in ${Math.floor(absDiff / 31536000)} years`;
+	}
+
+	// past dates
+	if (diffInSeconds < 60) return "just now";
+	if (diffInSeconds < 3600) {
+		const minutes = Math.floor(diffInSeconds / 60);
+		return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
+	}
+	if (diffInSeconds < 86400) {
+		const hours = Math.floor(diffInSeconds / 3600);
+		return `${hours} hour${hours === 1 ? "" : "s"} ago`;
+	}
+	if (diffInSeconds < 2592000) {
+		const days = Math.floor(diffInSeconds / 86400);
+		return `${days} day${days === 1 ? "" : "s"} ago`;
+	}
+	if (diffInSeconds < 31536000) {
+		const months = Math.floor(diffInSeconds / 2592000);
+		return `${months} month${months === 1 ? "" : "s"} ago`;
+	}
+
+	const years = Math.floor(diffInSeconds / 31536000);
+	return `${years} year${years === 1 ? "" : "s"} ago`;
+}

src/routes/+layout.svelte

···
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children?.()}
+<div class="app">
+	{@render children?.()}
+</div>
 
 <style>
 	:global {
 		@import "~/styles/reset.css";
 		@import "~/styles/theme.css";
+	}
+
+	:global(html) {
+		font-family: var(--font-body);
+	}
+
+	.app {
+		--app-max-width: 40rem;
+		--app-inline-padding: 24px;
+		position: relative;
+		max-width: var(--app-max-width);
+		margin: 0 auto;
+		padding: 0 var(--app-inline-padding);
 	}
 </style>

src/routes/~/+layout.svelte

···
 
 <header class="header">
 	<h1><a href="/~/">athost</a></h1>
-	<button popovertarget="menu">menu</button>
+	<button class="menubutton" popovertarget="menu">
+		<img class="avatar" src={data.profile.avatar} alt="" width={24} />
+		<span>@{data.profile.displayName}</span>
+	</button>
 	<div id="menu" class="menu" popover>
-		<p>hello, {data.name}</p>
 		<button onclick={logOut}>log out</button>
 	</div>
 </header>
···
 
 <style>
 	.header {
+		position: relative;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+	}
+
+	.menubutton {
+		display: flex;
+		align-items: center;
+	}
+
+	.menu {
+		&:popover-open {
+			position: absolute;
+			inset: unset;
+			right: calc(50% - var(--app-max-width) / 2 + var(--app-inline-padding));
+			margin-top: 4rem;
+		}
+	}
+
+	.avatar {
+		border-radius: 50%;
 	}
 </style>

src/routes/~/+layout.ts

···
 
 		const atp = client(session);
 
-		const { displayName } = await atp.getProfile(did);
+		const profile = await atp.getProfile(did);
 
-		return { session, pds: session.info.aud, did, name: displayName };
+		return { session, pds: session.info.aud, did, profile };
 	} catch (e) {
 		console.error(e);
 		redirect(303, "/");

src/routes/~/+page.svelte

···
 	import { invalidate } from "$app/navigation";
 
 	import { client } from "~/lib/oauth";
+	import Button from "~/components/Button.svelte";
 
 	let { data } = $props();
 
···
 
 <form onsubmit={createWebsite}>
 	<input type="text" name="rkey" minlength={1} maxlength={512} pattern="[A-Za-z0-9.\-]+" />
-	<button>create</button>
+	<Button>create</Button>
 </form>
 
 <ul>

src/routes/~/sites/[name]/+page.svelte

···
 <script lang="ts">
 	import { goto, invalidate } from "$app/navigation";
+	import { getRelativeTime } from "~/lib/date";
 
 	import { client } from "~/lib/oauth";
 
···
 	}
 </script>
 
-<header class="header">
-	<h2>{params.name}</h2>
-</header>
+<div class="detail">
+	<header class="header">
+		<h2>{params.name}</h2>
+	</header>
 
-<details>
-	<summary>
-		<span>{data.record.value.description || data.record.cid}</span>
-		<time>{data.record.value.createdAt}</time>
-	</summary>
-	<ul>
-		{#each Object.entries(data.record.value.assets) as [path, file]}
-			<li>
-				<span>{path}</span>
-				<a
-					target="_blank"
-					href="{data.pds}xrpc/com.atproto.sync.getBlob?did={data.did}&cid={file.ref.$link}">open</a
-				>
-			</li>
-		{/each}
-	</ul>
-</details>
+	<details class="deploy">
+		<summary class="summary">
+			<span>{data.record.value.description || data.record.cid}</span>
+			<time datetime={data.record.value.createdAt}>
+				{getRelativeTime(new Date(data.record.value.createdAt))}
+			</time>
+		</summary>
+		<ul>
+			{#each Object.entries(data.record.value.assets) as [path, file]}
+				<li>
+					<span>{path}</span>
+					<a
+						target="_blank"
+						href="{data.pds}xrpc/com.atproto.sync.getBlob?did={data.did}&cid={file.ref.$link}"
+						>open</a
+					>
+				</li>
+			{/each}
+		</ul>
+	</details>
 
-<h3>upload</h3>
-<form onsubmit={deployBundle}>
-	<input type="hidden" name="rkey" value={params.name} />
-	<label>
-		<span>description</span>
-		<input name="description" />
-	</label>
-	<input type="file" name="files" webkitdirectory />
-	<button>upload</button>
-</form>
+	<section>
+		<h3>Upload</h3>
+		<form onsubmit={deployBundle}>
+			<input type="hidden" name="rkey" value={params.name} />
+			<label>
+				<span>description</span>
+				<input name="description" />
+			</label>
+			<input type="file" name="files" webkitdirectory />
+			<button>upload</button>
+		</form>
+	</section>
 
-<h3>settings</h3>
-<form>
-	<label>
-		<span>not found</span>
-		<input name="notfound" />
-	</label>
-	<button>save</button>
-</form>
+	<section>
+		<h3>Settings</h3>
+		<form>
+			<label>
+				<span>not found</span>
+				<input name="notfound" />
+			</label>
+			<button>save</button>
+		</form>
+	</section>
 
-<h3>danger zone</h3>
-<form onsubmit={deleteBundle}>
-	<label>
-		<span>site name</span>
-		<input name="rkey" pattern={params.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} />
-	</label>
-	<button>delete</button>
-</form>
+	<section>
+		<h3>Danger Zone</h3>
+		<form onsubmit={deleteBundle}>
+			<label>
+				<span>site name</span>
+				<input name="rkey" pattern={params.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} />
+			</label>
+			<button>delete</button>
+		</form>
+	</section>
+</div>
+
+<style>
+	.detail {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-10);
+	}
+
+	.deploy {
+		border: var(--size-border) solid black;
+		border-radius: var(--radius-md);
+	}
+
+	.summary {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--size-3) var(--size-4);
+	}
+</style>

src/styles/theme.css

···
 @font-face {
-	font-family: "Supreme";
-	src: url("./supreme-variable.woff2") format("woff2");
+	font-family: "Bricolage Grotesque";
+	src: url("./bricolage-grotesque-variable.woff2") format("woff2");
 	font-weight: 100 1000;
 }
 
 :root {
-	font-family: "Supreme", sans-serif;
+	/* fonts */
+	--font-body: "Bricolage Grotesque", sans-serif;
+
+	/* sizes */
+	--size-border: 1px;
+	--size-outline: 3px;
+	--size-1: 2px;
+	--size-2: 4px;
+	--size-3: 8px;
+	--size-4: 12px;
+	--size-5: 16px;
+	--size-6: 20px;
+	--size-7: 24px;
+	--size-8: 28px;
+	--size-9: 32px;
+	--size-10: 48px;
+
+	/* corner radii */
+	--radius-sm: 2px;
+	--radius-md: 6px;
+	--radius-lg: 8px;
+	--radius-xl: 12px;
+}
+
+@supports (corner-shape: squircle) {
+	* {
+		corner-shape: squircle;
+	}
+
+	:root {
+		--radius-sm: 4px;
+		--radius-md: 12px;
+		--radius-lg: 16px;
+		--radius-xl: 24px;
+	}
 }