1 files changed, 45 insertions, 5 deletions
diff --git a/layouts/partials/homepage/nav.html b/layouts/partials/homepage/nav.html
index 69e9e65..829323e 100644
--- a/layouts/partials/homepage/nav.html
+++ b/layouts/partials/homepage/nav.html
@@ -1,8 +1,3 @@
-{{- $file := "me.png" }}
-{{- $path := printf "content_images/%s" $file}}
-{{- $img := resources.Get $path }}
-{{- $img1x := $img.Resize "150x webp" }}
-{{- $img2x := $img.Resize "300x webp" }} <!--  -->
 
 <section style="display: flow-root">
   <h2>About</h2>
@@ -14,9 +9,35 @@
   <a href="/bsd"/>BSD</a> and <a href="/emasc">Emacs</a> are quite self-explanatory.
   I take special fondness of <a href="/star-trek">Star Trek</a>  so it is a section of its own.
   I also have a dedicated <a href="/blog">blog</a>, but this site is not a blog.
+
+{{- $file := "me.png" }}
+{{- $path := printf "content_images/%s" $file}}
+{{- $img := resources.Get $path }}
+{{- $img1x := $img.Resize "150x webp" }}
+{{- $img2x := $img.Resize "300x webp" }} 
+
   <img
     alt="Michal"
     style="float: right; max-width: 20%;"
+    id="me-normal"
+    src="{{ $img1x.Permalink }}" 
+    srcset="
+            {{ $img1x.Permalink }} 1x,
+            {{ $img2x.Permalink }} 2x
+            "
+    width="{{ $img1x.Width }}" 
+    height="{{ $img1x.Height }}"
+    >
+
+{{- $file := "me-grim.png" }}
+{{- $path := printf "content_images/%s" $file}}
+{{- $img := resources.Get $path }}
+{{- $img1x := $img.Resize "150x webp" }}
+{{- $img2x := $img.Resize "300x webp" }} 
+  <img
+    alt="Grimacing michal"
+    style="float: right; max-width: 20%; display: none"
+    id="me-grim"
     src="{{ $img1x.Permalink }}" 
     srcset="
             {{ $img1x.Permalink }} 1x,
@@ -25,6 +46,25 @@
     width="{{ $img1x.Width }}" 
     height="{{ $img1x.Height }}"
     >
+  
   {{ partial "menu.html" (dict "menuID" "main-nav" "page" .) }}
+
+  <script>
+    var kofiLink = document.getElementById('ko-fi');
+    var meNormal = document.getElementById('me-normal');
+    var meGrim = document.getElementById('me-grim');
+
+    kofiLink.addEventListener( 'mouseover', function() {
+        meNormal.style.display="none"
+        meGrim.style.display="inline"
+    });
+
+    kofiLink.addEventListener( 'mouseout', function() {
+        meNormal.style.display="inline"
+        meGrim.style.display="none"
+    });
+    
+  </script>
+
 </section>