Update

src/lib/Avatar.svelte

@@ -57,14 +57,14 @@
 
 {#if size === 'big'}
 <div class="w-64 text-center pb-4">
-  <img src={currentImg} class="w-64 rounded-full m-auto shadow-xl" alt={speaker.name} />
+  <img src={currentImg} class="w-64 rounded-full m-auto shadow-xl" alt={speaker.name}  on:mouseover={mouseOver} on:mouseleave={mouseLeave} />
 </div>
 {/if}
 
 {#if size === 'normal'}
 <div class="w-44 text-center pb-4">
-  <a href="/prednasejici/{speaker.id}" on:mouseover={mouseOver} on:mouseleave={mouseLeave}><img src={currentImg} class="w-40 rounded-full m-auto shadow-xl" alt={speaker.name} /></a>
+  <a href="/lide/{speaker.id}" on:mouseover={mouseOver} on:mouseleave={mouseLeave}><img src={currentImg} class="w-40 rounded-full m-auto shadow-xl" alt={speaker.name} /></a>
-  <div class="mt-4 text-sm text-blue-web uppercase font-bold"><a href="/prednasejici/{speaker.id}">{speaker.name}</a> {country}</div>
+  <div class="mt-4 text-sm text-blue-web uppercase font-bold"><a href="/lide/{speaker.id}">{speaker.name}</a> {country}</div>
   {#if speaker.bio}
     <div class="mt-1 text-xs text-blue-web italic"><SvelteMarkdown source={speaker.bio} /></div>
   {/if}
@@ -79,13 +79,13 @@
 
 {#if size === 'extra-small'}
 <div class="w-6 h-6 text-center">
-  <img src={currentImg} class="w-6 rounded-full m-auto" alt="{speaker.name}" />
+  <a href="/lide/{speaker.id}"><img src={currentImg} class="w-6 rounded-full m-auto" alt="{speaker.name}" /></a>
 </div>
 {/if}
 
 {#if size === 'micro'}
 <div class="w-4 h-4 text-center">
-  <img src={currentImg} class="w-4 rounded-full m-auto" alt="{speaker.name}" />
+  <a href="/lide/{speaker.id}"><img src={currentImg} class="w-4 rounded-full m-auto" alt="{speaker.name}" /></a>
 </div>
 {/if}
 

src/routes/program.svelte

@@ -65,7 +65,7 @@
             {#each speakersMap(e.speakers) as s}
               <div class="flex gap-1.5">
                 <Avatar speaker={s} size='extra-small' />
-                <div class="m-auto"><a href="/prednasejici/{s.id}">{s.name}</a></div>
+                <div class="m-auto"><a href="/lide/{s.id}">{s.name}</a></div>
               </div>
             {/each}
           </div>
@@ -76,17 +76,17 @@
           <div class="text-xs my-auto">{e.duration}m</div>
         </div>
         {#if getParents(e).length > 0}
-          <div class="mt-4 w-auto">
+          <div class="mt-4 w-auto mb-2">
             <div class="flex flex-wrap gap-2" cellpadding="5">
               {#each getParents(e) as pe}
-                <div class="mb-2 border rounded py-1.5 px-2.5 bg-gray-100 text-sm">
+                <div class="border rounded py-1.5 px-2.5 bg-gray-100 text-sm">
                   <div class="font-bold">{pe.name}</div>
                   <div class="mt-1">
                     {#if pe.speakers.length === 0}
                       <div>TBA</div>
                     {:else}
                       {#each speakersMap(pe.speakers) as s}
-                        <div class="flex gap-1"><Avatar speaker={s} size='micro' /><div>{s.name}</div></div>
+                        <div class="flex gap-1"><Avatar speaker={s} size='micro' /><div><a href="/lide/{s.id}">{s.name}</a></div></div>
                       {/each}
                     {/if}
                   </div>