Added styles

src/pages/blog/shopify-developer-setup.mdx

@@ -1,12 +0,0 @@
----
-layout: ../../layouts/main.astro
-date: 2022-08-18
-title: Optimizing performance of an old Shopify Theme (Part 1)
-description:
-  Some tips and recommendations for optimizing and boosting performance of an
-  old Shopify theme.
-exerpt:
-  Some tips and recommendations for optimizing and boosting performance of an
-  old Shopify theme.
-image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=350&ar=16:9&fit=crop
----

src/pages/church/[id].astro

@@ -66,7 +66,7 @@ const htmlData = marked.parse(mdGood);
 
 const title = pageData.properties.title.title[0].plain_text.split(" | ").splice(0, pageData.properties.title.title[0].plain_text.split(" | ").length - 1).join(" - ");
 const description = generalString.substring(0, 250);
-console.log(description);
+console.log(pageData.cover)
 const image = pageData.cover.external.url;
 ---
 
@@ -77,6 +77,9 @@ const image = pageData.cover.external.url;
   blog={false}
   hasMainTitle={true}
 >
-  <h1>{title}</h1>
+  <div class="relative w-full aspect-video flex justify-center items-center mb-4">
+    <img src={image} alt={title} class="w-full h-full object-cover absolute top-0 left-0">
+    <h1 class="z-10 text-white px-8 text-sm md:text-xl m-0">{title}</h1>
+  </div>
   <div set:html={htmlData}></div>
 </MainLayout>

src/styles/base.css

@@ -3,7 +3,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer utilities {
+@layer components {
   main.blog h1 {
     @apply text-4xl font-bold mb-8 text-center uppercase;
   }
@@ -94,4 +94,10 @@
   main.blog iframe {
     @apply w-full mb-8;
   }
+
+  @media only screen and (max-width: 768px) {
+    main.blog h1 {
+      @apply text-lg m-0;
+    }
+  }
 }