i am gaming

components/Socials.vue

@@ -7,6 +7,7 @@
   <style>
   .socials {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: 1rem;
   

pages/blog-index.vue

@@ -1,6 +1,7 @@
 <template>
   <main>
-    <a href="/"><-- Return Home</a>
+    <!-- <a href="/"><-- Return Home</a> -->
+    <BigButton text="<<< Return Home" href="/"/>
     <h1>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>

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

@@ -10,7 +10,8 @@
 
 <template>
     <main>
-      <a href="javascript:window.history.back();"><-- Go Back</a>
+      <!-- <a href="javascript:window.history.back();"><-- Go Back</a> -->
+      <BigButton text="<<< Return to blog listing" href="/blog-index"/>
       <ContentDoc v-slot="{ doc }">
         <article class="post">
           <h1>{{ doc.title }}</h1>
@@ -30,7 +31,23 @@
   
 <style>
   .post{
-    width: 80%;
+    width: 50%;
+    
+  }
+
+  /* i wonder if this will cause issues */
+  img{ 
+    width: 100%;
+  }
+
+  @media (max-width: 1000px){
+    .post{
+      width: 80%;
+    }
+
+    img{
+      width: 100%;
+    }
   }
 
   main {