feat: gungame

1 files changed, 41 insertions, 6 deletions

diff --git a/layouts/partials/homepage/nav.html b/layouts/partials/homepage/nav.html
index 829323e..b0e500f 100644
--- a/layouts/partials/homepage/nav.html
+++ b/layouts/partials/homepage/nav.html
@@ -18,7 +18,9 @@
 
   <img
     alt="Michal"
-    style="float: right; max-width: 20%;"
+    style="float: right;
+           max-width: 20%;
+           cursor: crosshair"
     id="me-normal"
     src="{{ $img1x.Permalink }}" 
     srcset="
@@ -46,6 +48,24 @@
     width="{{ $img1x.Width }}" 
     height="{{ $img1x.Height }}"
     >
+
+{{- $file := "me-pain.png" }}
+{{- $path := printf "content_images/%s" $file}}
+{{- $img := resources.Get $path }}
+{{- $img1x := $img.Resize "150x webp" }}
+{{- $img2x := $img.Resize "300x webp" }} 
+  <img
+    alt="Michal full of pain"
+    style="float: right; max-width: 20%; display: none"
+    id="me-pain"
+    src="{{ $img1x.Permalink }}" 
+    srcset="
+            {{ $img1x.Permalink }} 1x,
+            {{ $img2x.Permalink }} 2x
+            "
+    width="{{ $img1x.Width }}" 
+    height="{{ $img1x.Height }}"  
+    >
   
   {{ partial "menu.html" (dict "menuID" "main-nav" "page" .) }}
 
@@ -53,15 +73,30 @@
     var kofiLink = document.getElementById('ko-fi');
     var meNormal = document.getElementById('me-normal');
     var meGrim = document.getElementById('me-grim');
+    var mePain = document.getElementById('me-pain');
+
+    var out = false;
+
+    meNormal.addEventListener( 'click', function() {
+        meNormal.style.display="none";
+        mePain.style.display="inline";
+
+        setTimeout(() =>  {
+            meNormal.style.display="inline";
+            mePain.style.display="none";
+        }, 300)
+    })
 
-    kofiLink.addEventListener( 'mouseover', function() {
-        meNormal.style.display="none"
+    kofiLink.addEventListener( 'mouseenter', function() {
+        meNormal.style.display="none";
         meGrim.style.display="inline"
     });
 
-    kofiLink.addEventListener( 'mouseout', function() {
-        meNormal.style.display="inline"
-        meGrim.style.display="none"
+    kofiLink.addEventListener( 'mouseleave', function() {
+        setTimeout(() =>  {
+        meNormal.style.display="inline";
+        meGrim.style.display="none";
+        }, 700)
     });
     
   </script>