From 34acfec2817a0d6756b31b7aaa140f144b802066 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 19 Nov 2022 16:54:12 +0100
Subject: [PATCH] more animations

---
 src/lib/components/heroPost.svelte |  9 +----
 src/lib/components/post.svelte     |  3 +-
 src/lib/components/project.svelte  | 54 +++++++++++++++++++-----------
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/heroPost.svelte b/src/lib/components/heroPost.svelte
index 2821030..59b1830 100644
--- a/src/lib/components/heroPost.svelte
+++ b/src/lib/components/heroPost.svelte
@@ -15,7 +15,7 @@
     $: dt = DateTime.fromISO(date);
 </script>
 
-<a href={path} class="post">
+<a href={path} class="post select-none cursor-pointer hover:no-underline transform transition duration-300 active:scale-95 block">
     {#if bigThumbnail}
         <img src={bigThumbnail} styles="width: 800px; height: 400px;" alt="Thumbnail" class="thumbnail" draggable={false}>
     {/if}
@@ -38,13 +38,6 @@
 </a>
 
 <style>
-    .post {
-        cursor: pointer;
-        user-select: none;
-    }
-    a.post:hover {
-        text-decoration: none;
-    }
     .thumbnail {
         border-radius: 5px;
         width: 100%;
diff --git a/src/lib/components/post.svelte b/src/lib/components/post.svelte
index 489e587..643267e 100644
--- a/src/lib/components/post.svelte
+++ b/src/lib/components/post.svelte
@@ -26,7 +26,7 @@
     $: dt = DateTime.fromISO(date);
 </script>
 
-<a href={path} class:dark={$darkmode} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
+<a href={path} class:dark={$darkmode} class="post transition duration-300 block transform active:scale-95" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
     {#if thumbnail}
         <img src={thumbnail} alt="Thumbnail" class="thumbnail" draggable={false}>
     {:else}
@@ -58,7 +58,6 @@
         text-decoration: none;
     }
     .post {
-        transition: filter .3s;
         cursor: pointer;
         user-select: none;
         width: 100%;
diff --git a/src/lib/components/project.svelte b/src/lib/components/project.svelte
index de52e3d..eb4cfa0 100644
--- a/src/lib/components/project.svelte
+++ b/src/lib/components/project.svelte
@@ -1,6 +1,6 @@
 <script>
     import { goatCounter } from "$lib/goatcounter";
-    import { goto } from '$app/navigation';
+    import { goto } from "$app/navigation";
     export var image; // "https://picsum.photos/725/350?random=" + Math.floor(Math.random() * 5000);
     export var link = "";
     export var grayscale = false;
@@ -9,28 +9,52 @@
     export var crossfadesend = null;
     export var crossfadereceive = null;
     export var crossfadekey = null;
-    export var target="_blank";
+    export var target = "_blank";
     export var width;
     export var height;
     export var name;
     function handle(e) {
-        if(!link) {
+        if (!link) {
             e.preventDefault();
             alert("No link available");
-        } else if(link.startsWith("/")) {
+        } else if (link.startsWith("/")) {
             e.preventDefault();
             goto(link);
         }
     }
 </script>
 
-<a href={link || "#"} {target} rel="noopener" data-goatcounter-click="project-{name}" class="full" on:click={handle} use:goatCounter>
+<a
+    href={link || "#"}
+    {target}
+    rel="noopener"
+    data-goatcounter-click="project-{name}"
+    class="w-full hover:no-underline block transition duration-300 active:scale-95 transform"
+    on:click={handle}
+    use:goatCounter
+>
     <div class="project">
         <div class="imgcon">
             {#if crossfadesend}
-                <img out:crossfadesend={{ key: crossfadekey }} in:crossfadereceive={{ key: crossfadekey }} src={image} alt={name} draggable={false} class:grayscale {width} {height}>
+                <img
+                    out:crossfadesend={{ key: crossfadekey }}
+                    in:crossfadereceive={{ key: crossfadekey }}
+                    src={image}
+                    alt={name}
+                    draggable={false}
+                    class:grayscale
+                    {width}
+                    {height}
+                />
             {:else}
-                <img src={image} alt={name} draggable={false} class:grayscale {width} {height}>
+                <img
+                    src={image}
+                    alt={name}
+                    draggable={false}
+                    class:grayscale
+                    {width}
+                    {height}
+                />
             {/if}
             {#if $$slots.desc}
                 <div class="desc" class:extradark>
@@ -42,24 +66,16 @@
         </div>
         <h3><slot /></h3>
         {#if clickable}
-            <div class="clickable">
-                Click to view details
-            </div>
+            <div class="clickable">Click to view details</div>
         {/if}
     </div>
 </a>
 
 <style>
-    a.full:hover {
-        text-decoration: none;
-    }
     .project {
         width: 100%;
         margin-bottom: 30px;
     }
-    a.full {
-        width: 100%;
-    }
     .imgcon {
         width: 100%;
         border-radius: 10px;
@@ -85,7 +101,7 @@
 		}
 	} */
     .desc.extradark {
-        background-color: rgba(0,0,0,0.4);
+        background-color: rgba(0, 0, 0, 0.4);
     }
     .desc .content {
         flex-grow: 1;
@@ -94,7 +110,7 @@
         width: 100%;
         height: auto;
         border-radius: 10px;
-        transition: filter .3s;
+        transition: filter 0.3s;
         filter: blur(0px) grayscale(0);
     }
     img.grayscale {
@@ -106,4 +122,4 @@
     .bottom {
         color: gray;
     }
-</style>
\ No newline at end of file
+</style>