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 {