From 2d6517db95a20b00e8240aac3f7631db041f99d6 Mon Sep 17 00:00:00 2001
From: Max Value <greenwoodw50@gmail.com>
Date: Tue, 24 Mar 2026 12:29:17 +0000
Subject: [PATCH] Added blur on focus mode

---
 script.js | 25 +++++++++++++++++++------
 style.css |  9 ++++++---
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/script.js b/script.js
index 6db60fa..61a3267 100644
--- a/script.js
+++ b/script.js
@@ -43,7 +43,20 @@ function setup () {
 	main.parentNode.appendChild(dim);
 
 	close.addEventListener("click", (e) => {
-		dim.style.opacity = 0;
+		dim.style.backgroundColor = "rgba(51,51,51,0)";
+		dim.style.backdropFilter = "blur(0px)";
+		dim.style.pointerEvents = "none";
+		close.style.pointerEvents = "none";
+		try {
+			let copy = document.getElementById("enlargeCopy");
+			copy.style.opacity = 0;
+			setTimeout(function () { copy.remove() }, 500);
+		} catch {}
+	});
+
+	dim.addEventListener("click", (e) => {
+		dim.style.backgroundColor = "rgba(51,51,51,0)";
+		dim.style.backdropFilter = "blur(0px)";
 		dim.style.pointerEvents = "none";
 		close.style.pointerEvents = "none";
 		try {
@@ -58,7 +71,8 @@ function setup () {
 	for (image of images) {
 		image.addEventListener("click", (e) => {
 			// dim the lights
-			dim.style.opacity = 0.7;
+			dim.style.backgroundColor = "rgba(51,51,51,0.7)";
+			dim.style.backdropFilter = "blur(2px)";
 			dim.style.pointerEvents = "auto";
 			close.style.pointerEvents = "auto";
 
@@ -145,16 +159,15 @@ function setup () {
 	<p>Requests implemented from emailed document:</p>
 	<ul>
 		<li>Changed Riders subheading</li>
+		<li>Added all specified pages</li>
+		<li>Removed phone no. from contact page</li>
 	</ul>
-	<!--
 	<p>Additional changes:</p>
 	<ul>
 		<li>Removed "Overview" page from the nav menu, now accessed by clicking your name as is common with many sites. Page is now effectively the homepage</li>
 		<li>Actual defocus on the background elements when in focus mode</li>
-
-		<li>Added education heading to CV, can remove if you want.</li>
+		<li>Added education and experiance headings to CV.. good/bad?</li>
 	</ul>
-	!-->
 </details>`;
 
 	main.parentNode.insertBefore(template.content.childNodes[0], main);
diff --git a/style.css b/style.css
index cd930bd..e14643a 100644
--- a/style.css
+++ b/style.css
@@ -226,9 +226,9 @@ blockquote {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background-color: var(--darkgray);
-	opacity: 0;
-	transition: opacity 0.5s;
+	background-color: rgba(51,51,51,0);
+	backdrop-filter: blur(0px);
+	transition: background-color 0.5s, backdrop-filter 0.5s;
 }
 #dim span {
 	position: absolute;
@@ -240,6 +240,9 @@ blockquote {
 	opacity: inherit;
 }
 #dim span:hover { color: lightgray; }
+#enlargeCopy {
+	pointer-events: none;
+}
 
 /* caption styling */
 .caption {
-- 
2.39.2