Changed sldie padding when on full size print. Made exit button clickable.

output/construction.html

@@ -33,7 +33,7 @@
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
                 <img class="slide" id="img-1" alt="" src="/images/Construction/Construction-1.jpg">
                 <img class="slide" id="img-2" alt="" src="/images/Construction/Construction-2.jpg">

output/courtyard.html

@@ -47,7 +47,7 @@ He can hear neighbors laughing out loud, as they always had in peaceful sunny sp
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
                 <img class="slide" id="img-1" alt="" src="/images/Courtyard/Courtyard-1.jpg">
                 <img class="slide" id="img-2" alt="" src="/images/Courtyard/Courtyard-2.jpg">

output/sunday.html

@@ -33,7 +33,7 @@
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
                 <img class="slide" id="img-1" alt="" src="/images/Sunday/Sunday-1.jpg">
                 <img class="slide" id="img-2" alt="" src="/images/Sunday/Sunday-2.jpg">

output/theme/css/main-v2.css

@@ -207,7 +207,7 @@ p a {
 #slide-container {
     display: none;
     width: 100%;
-    height: 300%;
+    min-height: 100%;
     position: absolute;
     left: 0;
     top: 0;
@@ -215,6 +215,7 @@ p a {
     background-color: #000000;
     text-align: center;
     padding-top: 100px;
+    padding-bottom: 200px;
 }
 
 .slide {
@@ -234,12 +235,15 @@ p a {
     position: fixed;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
-    color: white;
     width: 20px;
     height:20px; 
     margin-left: 95%;
 }
 
+#close-modal a{
+    color: white; 
+}
+
 #close-modal:hover {
     font-size: larger;
 }

output/theme/js/slideshow.js

@@ -16,13 +16,19 @@ function closeModal() {
         elems[i].style.display = "none"
     }
     document.getElementsByTagName("header")[0].style.opacity = 1
+    document.getElementById("about").style.opacity = 1
+    document.getElementById("download").style.opacity = 1
 }
 
 function showSlide(id){
+    closeModal()
     isOpen = true
     document.getElementById('slide-container').style.display = "block"
     document.getElementById(id).style.display = "block"
+    // change persistent elements' opacity
     document.getElementsByTagName("header")[0].style.opacity = 0.2
+    document.getElementById("about").style.opacity = 0.2
+    document.getElementById("download").style.opacity = 0.2
     goToTop()
 }
 

themes/felicie/static/css/main-v2.css

@@ -207,7 +207,7 @@ p a {
 #slide-container {
     display: none;
     width: 100%;
-    height: 300%;
+    min-height: 100%;
     position: absolute;
     left: 0;
     top: 0;
@@ -215,6 +215,7 @@ p a {
     background-color: #000000;
     text-align: center;
     padding-top: 100px;
+    padding-bottom: 200px;
 }
 
 .slide {
@@ -234,12 +235,15 @@ p a {
     position: fixed;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
-    color: white;
     width: 20px;
     height:20px; 
     margin-left: 95%;
 }
 
+#close-modal a{
+    color: white; 
+}
+
 #close-modal:hover {
     font-size: larger;
 }

themes/felicie/static/js/slideshow.js

@@ -16,13 +16,19 @@ function closeModal() {
         elems[i].style.display = "none"
     }
     document.getElementsByTagName("header")[0].style.opacity = 1
+    document.getElementById("about").style.opacity = 1
+    document.getElementById("download").style.opacity = 1
 }
 
 function showSlide(id){
+    closeModal()
     isOpen = true
     document.getElementById('slide-container').style.display = "block"
     document.getElementById(id).style.display = "block"
+    // change persistent elements' opacity
     document.getElementsByTagName("header")[0].style.opacity = 0.2
+    document.getElementById("about").style.opacity = 0.2
+    document.getElementById("download").style.opacity = 0.2
     goToTop()
 }
 

themes/felicie/templates/article.html

@@ -30,7 +30,7 @@
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
             {% for i in [1, 2, 3, 4, 5] %}
                 <img class="slide" id="img-{{ i }}" alt="" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">