From d3686e50290e362e89be77e29e83cf81ccc909be Mon Sep 17 00:00:00 2001
From: Tabby <41929769+tabby-cat-nya@users.noreply.github.com>
Date: Sat, 5 Apr 2025 20:02:54 +1100
Subject: [PATCH] okiee fixed the styling~

---
 assets/css/main.scss       |  8 ++++++++
 components/BigButton.vue   | 17 ++++++++++++++---
 components/BlogCard.vue    |  1 +
 components/BoldButton.vue  |  2 +-
 components/ProjectCard.vue |  2 +-
 components/Socials.vue     |  2 +-
 components/TextCard.vue    |  2 +-
 pages/blog-index.vue       | 17 ++++++++++++-----
 pages/blog/[...slug].vue   |  3 ++-
 pages/chrono-chamber.vue   |  2 +-
 pages/homepage.vue         |  2 +-
 pages/index.vue            | 34 ++++++++++++++++++++++++----------
 pages/newIndex.vue         |  2 +-
 13 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/assets/css/main.scss b/assets/css/main.scss
index 71b57a0..2a5f60e 100644
--- a/assets/css/main.scss
+++ b/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;
 // }
diff --git a/components/BigButton.vue b/components/BigButton.vue
index dabd640..3f40dbb 100644
--- a/components/BigButton.vue
+++ b/components/BigButton.vue
@@ -1,7 +1,9 @@
 <template>
-  <a class="big-button" :href="props.href">
-    <h2>{{props.text}}</h2>
-  </a>
+  <div class="button-box">
+    <a class="big-button" :href="props.href">
+      <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%;
     
   }
 
diff --git a/components/BlogCard.vue b/components/BlogCard.vue
index 8a266c4..42e6877 100644
--- a/components/BlogCard.vue
+++ b/components/BlogCard.vue
@@ -37,6 +37,7 @@ const props = defineProps({
 
   h2{
     margin: 0;
+    text-align: center;
   }
 
   .blog-header{
diff --git a/components/BoldButton.vue b/components/BoldButton.vue
index 3c55bd6..33df4c8 100644
--- a/components/BoldButton.vue
+++ b/components/BoldButton.vue
@@ -14,7 +14,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .button {
         background-color: #3f0064; 
         border: none;
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index 4b145c6..d2ca586 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .image-container{
         position: relative;
         text-align: center;
diff --git a/components/Socials.vue b/components/Socials.vue
index 1fb635a..36eb3a1 100644
--- a/components/Socials.vue
+++ b/components/Socials.vue
@@ -4,7 +4,7 @@
     </div>
   </template>
   
-  <style>
+  <style scoped>
   .socials {
     display: flex;
     flex-wrap: wrap;
diff --git a/components/TextCard.vue b/components/TextCard.vue
index fc6258a..56a0ceb 100644
--- a/components/TextCard.vue
+++ b/components/TextCard.vue
@@ -22,7 +22,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .text-container{
         position: relative;
         text-align: center;
diff --git a/pages/blog-index.vue b/pages/blog-index.vue
index 8edf52b..c3e74da 100644
--- a/pages/blog-index.vue
+++ b/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{
diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
index 83efecb..4522cd2 100644
--- a/pages/blog/[...slug].vue
+++ b/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){
diff --git a/pages/chrono-chamber.vue b/pages/chrono-chamber.vue
index 7b59af4..3c92ee3 100644
--- a/pages/chrono-chamber.vue
+++ b/pages/chrono-chamber.vue
@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style scoped>
 
 </style>
\ No newline at end of file
diff --git a/pages/homepage.vue b/pages/homepage.vue
index 5ca019b..68dc25b 100644
--- a/pages/homepage.vue
+++ b/pages/homepage.vue
@@ -18,7 +18,7 @@
 
 </template>
 
-<style>
+<style scoped>
     .container{
         padding-left: 1cm;
     }
diff --git a/pages/index.vue b/pages/index.vue
index 599e0f3..28dc41b 100644
--- a/pages/index.vue
+++ b/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; */
diff --git a/pages/newIndex.vue b/pages/newIndex.vue
index f78f412..d9018c8 100644
--- a/pages/newIndex.vue
+++ b/pages/newIndex.vue
@@ -13,6 +13,6 @@
   });
 </script>
 
-<style>
+<style scoped>
 
 </style>
\ No newline at end of file