chore: Tweak UI of upcoming events a little bit and make the links cl…

…ickable
ash-project · Jan 24, 2025 · 17d8b33 · 17d8b33
1 parent 6fcd59a
commit 17d8b33
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/lib/ash_hq_web/templates/home/home.html.heex b/lib/ash_hq_web/templates/home/home.html.heex
@@ -291,19 +291,25 @@
   </div>
 
   <div class="mt-6 z-10" id="upcoming-events">
-    <div class="max-w-5xl mx-auto text-center">
-      <h1 class="text-3xl sm:text-4xl font-bold mb-6 bg-gradient-to-r from-primary-light-400 via-primary-dark-500 to-primary-light-600 bg-clip-text text-transparent drop-shadow-[0_0_10px_rgba(255,87,87,0.3)]">
+    <div class="max-w-3xl mx-auto">
+      <h1 class="text-center text-3xl sm:text-4xl font-bold mb-6 bg-gradient-to-r from-primary-light-400 via-primary-dark-500 to-primary-light-600 bg-clip-text text-transparent drop-shadow-[0_0_10px_rgba(255,87,87,0.3)]">
         Upcoming
         <span class="bg-gradient-to-r from-primary-dark-500 to-primary-light-500 bg-clip-text text-transparent">
           events
         </span>
       </h1>
-      <ul class="text-left mx-auto max-w-3xl">
-        <li :for={event <- @events} class="mb-4 border-b">
-          <a href={event.href} class="text-xl font-bold">{event.title}</a>
+      <ul class="divide-primary-light-500/30 divide-y relative">
+        <li :for={event <- @events} class="py-4">
+          <a
+            href={event.href}
+            class="text-xl font-bold hover:text-primary-light-500"
+            target="_blank"
+          >
+            {event.title}
+          </a>
           <p class="text-sm text-gray-400">Date: {event.date_in_english}</p>
-          <p class="text-md">
-          {{:safe, event.description}}
+          <p class="text-md mt-3">
+            {{:safe, event.description}}
           </p>
         </li>
       </ul>

diff --git a/lib/ash_hq_web/templates/layout/app.html.heex b/lib/ash_hq_web/templates/layout/app.html.heex
@@ -1,7 +1,11 @@
 <nav class="fixed top-0 w-full z-50 backdrop-blur-lg bg-slate-950/50 border-b border-slate-500/20">
   <div :if={@next_event} class="bg-fuchsia-900 w-full py-1 text-center">
-    <a class="font-bold mr-2" href={@next_event.href}>{@next_event[:cta]}&nbsp{@next_event.title}</a>{@next_event.date_in_english}
-    <a class="font-extralight" href="/#upcoming-events">&nbsp&nbsp|&nbsp&nbsp See all upcoming events</a>
+    <a class="font-bold mr-2" href={@next_event.href} target="_blank">
+      {@next_event[:cta]}&nbsp{@next_event.title}
+    </a>{@next_event.date_in_english}
+    <a class="font-extralight" href="/#upcoming-events">
+      &nbsp&nbsp|&nbsp&nbsp See all upcoming events
+    </a>
   </div>
   <div class="py-2 leading-loose px-4 sm:px-6 lg:px-8">
     <div class="hidden md:block relative">