v1!

src/routes/+layout.svelte

@@ -50,6 +50,8 @@
 			color: white;
 		}
 	</style>
+
+	<title>apt-get's auditorium</title>
 </svelte:head>
 
 <slot />

src/routes/streams/+layout.svelte

@@ -29,5 +29,7 @@
 		grid-column: 2;
 		margin: 0.5em;
 		margin-left: 0em;
+		height: calc(100vh - 1em);
+		scrollbar-gutter: stable;
 	}
 </style>

src/routes/streams/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	import WelcomePage from './WelcomePage.svelte';
+</script>
+
+<div id="welcome-page" class="panel"><WelcomePage /></div>
+
+<style>
+	#welcome-page {
+		height: 100%;
+		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
+		scrollbar-gutter: stable;
+	}
+</style>

src/routes/streams/WelcomePage.svelte

@@ -0,0 +1,82 @@
+<div class="stream-information">
+	<h1 class="title">Auditorium of Babel</h1>
+	<h3 class="backlink">ID: aptget</h3>
+</div>
+
+<div class="description-bubble">
+	<p>Hello, there, welcome to V1.</p>
+	<p>
+		Still in construction. No responsive design yet, so phones will be hard to use, but that's
+		coming, too!
+	</p>
+	<p>
+		There's gonna be an update feed soon (with RSS, too), but for now, just check the most
+		recent stream to see if anything new has been uploaded. I'll post something here if I fill
+		in the back-catalog.
+	</p>
+
+	<p style="font-size: smaller">
+		Mascot drawn by <a href="https://twitter.com/yuuybee/">yuuybee</a>.
+	</p>
+</div>
+
+<style>
+	.stream-information {
+		width: 70%;
+		padding: 1px;
+		margin-top: 2%;
+		margin-left: 3%;
+		min-height: 8%;
+		border-radius: 2px;
+		position: relative;
+	}
+
+	.backlink {
+		font-family: 'Montserrat';
+	}
+
+	.title {
+		font-size: x-large;
+		font-family: 'Montserrat';
+		right: 0;
+		position: absolute;
+		margin-right: 3%;
+		text-decoration: underline;
+	}
+
+	.description-bubble {
+		position: relative;
+		background-color: rgba(255, 255, 255, 0.75);
+		border: 1px solid #ccc;
+		color: black;
+		padding: 10px;
+		margin: 10px;
+		margin-left: 3%;
+		border-radius: 5px;
+		min-width: 70%;
+		max-width: 70%;
+		width: fit-content;
+		font-family: Verdana;
+		font-size: small;
+	}
+
+	.description-bubble :global(:first-child) {
+		margin-top: 0px;
+	}
+
+	.description-bubble :global(:last-child) {
+		margin-bottom: 0px;
+	}
+
+	.description-bubble::after {
+		content: '';
+		position: absolute;
+		border-style: solid;
+		border-width: 10px 0 10px 10px;
+		border-color: transparent transparent transparent #ccc;
+		top: 8px;
+		right: -10px;
+		width: 0;
+		height: 0;
+	}
+</style>

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { currentStream, currentSongIndex } from '$lib/stores.js';
-	import { hashColor, shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
+	import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
 	import { jumpToTrack } from './Player.svelte';
 	import { Carta } from 'carta-md';
 	import DOMPurify from 'isomorphic-dompurify';
@@ -12,6 +12,10 @@
 	$: formattedStreamDate = formatDate($currentStream.stream_date);
 </script>
 
+<svelte:head>
+	<title>{formattedStreamDate} | apt-get's auditorium</title>
+</svelte:head>
+
 <div class="stream-information">
 	<h1 class="stream-date">{formattedStreamDate}</h1>
 	<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
@@ -101,6 +105,7 @@
 	.current {
 		background-color: rgba(128, 128, 128, 0.8);
 	}
+
 	.description-bubble {
 		position: relative;
 		background-color: rgba(255, 255, 255, 0.75);