Simplify anniversary banner markup and use btn classes

Author: tobihagemann

config/_default/params.yaml

@@ -3,7 +3,6 @@ math: false
 
 anniversaryBanner:
   enabled: true
-  url: https://www.reddit.com/r/Cryptomator/
   excludePaths:
     - /downloads-thanks/
     - /paddle-checkout/

layouts/partials/anniversary-banner.html

@@ -1,41 +1,16 @@
-{{- $banner := .Site.Params.anniversaryBanner -}}
-{{- $url := $banner.url | default "https://www.reddit.com/r/Cryptomator/" -}}
-<section class="absolute inset-x-0 top-16 z-40 pointer-events-none" role="region" aria-label="{{ i18n "anniversary_banner_aria_label" . }}">
+<section class="absolute inset-x-0 top-16 z-40" role="region" aria-label="{{ i18n "anniversary_banner_aria_label" . }}">
   <div class="container py-1.5 md:py-2">
-    {{- with $url -}}
-    <a href="{{ . }}" class="pointer-events-auto mx-auto flex w-full items-center justify-start gap-1 rounded-md bg-primary px-3 py-1.5 text-xs text-white no-underline shadow-sm md:justify-center md:gap-3 md:px-4 md:py-2 md:text-sm hover:no-underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-white/70" target="_blank" rel="noopener" data-umami-event="anniversary-banner-reddit">
-      {{- if fileExists "static/img/logo-anniversary.svg" -}}
-      <img src="/img/logo-anniversary.svg" class="h-9 w-auto shrink-0 mr-2 md:h-7 md:mr-0" alt="10 years anniversary logo" loading="lazy">
-      {{- else -}}
-      <i class="fa-solid fa-cake-candles text-xl shrink-0 mr-2 md:mr-0" aria-hidden="true"></i>
-      {{- end -}}
-      <p class="m-0 flex flex-wrap items-center justify-start gap-x-1 gap-y-0.5 text-left leading-normal text-white md:justify-center md:text-center">
+    <a href="https://www.reddit.com/r/Cryptomator/comments/1rjt0yh/join_our_10year_anniversary_ama_with_the/" class="btn btn-primary flex w-full items-center gap-1 px-2 text-xs md:justify-center md:gap-3 md:px-4 md:text-sm" target="_blank" rel="noopener" data-umami-event="anniversary-banner-reddit">
+      <img src="/img/logo-anniversary.svg" class="h-9 shrink-0 mr-2 md:h-7 md:mr-0" alt="10 years anniversary logo" loading="lazy">
+      <span class="flex flex-wrap items-center gap-x-1 gap-y-0.5 md:justify-center">
         <span class="font-semibold">{{ i18n "anniversary_banner_lead" . }}</span>
         <span class="hidden text-white/80 md:inline" aria-hidden="true">•</span>
-        <span class="font-normal text-white underline-offset-2">
+        <span>
           <span class="md:hidden">{{ i18n "anniversary_banner_cta_mobile" $ }}</span>
           <span class="hidden md:inline">{{ i18n "anniversary_banner_cta_desktop" $ }}</span>
-          <i class="fa-regular fa-arrow-right ml-1 text-[0.75em]" aria-hidden="true"></i>
+          <i class="fa-regular fa-arrow-right ml-1" aria-hidden="true"></i>
         </span>
-      </p>
+      </span>
     </a>
-    {{- else -}}
-    <div class="pointer-events-auto mx-auto flex w-full items-center justify-start gap-1 rounded-md bg-primary px-3 py-1.5 text-xs text-white shadow-sm md:justify-center md:gap-3 md:px-4 md:py-2 md:text-sm">
-      {{- if fileExists "static/img/logo-anniversary.svg" -}}
-      <img src="/img/logo-anniversary.svg" class="h-9 w-auto shrink-0 mr-2 md:h-7 md:mr-0" alt="10 years anniversary logo" loading="lazy">
-      {{- else -}}
-      <i class="fa-solid fa-cake-candles text-xl shrink-0 mr-2 md:mr-0" aria-hidden="true"></i>
-      {{- end -}}
-      <p class="m-0 flex flex-wrap items-center justify-start gap-x-1 gap-y-0.5 text-left leading-normal text-white md:justify-center md:text-center">
-        <span class="font-semibold">{{ i18n "anniversary_banner_lead" . }}</span>
-        <span class="hidden text-white/80 md:inline" aria-hidden="true">•</span>
-        <span class="font-normal text-white underline-offset-2">
-          <span class="md:hidden">{{ i18n "anniversary_banner_cta_mobile" $ }}</span>
-          <span class="hidden md:inline">{{ i18n "anniversary_banner_cta_desktop" $ }}</span>
-          <i class="fa-regular fa-arrow-right ml-1 text-[0.75em]" aria-hidden="true"></i>
-        </span>
-      </p>
-    </div>
-    {{- end -}}
   </div>
 </section>