From 3492009582313854dcc753890d632290574abf88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20Gonz=C3=A1lez?= <rafa@acromatico.co>
Date: Sat, 21 Jan 2023 11:57:39 -0600
Subject: [PATCH] Added styles

---
 src/pages/blog/shopify-developer-setup.mdx | 12 ------------
 src/pages/church/[id].astro                |  7 +++++--
 src/styles/base.css                        |  8 +++++++-
 3 files changed, 12 insertions(+), 15 deletions(-)
 delete mode 100644 src/pages/blog/shopify-developer-setup.mdx

diff --git a/src/pages/blog/shopify-developer-setup.mdx b/src/pages/blog/shopify-developer-setup.mdx
deleted file mode 100644
index af693e9..0000000
--- a/src/pages/blog/shopify-developer-setup.mdx
+++ /dev/null
@@ -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
----
\ No newline at end of file
diff --git a/src/pages/church/[id].astro b/src/pages/church/[id].astro
index 67c0ad5..0e1fa5b 100644
--- a/src/pages/church/[id].astro
+++ b/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>
diff --git a/src/styles/base.css b/src/styles/base.css
index eb5595a..60799ef 100644
--- a/src/styles/base.css
+++ b/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;
+    }
+  }
 }
\ No newline at end of file