better mobile styles for blog and newsletter

Author: marshallswain

app/components/BlogPostTile.vue

@@ -10,20 +10,20 @@ defineProps<{
 <template>
   <div>
     <Card :class="cardClasses">
-      <figure class="aspect-video !rounded-box m-4">
-        <img :src="post.meta.imgSrc" :alt="post.title" class="object-cover h-full w-full object-center">
+      <figure class="aspect-video !rounded-box md:m-4">
+        <img :src="post.meta.imgSrc" :alt="post.title" class="object-cover h-full w-full object-center" />
       </figure>
       <CardBody class="gap-6">
         <CardTitle>{{ post.title }}</CardTitle>
         <p>{{ post.description }}</p>
 
         <CardActions class="mt-4">
           <NuxtLink :to="post.path" class="btn btn-primary btn-ghost">
-            Read More 
+            Read More
             <Icon name="feather:chevron-right" size="24" />
           </NuxtLink>
         </CardActions>
       </CardBody>
     </Card>
   </div>
-</template>
+</template>

app/components/NewsletterSubscribe.vue

@@ -4,24 +4,20 @@
       title="Subscribe to our Newsletter"
       description="Get new Feathers content as it becomes available."
     />
-    
-    <form action="https://buttondown.email/api/emails/embed-subscribe/feathers" method="post" target="popupwindow"
+
+    <form
+      action="https://buttondown.email/api/emails/embed-subscribe/feathers"
+      method="post"
+      target="popupwindow"
       onsubmit="window.open('https://buttondown.email/feathers', 'popupwindow')"
       class="embeddable-buttondown-form flex flex-col"
     >
-      <Join class="mt-8">
+      <Join class="join-vertical md:join-horizontal mt-8">
         <Label xl join floating input class="bg-white/10 py-3 px-3 w-full">
           <Text>Enter your email</Text>
-          <Input 
-            type="email" 
-              placeholder="Enter your email" 
-              id="bd-email" 
-              name="email" 
-            />
-          </Label>
-          <Button join primary type="submit" value="Subscribe" name="Submit" size="xl">
-            Subscribe
-          </Button>
+          <Input type="email" placeholder="Enter your email" id="bd-email" name="email" />
+        </Label>
+        <Button join primary type="submit" value="Subscribe" name="Submit" size="xl"> Subscribe </Button>
       </Join>
     </form>
   </div>

app/pages/blog/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 definePageMeta({
-  layout: 'page',
+  layout: 'page'
 })
 
 const { data: posts } = await useAsyncData(() => queryCollection('blogPosts').order('date', 'DESC').all())
@@ -9,24 +9,26 @@ const otherPosts = computed(() => posts.value?.slice(1))
 </script>
 
 <template>
-  <div class="bg-[url('/img/top_background.svg')] bg-no-repeat bg-cover bg-center text-base-content max-w-screen overflow-x-hidden">
+  <div
+    class="bg-[url('/img/top_background.svg')] bg-no-repeat bg-cover bg-center text-base-content max-w-screen overflow-x-hidden"
+  >
     <div class="relative mx-auto max-w-[82rem] lg:drawer-open pt-16 px-4">
-      <Titles title="Latest News" sub-title="Stay up to date with the latest Feathers news and updates" class="py-24"/>
+      <Titles
+        title="Latest News"
+        sub-title="Stay up to date with the latest Feathers news and updates"
+        class="py-24"
+      />
     </div>
     <div class="h-64"></div>
   </div>
-  <div class="bg-base-200 min-h-screen max-w-[82rem] mx-auto -mt-64 rounded-4xl p-6 pt-12 lg:p-12">
-    <div class="p-4 md:pt-8 md:pb-7 md:px-5 bg-base-300/50 rounded-4xl">
-      <Text is="h2" semibold size="2xl" class="px-4">
-        Latest Post
-      </Text>
+  <div class="bg-base-200 min-h-screen max-w-[82rem] mx-auto -mt-64 rounded-4xl p-4 md:p-6 md:pt-12 lg:p-12">
+    <div class="pb-4 pt-6 md:pt-8 md:pb-7 md:px-5 bg-base-300/50 rounded-4xl">
+      <Text is="h2" semibold size="2xl" class="px-4"> Latest Post </Text>
       <BlogPostTile :post="mostRecentPost!" card-classes="xl:card-side" />
     </div>
 
-    <div class="p-4 md:pt-8 md:pb-7 md:px-5 mt-24">
-      <Text is="h2" semibold size="2xl" class="px-4">
-        Recent Posts
-      </Text>
+    <div class="p-2 md:pt-8 md:pb-7 md:px-5 mt-24">
+      <Text is="h2" semibold size="2xl" class="px-4"> Recent Posts </Text>
       <BlogPosts :posts="otherPosts!" class="my-12" />
     </div>
   </div>