diff options
| -rw-r--r-- | assets/content_images/me-pain.png | bin | 0 -> 4341 bytes | |||
| -rw-r--r-- | layouts/partials/homepage/nav.html | 47 | ||||
| -rw-r--r-- | resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_150x0_resize_q75_h2_box_3.webp | bin | 0 -> 2094 bytes | |||
| -rw-r--r-- | resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_300x0_resize_q75_h2_box_3.webp | bin | 0 -> 3742 bytes |
4 files changed, 41 insertions, 6 deletions
diff --git a/assets/content_images/me-pain.png b/assets/content_images/me-pain.png Binary files differnew file mode 100644 index 0000000..bd195ce --- /dev/null +++ b/assets/content_images/me-pain.png 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> diff --git a/resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_150x0_resize_q75_h2_box_3.webp b/resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_150x0_resize_q75_h2_box_3.webp Binary files differnew file mode 100644 index 0000000..7d4e8fd --- /dev/null +++ b/resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_150x0_resize_q75_h2_box_3.webp diff --git a/resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_300x0_resize_q75_h2_box_3.webp b/resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_300x0_resize_q75_h2_box_3.webp Binary files differnew file mode 100644 index 0000000..15ac219 --- /dev/null +++ b/resources/_gen/images/content_images/me-pain_hu0353ce27a4a45c9bd13a2f4324fec113_4341_300x0_resize_q75_h2_box_3.webp |
