Added blur on focus mode

diff --git a/script.js b/script.js
index 6db60fa3974d6ac062ef80030801fa2de3ed06cb..61a32677dff0303e340503fa4ede398a111d46cc 100644 (file)
--- 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 cd930bdcd088b4c53539c9bc5bf408e2f5da7542..e14643a8fc1c0daad5ac628395042dd9acc0b6e6 100644 (file)
--- 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 {