diff --git a/config/global/scripts/figureview.js b/config/global/scripts/figureview.js index 840f57f..0544cf7 100644 --- a/config/global/scripts/figureview.js +++ b/config/global/scripts/figureview.js @@ -7,6 +7,7 @@ document.addEventListener("DOMContentLoaded", function () { closeButton = document.getElementById("close"); Array.from(images).forEach((img) => { + img.style.cursor = "zoom-in"; img.addEventListener("click", () => openFullscreen(img)); }); @@ -19,7 +20,7 @@ document.addEventListener("DOMContentLoaded", function () { }); function openFullscreen(imgElement) { - modal.style.display = "flex"; + modal.style.display = "block"; modalImg.src = imgElement.currentSrc || imgElement.src; altText.textContent = imgElement.alt; diff --git a/config/global/styles/components/figures.css b/config/global/styles/components/figures.css index 9ebad2a..e54958b 100644 --- a/config/global/styles/components/figures.css +++ b/config/global/styles/components/figures.css @@ -21,16 +21,13 @@ figcaption { /* Fullscreen modal styling */ #fullscreenModal { - display: none; - flex-direction: column; - justify-content: space-around; - align-items: center; + display: none; /* Set to block with JS */ position: fixed; - left: 0; top: 0; + left: 0; width: 100%; height: 100%; - padding: 5rem; + padding: 3rem; overflow: auto; background-color: light-dark(rgba(255, 234, 208, 0.9), rgba(0, 0, 0, 0.9)); z-index: 1001; @@ -38,11 +35,13 @@ figcaption { #fullscreenImg { width: 100%; max-width: 70rem; + margin: auto; } #caption, #altText { text-align: center; + margin: 0.8rem; } #altText::before { @@ -51,8 +50,9 @@ figcaption { #close { position: absolute; - top: 1rem; - right: 1rem; + top: 0; + right: 0; + margin: 0.8rem; cursor: pointer; font-size: 2rem; } @@ -60,7 +60,7 @@ figcaption { @media (max-width: 700px) { #fullscreenModal { - padding: 0.8rem; + padding: 3rem 0.8rem; } } diff --git a/docs/posts/A-Year-With-The-Framework-Laptop-13.html b/docs/posts/A-Year-With-The-Framework-Laptop-13.html index 45dedf7..714716b 100644 --- a/docs/posts/A-Year-With-The-Framework-Laptop-13.html +++ b/docs/posts/A-Year-With-The-Framework-Laptop-13.html @@ -63,7 +63,7 @@ -
close
+
close

A Year With The Framework Laptop 13 | Vale.Rocks diff --git a/docs/posts/Cybersecurity-Superstition.html b/docs/posts/Cybersecurity-Superstition.html index 9395100..a80aadc 100644 --- a/docs/posts/Cybersecurity-Superstition.html +++ b/docs/posts/Cybersecurity-Superstition.html @@ -63,7 +63,7 @@ -
close
+
close

Cybersecurity Superstition | Vale.Rocks diff --git a/docs/posts/Everything-Is-Chrome.html b/docs/posts/Everything-Is-Chrome.html index 5541061..45d0037 100644 --- a/docs/posts/Everything-Is-Chrome.html +++ b/docs/posts/Everything-Is-Chrome.html @@ -63,7 +63,7 @@ -
close
+
close

Everything Is Chrome | Vale.Rocks diff --git a/docs/posts/Halo-My-Thoughts.html b/docs/posts/Halo-My-Thoughts.html index e29bcf6..1f9e64c 100644 --- a/docs/posts/Halo-My-Thoughts.html +++ b/docs/posts/Halo-My-Thoughts.html @@ -63,7 +63,7 @@ -
close
+
close

Halo: My Thoughts | Vale.Rocks diff --git a/docs/posts/I-Got-A-Flipper-Zero.html b/docs/posts/I-Got-A-Flipper-Zero.html index b00b617..f681fa7 100644 --- a/docs/posts/I-Got-A-Flipper-Zero.html +++ b/docs/posts/I-Got-A-Flipper-Zero.html @@ -63,7 +63,7 @@ -
close
+
close

I Got A Flipper Zero | Vale.Rocks diff --git a/docs/posts/I-Hate-My-Nokia.html b/docs/posts/I-Hate-My-Nokia.html index e7a8c76..cc889d1 100644 --- a/docs/posts/I-Hate-My-Nokia.html +++ b/docs/posts/I-Hate-My-Nokia.html @@ -63,7 +63,7 @@ -
close
+
close

I Hate My Nokia | Vale.Rocks diff --git a/docs/posts/JPEG-XL-And-Googles-War-Against-It.html b/docs/posts/JPEG-XL-And-Googles-War-Against-It.html index 0c655e6..46fdfa4 100644 --- a/docs/posts/JPEG-XL-And-Googles-War-Against-It.html +++ b/docs/posts/JPEG-XL-And-Googles-War-Against-It.html @@ -63,7 +63,7 @@ -
close
+
close

JPEG XL And Google's War Against It | Vale.Rocks diff --git a/docs/posts/LibreOffice-Setup.html b/docs/posts/LibreOffice-Setup.html index 7511dbb..384162a 100644 --- a/docs/posts/LibreOffice-Setup.html +++ b/docs/posts/LibreOffice-Setup.html @@ -63,7 +63,7 @@ -
close
+
close

The Ultimate LibreOffice Setup | Vale.Rocks diff --git a/docs/posts/Making-Windows-Usable.html b/docs/posts/Making-Windows-Usable.html index 1bffb57..36e9df3 100644 --- a/docs/posts/Making-Windows-Usable.html +++ b/docs/posts/Making-Windows-Usable.html @@ -63,7 +63,7 @@ -
close
+
close

Making Windows "Usable" | Vale.Rocks diff --git a/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html b/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html index f7eb96a..db35b98 100644 --- a/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html +++ b/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html @@ -63,7 +63,7 @@ -
close
+
close

Minecraft, Nostalgia, and Growing Up | Vale.Rocks diff --git a/docs/posts/My-Code-Formatting-Guidelines.html b/docs/posts/My-Code-Formatting-Guidelines.html index 4d28edf..6e76453 100644 --- a/docs/posts/My-Code-Formatting-Guidelines.html +++ b/docs/posts/My-Code-Formatting-Guidelines.html @@ -63,7 +63,7 @@ -
close
+
close

My Code Formatting Guidelines | Vale.Rocks diff --git a/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html b/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html index a9fb022..be5d120 100644 --- a/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html +++ b/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html @@ -63,7 +63,7 @@ -
close
+
close

Prematurely Pulling The Plug On 3G | Vale.Rocks diff --git a/docs/posts/School-Internet.html b/docs/posts/School-Internet.html index c967305..d17bc36 100644 --- a/docs/posts/School-Internet.html +++ b/docs/posts/School-Internet.html @@ -63,7 +63,7 @@ -
close
+
close

Connecting to Australian Public School Internet | Vale.Rocks diff --git a/docs/posts/Welcome.html b/docs/posts/Welcome.html index 4ac0352..fd11ced 100644 --- a/docs/posts/Welcome.html +++ b/docs/posts/Welcome.html @@ -63,7 +63,7 @@ -
close
+
close

Welcome | Vale.Rocks diff --git a/docs/scripts/figureview.js b/docs/scripts/figureview.js index 840f57f..0544cf7 100644 --- a/docs/scripts/figureview.js +++ b/docs/scripts/figureview.js @@ -7,6 +7,7 @@ document.addEventListener("DOMContentLoaded", function () { closeButton = document.getElementById("close"); Array.from(images).forEach((img) => { + img.style.cursor = "zoom-in"; img.addEventListener("click", () => openFullscreen(img)); }); @@ -19,7 +20,7 @@ document.addEventListener("DOMContentLoaded", function () { }); function openFullscreen(imgElement) { - modal.style.display = "flex"; + modal.style.display = "block"; modalImg.src = imgElement.currentSrc || imgElement.src; altText.textContent = imgElement.alt; diff --git a/docs/styles/components/figures.css b/docs/styles/components/figures.css index 9ebad2a..e54958b 100644 --- a/docs/styles/components/figures.css +++ b/docs/styles/components/figures.css @@ -21,16 +21,13 @@ figcaption { /* Fullscreen modal styling */ #fullscreenModal { - display: none; - flex-direction: column; - justify-content: space-around; - align-items: center; + display: none; /* Set to block with JS */ position: fixed; - left: 0; top: 0; + left: 0; width: 100%; height: 100%; - padding: 5rem; + padding: 3rem; overflow: auto; background-color: light-dark(rgba(255, 234, 208, 0.9), rgba(0, 0, 0, 0.9)); z-index: 1001; @@ -38,11 +35,13 @@ figcaption { #fullscreenImg { width: 100%; max-width: 70rem; + margin: auto; } #caption, #altText { text-align: center; + margin: 0.8rem; } #altText::before { @@ -51,8 +50,9 @@ figcaption { #close { position: absolute; - top: 1rem; - right: 1rem; + top: 0; + right: 0; + margin: 0.8rem; cursor: pointer; font-size: 2rem; } @@ -60,7 +60,7 @@ figcaption { @media (max-width: 700px) { #fullscreenModal { - padding: 0.8rem; + padding: 3rem 0.8rem; } } diff --git a/posts/feed/conf.toml b/posts/feed/conf.toml index a847639..f663572 100755 --- a/posts/feed/conf.toml +++ b/posts/feed/conf.toml @@ -25,5 +25,5 @@ text = "" style = "html" [[main.block]] -text = "
close
" +text = "
close

" style = "html"