Update icons and keynoters section style.

Author: nikoshell

src/components/BaseHead.astro

@@ -59,4 +59,7 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
 
-<script src="https://kit.fontawesome.com/14a4971ab3.js" crossorigin="anonymous"></script>
+<script
+  is:inline
+  src="https://kit.fontawesome.com/14a4971ab3.js"
+  crossorigin="anonymous"></script>

src/components/keynoters/keynoter.astro

@@ -31,10 +31,12 @@ const placeholders = [Person1, Person2, Person3, Person4, Person5];
 
 const Placeholder =
   placeholders[Math.floor(Math.random() * placeholders.length)];
+
+const link = placeholder ? "":"`/speaker/${slug}`"
 ---
 
 <li class:list={["list-none rounded-2xl overflow-clip flex group", className]}>
-  <a class="block w-full h-full relative" href={`/speaker/${slug}`}>
+  <a class="block w-full h-full relative ${clicable}" href={link}>
     <div class="relative aspect-[9/10] overflow-clip">
       {
         image ? (
@@ -45,19 +47,19 @@ const Placeholder =
             class="object-cover group-hover:scale-105 transition-transform h-full w-full"
           />
         ) : (
-          <div class="bg-keynoter-info w-full h-full group-hover:opacity-90">
+          <div class="bg-keynoter-info w-full h-full group-hover:opacity-100 opacity-80">
             <Placeholder />
           </div>
         )
       }
     </div>
 
     <div
-      class="px-5 py-2 pb-4 bg-keynoter-info rounded-t-none h-full group-hover:opacity-90"
+      class="px-5 py-2 pb-4 bg-keynoter-info rounded-t-none h-full group-hover:opacity-100 opacity-80"
     >
       {
         placeholder ? (
-          <p class="text-body-inverted font-bold">More keynoters coming soon</p>
+          <p class="text-body-inverted font-bold ">More keynoters coming soon</p>
         ) : (
           <>
             <p class="text-body-inverted font-bold">{name}</p>

src/components/keynoters/keynoters.astro

@@ -7,7 +7,7 @@ import { getCollection } from "astro:content";
 
 const keynoters = await getCollection("keynoters");
 
-const placeholders = Math.max(0, 6 - keynoters.length);
+const placeholders = Math.max(0, 3 - keynoters.length);
 ---
 
 <section class="prose-xl relative my-12 px-6">
@@ -17,11 +17,11 @@ const placeholders = Math.max(0, 6 - keynoters.length);
       stroke-width={1}
       fill="none"
       fill-rule="evenodd"
-      opacity={0.4}
+      opacity={0.1}
     >
       <g
         transform="translate(-297.000000, -4131.000000)"
-        class="fill-hero-primary"
+        class="fill-secondary-light"
       >
         <g transform="translate(81.000000, 3688.000000)">
           <g transform="translate(216.000000, 443.000000)">
@@ -125,3 +125,6 @@ const placeholders = Math.max(0, 6 - keynoters.length);
     </div>
   </div>
 </section>
+<style>
+  .fill-hero-primary {}
+</style>

src/components/ui/Button.astro

@@ -20,7 +20,7 @@ const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover borde
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
 const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
 const disabledClasses = "opacity-50 pointer-events-none";
-const iconClasses = "pl-2 w-5 h-5";
+const iconClasses = "mx-2 ";
 
 ---
 

src/components/ui/Icon.astro

@@ -3,7 +3,7 @@ const {
   name,
   svg = false,
   class: className = "",
-  size = "w-5 h-5", // Default size (Tailwind)
+  size = "", // Default size (Tailwind)
   label = "",
   role = "img"
 } = Astro.props;

src/pages/test_components.astro

@@ -24,15 +24,19 @@ import Icon from "@ui/Icon.astro"
     </div>
 </section>
 
-
-<Headline as="h1" id="components" title="Example components" />
 <section class="prose-xl my-10">
-    <Headline id="button" title="Button" />
+    <Headline id="button" title="Icons" />
     <div class="grid gap-2 w-[200px]">
       <Icon name="check" />
-      <Icon name="times" size="w-4 h-4" />
-      <Icon name="cog" size="w-8 h-8" />
-      <Button icon="arrow-right" iconRight={true} size="w-6 h-6">Next</Button>
+      <Icon name="times" size="fa-2x" />
+      <Icon name="times" size="fa-3x" />
+      <Icon name="times" size="fa-4x" />
+      <Icon name="times" size="fa-5x" />
+      <Icon name="times" size="fa-6x" />
+      <Icon name="cog" />
+      <Button icon="arrow-right" iconRight={true} >Next</Button>
+      <Button icon="arrow-left" iconRight={false} >Prev</Button>
+      <Button icon="clock" iconRight={false} size="fa-2xl">Prev</Button>
 
     </div>
 </section>