Update figure fullscreen view

DeclanChidlow · Jun 28, 2024 · 1d20ac1 · 1d20ac1
1 parent bb12148
commit 1d20ac1
Show file tree

Hide file tree

Showing 19 changed files with 37 additions and 35 deletions.
diff --git 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
@@ -21,28 +21,27 @@ 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;
 
 	#fullscreenImg {
 		width: 100%;
 		max-width: 70rem;
+		margin: auto;
 	}
 
 	#caption,
 	#altText {
 		text-align: center;
+		margin: 0.8rem;
 	}
 
 	#altText::before {
@@ -51,16 +50,17 @@ figcaption {
 
 	#close {
 		position: absolute;
-		top: 1rem;
-		right: 1rem;
+		top: 0;
+		right: 0;
+		margin: 0.8rem;
 		cursor: pointer;
 		font-size: 2rem;
 	}
 }
 
 @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
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>A Year With The Framework Laptop 13 | Vale.Rocks</title>
     <meta property="og:title" content="A Year With The Framework Laptop 13"/>
     <meta name="description" content="My review of the Framework Laptop 13. I cover the assembly, setup, value, build, support, community, and much more." />

diff --git a/docs/posts/Cybersecurity-Superstition.html b/docs/posts/Cybersecurity-Superstition.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Cybersecurity Superstition | Vale.Rocks</title>
     <meta property="og:title" content="Cybersecurity Superstition"/>
     <meta name="description" content="A look into some cybersecurity myths and misinformation. Explore the best practices regarding passwords, multifactor authentication, social engineering tactics, antiviruses, and much more." />

diff --git a/docs/posts/Everything-Is-Chrome.html b/docs/posts/Everything-Is-Chrome.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Everything Is Chrome | Vale.Rocks</title>
     <meta property="og:title" content="Everything Is Chrome"/>
     <meta name="description" content="My look into the overaching dominance of Google Chrome and it's overwhelmingly negative impact on the web as we know it." />

diff --git a/docs/posts/Halo-My-Thoughts.html b/docs/posts/Halo-My-Thoughts.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Halo: My Thoughts | Vale.Rocks</title>
     <meta property="og:title" content="Halo: My Thoughts"/>
     <meta name="description" content="Explore my journey through the Halo series, from the iconic Combat Evolved to the latest release, Infinite. Discover my thoughts, experiences, and insights into each game's virtues." />

diff --git a/docs/posts/I-Got-A-Flipper-Zero.html b/docs/posts/I-Got-A-Flipper-Zero.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>I Got A Flipper Zero | Vale.Rocks</title>
     <meta property="og:title" content="I Got A Flipper Zero"/>
     <meta name="description" content="My review of the Flipper Zero and the things I've done with it. Encompassing everything from the initial purchase to setup and usage, as well as the community and some cool projects." />

diff --git a/docs/posts/I-Hate-My-Nokia.html b/docs/posts/I-Hate-My-Nokia.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>I Hate My Nokia | Vale.Rocks</title>
     <meta property="og:title" content="I Hate My Nokia"/>
     <meta name="description" content="My review of my Nokia G22. A phone touted as being easily repairable that doesn't quite live up to the standards it sets for itself." />

diff --git 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 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>JPEG XL And Google's War Against It | Vale.Rocks</title>
     <meta property="og:title" content="JPEG XL And Google's War Against It"/>
     <meta name="description" content="Starting with an overview of existing image formats, including JPEG, PNG, and GIF, a look into the very promising JPEG XL and why it hasn't seen the adoption it deserves as an innovative new file format in the web landscape." />

diff --git a/docs/posts/LibreOffice-Setup.html b/docs/posts/LibreOffice-Setup.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>The Ultimate LibreOffice Setup | Vale.Rocks</title>
     <meta property="og:title" content="The Ultimate LibreOffice Setup"/>
     <meta name="description" content="My comprehensive tutorial aimed at optimizing LibreOffice to match the functionality of Microsoft Office. Elevate your document editing experience with tips, tools, and enhancements for seamless and efficient productivity." />

diff --git a/docs/posts/Making-Windows-Usable.html b/docs/posts/Making-Windows-Usable.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Making Windows "Usable" | Vale.Rocks</title>
     <meta property="og:title" content='Making Windows "Usable"' />
     <meta name="description" content="My comprehensive tutorial dedicated to optimising and customising Windows 11 for a somewhat usable user experience. I detail beneficial programs, tips, and essential tweaks to setup Windows 11 as a more or less servicable computer environment, somewhat tailored to your preferences." />

diff --git a/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html b/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Minecraft, Nostalgia, and Growing Up | Vale.Rocks</title>
     <meta property="og:title" content="Minecraft, Nostalgia, and Growing Up"/>
     <meta name="description" content="A look back on Minecraft, its editions, its culture, and how it shaped me as I turn 18 and transition into adulthood." />

diff --git a/docs/posts/My-Code-Formatting-Guidelines.html b/docs/posts/My-Code-Formatting-Guidelines.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>My Code Formatting Guidelines | Vale.Rocks</title>
     <meta property="og:title" content="My Code Formatting Guidelines"/>
     <meta name="description" content="Code formatting, how I go about it, and why I choose to do it the way I do. This article covers indentation, string formatting, my take on the classic tabs vs spaces debate, and much more." />

diff --git a/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html b/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Prematurely Pulling The Plug On 3G | Vale.Rocks</title>
     <meta property="og:title" content="Prematurely Pulling The Plug On 3G"/>
     <meta name="description" content="Critical thoughts on the intention of Australian telcos to sunset the 3G network and the major repurcussions on coverage, safety, and much more that will come with it." />

diff --git a/docs/posts/School-Internet.html b/docs/posts/School-Internet.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Connecting to Australian Public School Internet | Vale.Rocks</title>
     <meta property="og:title" content="Connecting to Australian Public School Internet"/>
     <meta name="description" content="The Education Department of Australia does some silly stuff with their network quite frequently. This tutorial shows you how to get up and running in no time at all." />

diff --git a/docs/posts/Welcome.html b/docs/posts/Welcome.html
@@ -63,7 +63,7 @@
 
     <style>:root{--header_background: var(--magenta)}</style>
 
-    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script><head>
+    <div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script><head>
     <title>Welcome | Vale.Rocks</title>
     <meta property="og:title" content="Welcome"/>
     <meta name="description" content="A brief welcome to my website on the world wide web and what it's about." />

diff --git 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
@@ -21,28 +21,27 @@ 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;
 
 	#fullscreenImg {
 		width: 100%;
 		max-width: 70rem;
+		margin: auto;
 	}
 
 	#caption,
 	#altText {
 		text-align: center;
+		margin: 0.8rem;
 	}
 
 	#altText::before {
@@ -51,16 +50,17 @@ figcaption {
 
 	#close {
 		position: absolute;
-		top: 1rem;
-		right: 1rem;
+		top: 0;
+		right: 0;
+		margin: 0.8rem;
 		cursor: pointer;
 		font-size: 2rem;
 	}
 }
 
 @media (max-width: 700px) {
 	#fullscreenModal {
-		padding: 0.8rem;
+		padding: 3rem 0.8rem;
 	}
 }
 

diff --git a/posts/feed/conf.toml b/posts/feed/conf.toml
@@ -25,5 +25,5 @@ text = "<style>:root{--header_background: var(--magenta)}</style>"
 style = "html"
 
 [[main.block]]
-text = "<div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><div id='caption'></div><div id='altText'></div></div><script src='/scripts/figureview.js'></script>"
+text = "<div id='fullscreenModal'><span id='close' class='material-icons'>close</span><img id='fullscreenImg'><p id='caption'></p><hr/><p id='altText'></p></div><script src='/scripts/figureview.js'></script>"
 style = "html"