4 files changed, 10 insertions, 11 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dc3f371b..d5409f9a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -117,8 +117,8 @@
 
 <HeadTitle />
 
-<div id="container">
-	<div id="header" class="card card-centered">
+<div class="container">
+	<div class="card card-centered header">
 		<div>
 			<a href={root('/')} class="header-item">{$locale().navigation.home}</a><a
 				href={root('/completed')}
@@ -187,7 +187,7 @@
 				</a>
 			{:else if data.user}
 				<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
-					<img id="avatar" src={$userIdentity.avatar} alt="Avatar" />
+					<img class="avatar" src={$userIdentity.avatar} alt="Avatar" />
 				</a>
 			{/if}
 		</div>
@@ -213,7 +213,7 @@
 </div>
 
 <style lang="scss">
-	#header {
+	.header {
 		font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 			Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 		font-size: 1.05em;
@@ -230,7 +230,7 @@
 		filter: invert(0);
 	}
 
-	#container {
+	.container {
 		height: 100%;
 		display: flex;
 		flex-direction: column;
@@ -259,7 +259,7 @@
 		outline: none;
 	}
 
-	#avatar {
+	.avatar {
 		width: 2em;
 		display: inline-block;
 		vertical-align: middle;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 91e3bb23..514e446a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,7 +34,6 @@
 	<Landing />
 {:else}
 	<div
-		id="list-container"
 		style={`column-width: 300px; column-count: ${
 			Number(!$settings.disableAnime) +
 			Number(!$settings.disableManga) +
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index 943b4fa4..d3ae7407 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -32,7 +32,7 @@
 
 	<Landing />
 {:else}
-	<div id="list-container">
+	<div class="list-container">
 		<details open={!$settings.displayAnimeCollapsed} class="list">
 			{#if $userIdentity.id !== -2}
 				<WatchingAnimeList user={data.user} />
@@ -60,7 +60,7 @@
 {/if}
 
 <style>
-	#list-container {
+	.list-container {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: start;
diff --git a/src/routes/updates/+page.svelte b/src/routes/updates/+page.svelte
index 58a61dc4..61ed9678 100644
--- a/src/routes/updates/+page.svelte
+++ b/src/routes/updates/+page.svelte
@@ -58,7 +58,7 @@
 
 <HeadTitle route="Updates" path="/updates" />
 
-<div id="list-container">
+<div class="list-container">
 	<details open class="list">
 		<summary>
 			Manga
@@ -128,7 +128,7 @@
 </div>
 
 <style>
-	#list-container {
+	.list-container {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 		align-items: start;