From c4785c3f7e0eda35cc63cbba1838c8b3e8e29427 Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Thu, 21 Nov 2024 17:16:03 +0100
Subject: [PATCH] Add functionality to enlarge figure by clicking on it

---
 themes/maik-blog/assets/js/list_columns.js | 26 -----------------
 themes/maik-blog/assets/js/main.js         | 21 ++++++++++++-
 themes/maik-blog/assets/scss/_main.scss    | 34 +++++++++++++++++++++-
 3 files changed, 53 insertions(+), 28 deletions(-)
 delete mode 100644 themes/maik-blog/assets/js/list_columns.js

diff --git a/themes/maik-blog/assets/js/list_columns.js b/themes/maik-blog/assets/js/list_columns.js
deleted file mode 100644
index 19958c3..0000000
--- a/themes/maik-blog/assets/js/list_columns.js
+++ /dev/null
@@ -1,26 +0,0 @@
-function resizeItem(masonry, item){
-  let rowHeight = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-auto-rows'));
-  let rowGap = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-row-gap'));
-  let rowSpan = Math.ceil((item.querySelector('.masonry-item-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
-  item.style.gridRowEnd = "span "+rowSpan;
-}
-
-function resizeAll(){
-  let masonry = document.getElementsByClassName("masonry")[0];
-
-  if (!masonry) return;
-
-  masonry.style.gridAutoRows = "20px"
-  masonry.style.marginBottom = "80px"
-  let allItems = masonry.getElementsByClassName("masonry-item");
-
-  for (const item of allItems) {
-    resizeItem(masonry, item)
-  }
-}
-
-window.addEventListener("load", () => {
-  resizeAll()
-
-  window.addEventListener("resize", resizeAll);
-})
diff --git a/themes/maik-blog/assets/js/main.js b/themes/maik-blog/assets/js/main.js
index f4a810a..b5b5068 100644
--- a/themes/maik-blog/assets/js/main.js
+++ b/themes/maik-blog/assets/js/main.js
@@ -1 +1,20 @@
-// Some code could be here ...
+window.addEventListener("load", () => {
+    for (let figure of document.getElementsByTagName("figure")) {
+        if (figure.classList.contains("post-cover"))
+            continue
+
+        figure.addEventListener("click", () => {
+            figure.classList.toggle("floated-focus")
+        })
+    }
+
+    document.addEventListener('keydown', (e) => {
+        if (e.keyCode !== 27)
+            return
+
+        for (let figure of document.getElementsByClassName("floated-focus")) {
+            figure.classList.remove("floated-focus")
+        }
+
+    })
+})
diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss
index 9e712d5..7529f57 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -184,7 +184,7 @@ figure {
   figcaption {
     font-size: 1.125rem;
     line-height: 1.3;
-    margin: 1.33em 0;
+    margin-top: 0.4em;
     font-weight: bold;
     opacity: 0.8;
 
@@ -204,11 +204,43 @@ figure {
   &.small {
     max-width: 300px;
     width: 90%;
+    margin: 5px 0;
   }
 
   &.inline {
     display: inline-table;
   }
+
+  &.floated-focus {
+    display: flex;
+    position:fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    max-width: unset;
+    height: 100vh;
+    padding: 3rem;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: #212020ec;
+    z-index: 100;
+
+    figcaption {
+      color: #ddd3c6;
+      font-size: 1.5rem;
+    }
+
+    &:after {
+      content: "Close";
+      margin-top: 1rem;
+      text-decoration: underline;
+      cursor: pointer;
+      display: block;
+      color: #999288;
+    }
+  }
 }
 
 code {