add links bar

src/routes/+layout.svelte

@@ -49,6 +49,14 @@
 			border-radius: 10px;
 			color: white;
 		}
+
+		.panel-alt {
+			background-color: white;
+			overflow: auto;
+			border: 3px double;
+			border-radius: 5px;
+			color: rgba(0, 0, 0, 0.6);
+		}
 	</style>
 </svelte:head>
 

src/routes/streams/+layout.svelte

@@ -1,10 +1,12 @@
 <script>
 	import Sidebar from './Sidebar.svelte';
+	import Footer from './Footer.svelte';
 	export let data;
 </script>
 
 <div id="mainContainer">
 	<div id="sidebar" class="panel"><Sidebar streams={data.streams} /></div>
+	<div id="footer" class="panel-alt"><Footer /></div>
 	<div id="content"><slot /></div>
 </div>
 
@@ -12,13 +14,22 @@
 	#mainContainer {
 		display: grid;
 		grid-template-columns: 25% 1fr;
+		grid-template-rows: minmax(0, 1fr) auto;
 		height: calc(100vh - 1em); /* fallback */
 		height: calc(100dvh - 1em);
 		gap: 0.5em;
 		margin: 0.5em;
 	}
 
+	#footer {
+		grid-row: 2;
+		grid-column: 1;
+		height: 100%;
+		scrollbar-width: thin;
+	}
+
 	#sidebar {
+		grid-row: 1;
 		grid-column: 1;
 		overflow-wrap: break-word;
 		scrollbar-gutter: stable;
@@ -27,6 +38,7 @@
 	}
 
 	#content {
+		grid-row: 1 / 2;
 		grid-column: 2;
 		height: calc(100vh - 1em);
 		height: calc(100dvh - 1em);
@@ -35,15 +47,25 @@
 	@media (max-width: 575px) {
 		#mainContainer {
 			grid-template-columns: 100%;
-			grid-template-rows: 70% 1fr;
+			grid-template-rows: 65% 1fr auto;
+		}
+
+		#footer {
+			order: 2;
+			order: 2;
+			grid-row: 3;
+			height: 100%;
 		}
 
 		#sidebar {
 			order: 1;
+			grid-row: 2;
 			height: 100%;
 		}
 
 		#content {
+			order: 0;
+			grid-row: 1;
 			grid-column: 1;
 			height: 100%;
 		}

src/routes/streams/+page.svelte

@@ -14,4 +14,11 @@
 		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
 		scrollbar-gutter: stable;
 	}
+
+	@media (max-width: 575px) {
+		#welcome-page {
+			background: local url('/assets/result.png') top right / 80% no-repeat,
+				rgba(0, 0, 0, 0.8);
+		}
+	}
 </style>

src/routes/streams/Footer.svelte

@@ -0,0 +1,44 @@
+<div class="navbar">
+	<ul>
+		<li><a href="https://apt-get.xyz">Home</a></li>
+		<li><a href="https://apt-get.xyz/journal/">Journal</a></li>
+		<li><a href="/streams/">Tunes</a></li>
+		<li><a href="https://apt-get.xyz/contact">Contact</a></li>
+	</ul>
+</div>
+
+<style>
+	.navbar {
+		padding: 4.5px;
+		text-align: center;
+		font-family: Verdana;
+		display: flex;
+		justify-content: center;
+	}
+
+	.navbar ul {
+		margin: 0px;
+		display: inline-flex;
+		padding-left: 0px;
+		list-style: none;
+		justify-content: space-around;
+		flex-basis: auto;
+	}
+
+	.navbar li:hover {
+		text-decoration: underline;
+		text-underline-offset: 0.1em;
+	}
+	.navbar li a {
+		padding-left: 5px;
+		padding-right: 5px;
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	a,
+	a:visited {
+		outline: none;
+		color: black;
+	}
+</style>

src/routes/streams/WelcomePage.svelte

@@ -1,3 +1,9 @@
+<script>
+	import { currentStream } from '$lib/stores.js';
+
+	currentStream.set({});
+</script>
+
 <div class="stream-information">
 	<h1 class="title">Auditorium of Babel</h1>
 	<h3 class="backlink">ID: aptget</h3>
@@ -85,4 +91,17 @@
 		width: 0;
 		height: 0;
 	}
+
+	@media (max-width: 575px) {
+		.stream-information {
+			width: initial;
+		}
+		.description-bubble {
+			max-width: initial;
+		}
+
+		.description-bubble::after {
+			visibility: hidden;
+		}
+	}
 </style>

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

@@ -3,7 +3,6 @@
 	import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
 	import { jumpToTrack } from './Player.svelte';
 	import { Carta } from 'carta-md';
-	import { goto } from '$app/navigation';
 	import DOMPurify from 'isomorphic-dompurify';
 
 	const carta = new Carta({
@@ -18,7 +17,6 @@
 </svelte:head>
 
 <div class="stream-information">
-	<!-- <div class="back-button material-icons" on:click={() => goto('/streams/')}>keyboard_return</div> -->
 	<div class="stream-information-flexbox">
 		<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
 		<h1 class="stream-date">{formattedStreamDate}</h1>