[presentation] Fixed clicked image alignment and scaling

3 files changed, 12 insertions, 5 deletions

diff --git a/src/presentation.css b/src/presentation.css
index 0f6d287..19433e8 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -1,4 +1,4 @@
-/* This is done so that .slide and .absolute-slide are easily findable in DOM CSS representation. */
+/* These styles are located here for easy retrieval in JS */
 
 .slide {
     box-sizing: border-box;
@@ -17,6 +17,11 @@
     transform: translate(-50%, -50%);
     visibility: visible;
   }
+  .absolute-slide .clicked-image {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
 
 /* Stylesheet override */
 
diff --git a/src/regarding-js.md b/src/regarding-js.md
index f36b532..af40a69 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -15,7 +15,7 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |[js-styling-preload.js](/scripts/js-styling-preload.js)|Show hidden elements (used solely by scripts) as soon as possible|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/js-styling-preload.js)|81B|3|
 |[page-width.js](/scripts/page-width.js)|Change whether text covers the whole width of the page or only the middle (applicable to wide screens)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/page-width.js)|597B|20|
 |[expand-navbar.js](/scripts/expand-navbar.js)|Button to shrink and expand the sidebar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/expand-navbar.js)|734B|20|
-|[presentation.js](/scripts/presentation.js)|Adds presentation styles and is used for presentation navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js)|3.7KB|137|
+|[presentation.js](/scripts/presentation.js)|Adds presentation styles and is used for presentation navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js)|3.9KB|139|
 
 ## Data in browser storage
 
diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 930c7b0..df80183 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -86,9 +86,11 @@ presentBtn.addEventListener('click', function() {
 });
 
 function fixAbsoluteSlideScale() {
-	var tr = 'translate(-50%, -50%) scale(' + Math.min(window.innerHeight / slides[0].offsetHeight, window.innerWidth / slides[0].offsetWidth) + ')' 
-	// Update transform
-	document.styleSheets.item(3).cssRules[1].style.transform = tr;
+	var scale = Math.min(window.innerHeight / slides[0].offsetHeight, window.innerWidth / slides[0].offsetWidth); 
+	// Update .absolute-slide
+	document.styleSheets.item(3).cssRules[1].style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
+	// Update .clicked-image
+	document.styleSheets.item(3).cssRules[2].style.transform = 'translate(-50%, -50%) scale(' + (1/scale) + ')';
 }
 window.addEventListener('resize', fixAbsoluteSlideScale);