refactor: ids to classes

8 files changed, 18 insertions, 19 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index c94dc15e..e508606a 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -91,7 +91,7 @@
 
 {#if $settings.displayCoverMode}
 	<div
-		id="covers"
+		class="covers"
 		style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
 	>
 		{#each media as anime}
@@ -236,7 +236,7 @@
 <HoverCover options={hoverCoverState} width={300} />
 
 <style>
-	#covers {
+	.covers {
 		display: grid;
 		justify-content: center;
 		gap: 1em 0.5em;
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index c16447b5..27caa89d 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -75,7 +75,7 @@
 		<summary>{day}</summary>
 
 		{#if !$settings.displayScheduleListMode && !forceListMode}
-			<div id="covers" style={`grid-template-columns: repeat(auto-fill, minmax(11.5%, 1fr))`}>
+			<div class="covers" style={`grid-template-columns: repeat(auto-fill, minmax(11.5%, 1fr))`}>
 				{#each Object.values(scheduleEntry) as entry}
 					{@const media = associateMedia(scheduledMedia, entry.title)}
 
@@ -141,7 +141,7 @@
 {/each}
 
 <style>
-	#covers {
+	.covers {
 		display: grid;
 		justify-content: center;
 		gap: 1em 0.5em;
diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte
index 573e98b2..070abeda 100644
--- a/src/lib/Tools/Birthdays.svelte
+++ b/src/lib/Tools/Birthdays.svelte
@@ -115,7 +115,7 @@
 			</select>
 		</p>
 
-		<div id="characters">
+		<div class="characters">
 			{#each birthdays as birthday}
 				<div class="card card-small">
 					<a
@@ -141,7 +141,7 @@
 {/await}
 
 <style lang="scss">
-	#characters {
+	.characters {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
 		gap: 1rem;
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;
diff --git a/src/styles/card.css b/src/styles/card.css
index d41d4224..10f7779b 100644
--- a/src/styles/card.css
+++ b/src/styles/card.css
@@ -12,12 +12,12 @@ details,
 	}
 }
 
-#header {
+.header {
 	box-shadow: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px, 0 0 0 5px var(--base02);
 }
 
 @media (prefers-color-scheme: light) {
-	#header {
+	.header {
 		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px, 0 0 0 5px var(--base02);
 	}
 }