Reponsive to mobile

diff --git a/index.html b/index.html
index 7fea3d8a9f1935e4f9ac6af9f8b7a54d0fd893ae..b5b5d2e4be3364f5eb3b0fba06edfd5378b5977a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -32,9 +32,7 @@
                                - Finish copy
                                - Spell-check
                                - Possibly the audio version?
                                - Finish copy
                                - Spell-check
                                - Possibly the audio version?

-                               - Accessability
-                                       - alts for all images
-                               - Mobile
+                               - alts for all images

                                - make clicking anywhere on the gray minimise the image
                        !-->
 
                                - make clicking anywhere on the gray minimise the image
                        !-->
 

diff --git a/slideshow.js b/slideshow.js
index 61a8356db5ef9cd3aa5ae2b2a27c62864ba50c9c..9c466643a1e1a97a8173c821ce3d171088defa18 100644 (file)
--- a/slideshow.js
+++ b/slideshow.js
@@ -103,6 +103,17 @@ function setup () {
                        } catch {}
                });
 
                        } catch {}
                });
 

+               dim.addEventListener("click", (e) => {
+                       dim.style.opacity = 0;
+                       dim.style.pointerEvents = "none";
+                       close.style.pointerEvents = "none";
+                       try {
+                               let copy = document.getElementById("enlargeCopy");
+                               copy.style.opacity = 0;
+                               setTimeout(function () { copy.remove() }, 500);
+                       } catch {}
+               });
+

                // sets up the image enlarge
                const images = document.getElementsByTagName("img");
                for (image of images) {
                // sets up the image enlarge
                const images = document.getElementsByTagName("img");
                for (image of images) {


@@ -123,6 +134,7 @@ function setup () {
                                copy.style.left = `${rect.left}px`;
                                copy.style.width = `${rect.width}px`;
                                copy.style.height = `${rect.height}px`;
                                copy.style.left = `${rect.left}px`;
                                copy.style.width = `${rect.width}px`;
                                copy.style.height = `${rect.height}px`;

+                               copy.style.pointerEvents = "none";

 
                                copy.style.opacity = 1;
                                copy.style.transition = `
 
                                copy.style.opacity = 1;
                                copy.style.transition = `

diff --git a/style.css b/style.css
index a0ad53c87eff69b12922e5b43b573bf2d6260dab..5978b1af2dbd931b68c1afd85c913e2800036688 100644 (file)
--- a/style.css
+++ b/style.css
@@ -148,4 +148,26 @@ img::after {
 }
 #dim span:hover { color: lightgray; }
 
 }
 #dim span:hover { color: lightgray; }
 

+/* mobile view */
+@media screen and (orientation: portrait) {
+       main, footer {
+               width: 90%;
+               margin: auto;
+       }
+       .mediaside > * {
+               display: block !important;
+               width: 100% !important;
+               margin: 50px 0 50px 0 !important;
+               padding: 0 !important;
+       }
+       main p.left {
+               width: 100% !important;
+       }
+       main p.right {
+               width: 100% !important;
+       }
+       :root { font-size: 1.8em; }
+       p { text-align: left !important; }
+}
+