diff --git a/assets/test.png b/assets/test.png deleted file mode 100644 index 295c0ec..0000000 Binary files a/assets/test.png and /dev/null differ diff --git a/themes/maik-blog/assets/js/image_enlargement.js b/themes/maik-blog/assets/js/image_enlargement.js new file mode 100644 index 0000000..4374551 --- /dev/null +++ b/themes/maik-blog/assets/js/image_enlargement.js @@ -0,0 +1,20 @@ +window.addEventListener("load", () => { + document.querySelectorAll("figure.enlargable").forEach(node => { + node.addEventListener("click", () => { + console.log("Hey"); + node.classList.toggle("enlarged") + }) + }) + + const keyDown = (e) => { + if (e.keyCode !== 27) { + return + } + + document.querySelectorAll("figure.enlarged").forEach(node => { + node.classList.remove("enlarged") + }) + } + + document.addEventListener('keydown', keyDown) +}) diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss index cc38715..9b88df0 100644 --- a/themes/maik-blog/assets/scss/_main.scss +++ b/themes/maik-blog/assets/scss/_main.scss @@ -209,6 +209,73 @@ figure { &.inline { display: inline-table; } + + &.enlargable { + cursor: pointer; + } + + .enlarged_image { + display: none; + } + + &.enlarged .enlarged_image { + cursor: initial; + position: fixed; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + left: 0; + top: 0; + min-width: 100vw; + max-width: 100vw; + width: 100vw; + min-height: 100vh; + max-height: 100vh; + height: 100vh; + margin: 0; + padding: 0; + z-index: 10000; + background: #2c2c2cdd; + + &::after { + content: "×"; + display: block; + height: 2rem; + width: 2rem; + line-height: 2rem; + text-align: center; + position: absolute; + top: 1rem; + right: 1rem; + color: $dark-color; + font-size: 3rem; + cursor: pointer; + } + + picture { + max-width: 80%; + width: 80%; + height: 80%; + object-fit: contain; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + + .caption { + background: #c2c2c2; + padding: 1rem 2rem; + border-radius: 8px; + } + } } code { diff --git a/themes/maik-blog/layouts/partials/image.html b/themes/maik-blog/layouts/partials/image.html index 402c3d9..61ef90c 100644 --- a/themes/maik-blog/layouts/partials/image.html +++ b/themes/maik-blog/layouts/partials/image.html @@ -1,5 +1,34 @@ -{{- $img := resources.Get .path }} -{{- $img = $img.Resize (printf "%dx%d webp" $img.Width $img.Height) }} - \ No newline at end of file +{{- $orignal := resources.Get .path }} +{{- $png := $orignal.Resize (printf "%dx%d png q50" $orignal.Width $orignal.Height) }} +{{- $webp := $orignal.Resize (printf "%dx%d webp q50" $orignal.Width $orignal.Height) }} +{{- $pngFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }} +{{- $webpFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }} + + +