Remove larger image view as it's broken on some browsers

themes/maik-blog/assets/js/image_enlargement.js

@@ -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)
-})

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 {

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}} />
+  <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>

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 }}

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 }}>