Add data-pagefind-ignore attribute to Banner component and adjust CSS formatting

Author: khalidabuhakmeh

src/components/Banner.astro

@@ -11,11 +11,18 @@ if (!banner) {
 }
 ---
 
-{banner && <div class="sl-banner" set:html={banner.content} />}
+{
+  banner && (
+    <div class="sl-banner" data-pagefind-ignore set:html={banner.content} />
+  )
+}
 
 <style>
   .sl-banner {
-    --__sl-banner-text: var(--sl-color-banner-text, var(--sl-color-text-invert));
+    --__sl-banner-text: var(
+      --sl-color-banner-text,
+      var(--sl-color-text-invert)
+    );
     padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
     background-color: var(--sl-color-banner-bg, var(--sl-color-bg-accent));
     color: var(--__sl-banner-text);
@@ -27,4 +34,4 @@ if (!banner) {
   .sl-banner :global(a) {
     color: var(--__sl-banner-text);
   }
-</style>
+</style>