Switched to main element from article

Author: mikael-ros

src/pages/404.astro

@@ -9,7 +9,7 @@ import Button from '../components/interactive/Button'
 ---
 
 <Layout title="Slumper / 404" description="The page you are trying to reach does not exist.">
-	<article>
+	<main>
 		<div class="card">
             <h1>The page you are trying to reach does not exist</h1>
             <a role="button" id="back" href="/">
@@ -18,5 +18,5 @@ import Button from '../components/interactive/Button'
                 />
             </a>
         </div>
-	</article>
+	</main>
 </Layout>

src/pages/add.astro

@@ -4,7 +4,7 @@ import { AddCard } from '../components/ui/AddCard'
 ---
 
 <Layout title="Slumper / Add" description="Add your own personal book to Slumper, the exercise randomizer, to add support for any book not included by default.">
-	<article>
+	<main>
 		<AddCard client:only="solid-js" />
-	</article>
+	</main>
 </Layout>

src/pages/index.astro

@@ -6,8 +6,8 @@ import { VolumeKnob } from '../components/ui/VolumeKnob'
 ---
 
 <Layout >	
-	<article>
+	<main>
 		<OutputCard client:only="solid-js" />
-	</article>
+	</main>
 	<VolumeKnob client:only="solid-js"/>
 </Layout>

src/styles/slumper.css

@@ -159,7 +159,7 @@ a {
 /* Articles */
 /************/
 
-article::before {
+main::before {
     content: '';
     position: absolute;
     top: 0;
@@ -176,7 +176,7 @@ article::before {
     z-index: 0; /* Ensure it is behind the article content */
 }
 
-article{
+main{
     position: relative; /* Ensure positioning context for pseudo-element */
     display: flex;
     justify-content: center;
@@ -237,7 +237,7 @@ article{
     /* Default text settings stuff */
     /*******************************/
 
-    article {
+    main {
         min-height: 70vh;
 
         z-index: 3;