Update

src/lib/Avatar.svelte

@@ -62,8 +62,8 @@
 {/if}
 
 {#if size === 'normal'}
-<div class="w-44 text-center pb-4">
+<div class="w-36 sm:w-44 text-center pb-4">
-  <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>
+  <a href="/lide/{speaker.id}" on:mouseover={mouseOver} on:mouseleave={mouseLeave}><img src={currentImg} class="w-36 sm: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="/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>

src/lib/Footer.svelte

@@ -5,7 +5,7 @@
 
 {#if $bundle}
 <div class="bg-blue-web-bg text-white">
-  <div class="relative mx-auto px-6 pt-10 pb-6 max-w-6xl flex pr-4">
+  <div class="relative mx-auto px-6 pt-10 pb-2 sm:pb-6 max-w-6xl sm:flex pr-4">
     <div class="flex-1">
       <div>
         <a href="/"><img src="/img/logo-white.svg" alt="UTXO.22" class="w-26" /></a>
@@ -20,7 +20,9 @@
         <a href="{$bundle.links.docs}" class="hover:text-red-500"><i class="fas fa-book" />&nbsp; Dokumentace</a>
       </div>
     </div>
-    <SocialButtons size="normal" />
+    <div class="sm:mt-0 mt-6">
+      <SocialButtons size="normal" />
+    </div>
   </div>
   <div class="relative mx-auto px-6 pt-10 pb-6 max-w-6xl text-xs opacity-50 sm:flex">
     <div class="flex-1 mt-1 mb-2">

src/lib/SocialButtons.svelte

@@ -24,10 +24,10 @@
     </div>
   {/if}
   {#if size === 'normal'}
-    <div class="w-1/4">
+    <div class="w-auto sm:w-1/4">
-      <div class="flex flex-wrap gap-3 justify-between">
+      <div class="sm:flex gap-3 justify-between">
         {#each socials as soc}
-          <div class="block  hover:text-red-500"><a href="{$bundle.links[soc.link]}" class="" target="_blank"><i class="{soc.ico}" />&nbsp;&nbsp;{soc.name}</a></div>
+          <div class="mr-4 sm:mr-0 inline-block sm:block hover:text-red-500"><a href="{$bundle.links[soc.link]}" class="no-wrap" target="_blank"><i class="{soc.ico}" />&nbsp;&nbsp;{soc.name}</a></div>
         {/each}
       </div>
     </div>

src/routes/index.svelte

@@ -31,15 +31,15 @@
   <title>UTXO.22 - 4-5. červen 2022 - {$bundle.description}</title>
 </svelte:head>
 
-<section class="relative mx-auto py-10 px-6 max-w-6xl">
+<section class="relative mx-auto py-6 sm:py-10 px-6 max-w-6xl">
   {#if $bundle}
-    <div class="flex flex-wrap gap-3 text-xs uppercase font-bold text-blue-web justify-left">
+    <div class="flex flex-wrap gap-1.5 sm:gap-3 text-xs uppercase font-bold text-blue-web justify-left">
       {#each tracks as track}
-        <div class="py-2 px-8 rounded-full shadow border border-solid {$userData.hpTrack === track.id ? 'bg-utxo-gradient border-0 text-white' : 'border-blue-web hover:bg-blue-web hover:text-white hover:border-transparent cursor-pointer'}" on:click={changeTrack(track.id)}>{track.shortname || track.name} {#if !track.id}({$bundle.spec.speakers.length}){/if}</div>
+        <div class="py-1.5 sm:py-2 px-2.5 sm:px-8 rounded-full shadow border border-solid {$userData.hpTrack === track.id ? 'bg-utxo-gradient border-0 text-white' : 'border-blue-web hover:bg-blue-web hover:text-white hover:border-transparent cursor-pointer'}" on:click={changeTrack(track.id)}>{track.shortname || track.name} {#if !track.id}({$bundle.spec.speakers.length}){/if}</div>
       {/each}
     </div>
 
-    <div class="flex flex-wrap gap-6 mt-14 justify-center">
+    <div class="flex flex-wrap gap-6 mt-6 sm:mt-14 justify-center">
       {#each $bundle.spec.speakers as speaker}
         {#if ($userData.hpTrack === 'top' && speaker.lead === true) || $userData.hpTrack !== 'top'}
           {#if (!$userData.hpTrack || speaker.tracks.includes($userData.hpTrack)) || $userData.hpTrack === 'top'}