okiee fixed the styling~

assets/css/main.scss

@@ -19,6 +19,14 @@ body{
   font-family: "Baloo Chettan 2";
 }
 
+hr {
+  width: 100%;
+  height: 0px;
+  border: 5px  var(--accent);
+  border-style: dotted none none none;
+  max-width: var(--max-width);
+}
+
 // html {
 //   scroll-behavior: smooth;
 // }

components/BigButton.vue

@@ -1,7 +1,9 @@
 <template>
-  <a class="big-button" :href="props.href">
+  <div class="button-box">
-    <h2>{{props.text}}</h2>
+    <a class="big-button" :href="props.href">
-  </a>
+      <h2>{{props.text}}</h2>
+    </a>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -17,6 +19,15 @@
     color: black;
     width: 80%;
     text-decoration: none;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    /* justify-self: center; */
+    
+  }
+
+  .button-box{
+    width: 100%;
     
   }
 

components/BlogCard.vue

@@ -37,6 +37,7 @@ const props = defineProps({
 
   h2{
     margin: 0;
+    text-align: center;
   }
 
   .blog-header{

components/BoldButton.vue

@@ -14,7 +14,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .button {
         background-color: #3f0064; 
         border: none;

components/ProjectCard.vue

@@ -18,7 +18,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .image-container{
         position: relative;
         text-align: center;

components/Socials.vue

@@ -4,7 +4,7 @@
     </div>
   </template>
   
-  <style>
+  <style scoped>
   .socials {
     display: flex;
     flex-wrap: wrap;

components/TextCard.vue

@@ -22,7 +22,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .text-container{
         position: relative;
         text-align: center;

pages/blog-index.vue

@@ -2,7 +2,7 @@
   <main>
     <!-- <a href="/"><-- Return Home</a> -->
     <BigButton text="<<< Return Home" href="/"/>
-    <h1>Tom's Blog</h1>
+    <h1 class="no-margin">Tom's Blog</h1>
     
     <p class="no-margin" v-if="qSupplied">Selected Tag: <strong>{{query}}</strong> <a v-if="qSupplied" href="blog-index">(Clear Search)</a></p>
     <p class="no-margin">Tag Search:
@@ -14,7 +14,7 @@
     </p>
 
     <hr>
-    <!-- <div> -->
+    <div>
       <BlogCard v-for="post in data" class="posts-list"
           :key="post.id"
           :href="post._path"
@@ -24,7 +24,7 @@
           :id="post.id"
           :tags="post.tags"
         />
-    <!-- </div> -->
+    </div>
     
 
   </main>
@@ -53,7 +53,7 @@
   var { data } = await useAsyncData('home', () => queryContent('blog').where({ tags: { $contains: query } }).sort({id:-1}).find())
 </script>
 
-<style>
+<style scoped>
   main {
     /* display: flex; */
     /* flex-direction: column; */
@@ -62,14 +62,21 @@
     margin-top: 3.5rem;
     /* gap: 0rem; */
     /* width: 80%; */
+    
   }
   
   .posts-list{
     width: 80%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
   }
 
+
+
   .no-margin{
-    margin: 0
+    margin: 0;
+    text-align: center;
   }
 
   .no-posts{

pages/blog/[...slug].vue

@@ -29,7 +29,7 @@
     </main> -->
 </template>
   
-<style>
+<style scoped>
   .post{
     width: 50%;
     
@@ -38,6 +38,7 @@
   /* i wonder if this will cause issues */
   img{ 
     width: 100%;
+    
   }
 
   @media (max-width: 1000px){

pages/chrono-chamber.vue

@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style scoped>
 
 </style>

pages/homepage.vue

@@ -18,7 +18,7 @@
 
 </template>
 
-<style>
+<style scoped>
     .container{
         padding-left: 1cm;
     }

pages/index.vue

@@ -144,16 +144,34 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
 </template>
 
 <style scoped>
+h1{
+  text-align: center;
+}
+
+
+
 .container {
   display: flex;
-  width: 100%
+  margin-left: 10%;
+  margin-right: 10%;
+  justify-content: center;
+    
+}
+
+@media (max-width: 1000px){
+  .container{
+    margin: 0;
+  }
   
 }
 
 .featured-container{
   display: flex;
-  width: 80%;
+  width: 100%;
   justify-content: center;
+  
+  /* margin-left: auto;
+  margin-right: auto; */
   /* margin-left: auto;
   margin-right: auto; */
 }
@@ -163,6 +181,8 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
   flex-direction: column;
   width: 80%;
   justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .small-image-pls {
@@ -232,7 +252,7 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
 }
 </style>
 
-<style>
+<style scoped>
 main {
   /* display: flex;
   flex-direction: column;
@@ -241,13 +261,7 @@ main {
   /* margin-top: 3.5rem; */
   /* gap: 2rem; */
 }
-hr {
+
-  width: 100%;
-  height: 0px;
-  border: 5px  var(--accent);
-  border-style: dotted none none none;
-  max-width: var(--max-width);
-}
 .container > div {
   /* display: flex;
   flex-direction: column; */

pages/newIndex.vue

@@ -13,6 +13,6 @@
   });
 </script>
 
-<style>
+<style scoped>
 
 </style>