fix class prefixes

resources/js/views/EventList.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-workshop-list">
+    <SMPage class="sm-page-workshop-list">
         <template #container>
             <h1>Workshops</h1>
             <SMToolbar>
@@ -227,7 +227,7 @@ handleLoad();
 </script>
 
 <style lang="scss">
-.workshop-list {
+.sm-page-workshop-list {
     background-color: #f8f8f8;
 
     .toolbar {
@@ -251,7 +251,7 @@ handleLoad();
 }
 
 @media screen and (max-width: 768px) {
-    .sm-workshop-list .toolbar {
+    .sm-page-workshop-list .toolbar {
         flex-direction: column;
 
         & > * {

resources/js/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage full class="home">
+    <SMPage full class="sm-page-home">
         <SMCarousel>
             <SMCarouselSlide
                 v-for="(slide, index) in slides"
@@ -247,7 +247,7 @@ handleLoad();
 </script>
 
 <style lang="scss">
-.home {
+.sm-page-home {
     margin-top: -3.25rem !important;
     background-color: #fff;
 
@@ -420,7 +420,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 1024px) {
-    .home {
+    .sm-page-home {
         .about {
             padding: 4rem;
         }
@@ -432,7 +432,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 896px) {
-    .home {
+    .sm-page-home {
         .support {
             .row {
                 flex-direction: column;
@@ -442,7 +442,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 768px) {
-    .home {
+    .sm-page-home {
         .about {
             margin-top: 2rem;
             margin-left: 0;
@@ -480,7 +480,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 640px) {
-    .home {
+    .sm-page-home {
         .about {
             padding: 2rem;
 

resources/js/views/Minecraft.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-minecraft">
+    <SMPage class="sm-page-minecraft">
         <template #container>
             <h1>Connecting to our Minecraft Server</h1>
             <ol>
@@ -39,7 +39,7 @@
 </template>
 
 <style lang="scss">
-.sm-minecraft {
+.sm-page-minecraft {
     h2 {
         margin-bottom: 0.5rem;
     }

resources/js/views/PostList.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-post-list" :loading="pageLoading">
+    <SMPage class="sm-page-post-list" :loading="pageLoading">
         <template #container>
             <SMMessage
                 v-if="message"

resources/js/views/Rules.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-rules">
+    <SMPage class="sm-page-rules">
         <template #container>
             <h1>Rules</h1>
             <p>
@@ -81,7 +81,7 @@
 <script setup lang="ts"></script>
 
 <style lang="scss">
-.sm-rules {
+.sm-page-rules {
     h2 {
         margin-bottom: 0.5rem;
     }

resources/js/views/Terms.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-terms">
+    <SMPage class="sm-page-terms">
         <template #container>
             <h1>Terms and Conditions</h1>
             <p>

resources/js/views/dashboard/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-dashboard">
+    <SMPage class="sm-page-dashboard">
         <template #container>
             <h1>Dashboard</h1>
             <div class="boxes">
@@ -70,7 +70,7 @@ const courseBoxTitle = computed(() => {
 </script>
 
 <style lang="scss">
-.sm-dashboard {
+.sm-page-dashboard {
     background-color: $secondary-background-color;
 
     .boxes {