From 338ca81e9ed38ad0f3a1bd06b187e4bf159ded45 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Fri, 24 Mar 2023 16:22:41 +0000
Subject: [PATCH] feat: head shows a blurred background when there is a banner

---
 src/components/site/SiteHeader.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 3f7196dc..032c6a95 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -198,7 +198,14 @@ export const SiteHeader: React.FC<{
       <div className="px-5 max-w-screen-md mx-auto h-full relative flex items-center flex-col">
         <div className="mb-auto"></div>
         <div className="flex py-12 w-full">
-          <div className="xlog-site-info flex space-x-6 items-center w-full">
+          <div
+            className={cn(
+              "xlog-site-info flex space-x-6 items-center w-full",
+              site?.banners?.[0]?.address
+                ? "bg-white bg-opacity-50 backdrop-blur-sm rounded-xl p-8 z-[1] border"
+                : "",
+            )}
+          >
             {site?.avatars?.[0] && (
               <Avatar
                 className="xlog-site-icon max-w-[80px] max-h-[80px] sm:max-w-none sm:max-h-none"