Frontend: Added mailto link, changing mail display, fixed sliding.

frontend/src/lib/components/sidebar-component.svelte

@@ -1,11 +1,12 @@
 <script>
   import "$lib/css/sidebar-component.css";
-    import SvgIcon from '@jamescoyle/svelte-icon'
-    import { mdiHelpCircle } from '@mdi/js';
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { mdiHelpCircle } from "@mdi/js";
 
   export let icon = mdiHelpCircle;
   export let title = "";
   export let description = "";
+  export let maito = false;
   const descriptionArray = description.split(";");
 </script>
 
@@ -14,7 +15,13 @@
     <SvgIcon size="45" path={icon} type="mdi" />
   </div>
   <h1 class="text sc-title">{title}</h1>
+  {#if maito}
+    <a class="text sc-description" href={`mailto:${description}`}
+      >{description.replace("@", "[at]")}</a
+    >
+  {:else}
     {#each descriptionArray as text}
       <h2 class="text sc-description">{text}</h2>
     {/each}
+  {/if}
 </div>

frontend/src/lib/components/sidebar.svelte

@@ -91,7 +91,7 @@
         <SidebarComponent icon={mdiAccount} description={birth_year} />
       {/if}
       {#if info.email != null}
-        <SidebarComponent icon={mdiEmailOutline} description={info.email} />
+        <SidebarComponent icon={mdiEmailOutline} description={info.email} maito="true"/>
       {/if}
       {#if info.phone_number != null}
         <SidebarComponent icon={mdiPhone} description={info.phone_number} />

frontend/src/lib/components/slideshow.svelte

@@ -181,7 +181,7 @@
 
 <div
   class="slideshow"
-  use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: "pan-y" }}
+  use:swipe={{ timeframe: 3000, minSwipeDistance: 10, touchAction: "pan-y" }}
   on:swipe={mobileSwipe}
   bind:this={slideshow}
 >

frontend/src/lib/css/sidebar-component.css

@@ -32,4 +32,6 @@
     font-weight: 500;
     font-size: 1.2rem;
     margin-bottom: 0.25rem;
+    display: block;
+    text-decoration: none;
 }