From c306300f2c2de48c3b78d7804881dc6346eabc1a Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Wed, 10 Nov 2021 23:23:43 +0100
Subject: [PATCH] Remove larger image view as it's broken on some browsers

---
 .../maik-blog/assets/js/image_enlargement.js  | 20 ------
 themes/maik-blog/assets/scss/_main.scss       | 67 -------------------
 themes/maik-blog/layouts/partials/image.html  | 37 ++--------
 .../layouts/partials/javascript.html          |  3 +-
 .../maik-blog/layouts/shortcodes/figure.html  |  2 +-
 5 files changed, 8 insertions(+), 121 deletions(-)
 delete mode 100644 themes/maik-blog/assets/js/image_enlargement.js

diff --git a/themes/maik-blog/assets/js/image_enlargement.js b/themes/maik-blog/assets/js/image_enlargement.js
deleted file mode 100644
index 4374551..0000000
--- a/themes/maik-blog/assets/js/image_enlargement.js
+++ /dev/null
@@ -1,20 +0,0 @@
-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 9b88df0..cc38715 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -209,73 +209,6 @@ 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 61ef90c..34ac2a4 100644
--- a/themes/maik-blog/layouts/partials/image.html
+++ b/themes/maik-blog/layouts/partials/image.html
@@ -1,34 +1,9 @@
 {{- $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) }}
+{{- $png := $orignal.Resize (printf "%dx%d png q75" $orignal.Width $orignal.Height) }}
+{{- $webp := $orignal.Resize (printf "%dx%d webp q75" $orignal.Width $orignal.Height) }}
 <picture>
   <source type="image/webp" srcset="{{ $webp.Permalink }}">
-  <img
-    src="{{ $png.Permalink }}"
-    alt="{{ .alt | default "" }}"
-    title="{{ .alt }}"
-    width="{{ .width | default $png.Width }}"
-    height="{{ .height | default $png.Height }}"
-    {{- if .class}}class="{{ .class }}" {{end}}
-    {{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
-</picture>
-
-<div class="enlarged_image">
-  <picture>
-    <source type="image/webp" srcset="{{ $webpFull.Permalink }}">
-    <img
-      src="{{ $pngFull.Permalink }}"
-      alt="{{ .alt | default "" }}"
-      loading="lazy"
-      title="{{ .alt }}"
-      width="{{ .width | default $pngFull.Width }}"
-      height="{{ .height | default $pngFull.Height }}"
-      {{- if .class}}class="{{ .class }}" {{end}}
-      {{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
-  </picture>
-  {{- with .alt }}
-  <p class="caption">{{ . }}</p>
-  {{- end }}
-</div>
+  <img src="{{ $png.Permalink }}" alt="{{ .alt | default "" }}" title="{{ .alt }}"
+    width="{{ .width | default $png.Width }}" height="{{ .height | default $png.Height }}"
+    {{- if .class}}class="{{ .class }}" {{end}} {{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
+</picture>
\ No newline at end of file
diff --git a/themes/maik-blog/layouts/partials/javascript.html b/themes/maik-blog/layouts/partials/javascript.html
index d98de2b..f962714 100644
--- a/themes/maik-blog/layouts/partials/javascript.html
+++ b/themes/maik-blog/layouts/partials/javascript.html
@@ -2,8 +2,7 @@
 {{- $menu := resources.Get "js/menu.js" }}
 {{- $theme := resources.Get "js/theme.js" }}
 {{- $nav := resources.Get "js/nav.js" }}
-{{- $image_enlargement := resources.Get "js/image_enlargement.js" }}
-{{- $secureJS := slice $main $menu $theme $nav $image_enlargement | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+{{- $secureJS := slice $main $menu $theme $nav | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 
 {{- if .Site.GoogleAnalytics }}
diff --git a/themes/maik-blog/layouts/shortcodes/figure.html b/themes/maik-blog/layouts/shortcodes/figure.html
index 7b1aeb3..96e8a02 100644
--- a/themes/maik-blog/layouts/shortcodes/figure.html
+++ b/themes/maik-blog/layouts/shortcodes/figure.html
@@ -1,4 +1,4 @@
-<figure class="enlargable {{- with .Get "class" }} {{ . }}{{ end }}" {{ with .Get "id" }} id="{{ . }}" {{ end }}>
+<figure {{- with .Get "class" }} class="{{ . }}" {{ end }}{{ with .Get "id" }} id="{{ . }}" {{ end }}>
   {{- if .Get "link" -}}
   <a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}"
     {{ end }}>