Changed image column to right, changed opacity of header when slideshow is open.

output/construction.html

@@ -18,12 +18,6 @@
 
     <h1 class='article-title'>Construction</h1>
     <div class="article">
-        <div class='article-content column'> <p><audio controls="controls" 
-    src="sounds/construction.wav"
-    autoplay loop
-    class='audio'>
-    Your browser does not support the HTML5 Audio element.
-</audio></p></div>
         <div class='article-img column'>
                 <img alt="" onclick="showSlide('img-1')" src="/images/Construction/Construction-1.jpg">
                 <img alt="" onclick="showSlide('img-2')" src="/images/Construction/Construction-2.jpg">
@@ -31,6 +25,12 @@
                 <img alt="" onclick="showSlide('img-4')" src="/images/Construction/Construction-4.jpg">
                 <img alt="" onclick="showSlide('img-5')" src="/images/Construction/Construction-5.jpg">
         </div>
+        <div class='article-content column'> <p><audio controls="controls" 
+    src="sounds/construction.wav"
+    autoplay loop
+    class='audio'>
+    Your browser does not support the HTML5 Audio element.
+</audio></p></div>
     </div>
 
     <div id="slide-container">

output/courtyard.html

@@ -18,6 +18,13 @@
 
     <h1 class='article-title'>Courtyard</h1>
     <div class="article">
+        <div class='article-img column'>
+                <img alt="" onclick="showSlide('img-1')" src="/images/Courtyard/Courtyard-1.jpg">
+                <img alt="" onclick="showSlide('img-2')" src="/images/Courtyard/Courtyard-2.jpg">
+                <img alt="" onclick="showSlide('img-3')" src="/images/Courtyard/Courtyard-3.jpg">
+                <img alt="" onclick="showSlide('img-4')" src="/images/Courtyard/Courtyard-4.jpg">
+                <img alt="" onclick="showSlide('img-5')" src="/images/Courtyard/Courtyard-5.jpg">
+        </div>
         <div class='article-content column'> <p><audio controls="controls" 
     src="sounds/courtyard.wav"
     autoplay loop
@@ -35,13 +42,6 @@ At sunset, he starts to think that the angle of the light on the stretch of eart
 He also comments with either self-pity or candid interest everything he undertakes. He even talks back to himself sometimes, which he always assumed was the point of no return. But having the last word has become a matter of principle.</p>
 <p>He goes to the balcony twice a day to smoke a cigarette. It overlooks the courtyard, so it is just outside enough to give himself the impression that he is going somewhere. The junk and the dust lingering on the other balconies have made space to allow a chair and a reading person to get a bit of sunlight.
 He can hear neighbors laughing out loud, as they always had in peaceful sunny spring afternoon. They started to watch an old TV show last week. He knows the ending and can even tell some lines.</p></div>
-        <div class='article-img column'>
-                <img alt="" onclick="showSlide('img-1')" src="/images/Courtyard/Courtyard-1.jpg">
-                <img alt="" onclick="showSlide('img-2')" src="/images/Courtyard/Courtyard-2.jpg">
-                <img alt="" onclick="showSlide('img-3')" src="/images/Courtyard/Courtyard-3.jpg">
-                <img alt="" onclick="showSlide('img-4')" src="/images/Courtyard/Courtyard-4.jpg">
-                <img alt="" onclick="showSlide('img-5')" src="/images/Courtyard/Courtyard-5.jpg">
-        </div>
     </div>
 
     <div id="slide-container">

output/sunday.html

@@ -18,12 +18,6 @@
 
     <h1 class='article-title'>Sunday</h1>
     <div class="article">
-        <div class='article-content column'> <p><audio controls="controls" 
-    src="sounds/sunday.wav"
-    autoplay loop
-    class='audio'>
-    Your browser does not support the HTML5 Audio element.
-</audio></p></div>
         <div class='article-img column'>
                 <img alt="" onclick="showSlide('img-1')" src="/images/Sunday/Sunday-1.jpg">
                 <img alt="" onclick="showSlide('img-2')" src="/images/Sunday/Sunday-2.jpg">
@@ -31,6 +25,12 @@
                 <img alt="" onclick="showSlide('img-4')" src="/images/Sunday/Sunday-4.jpg">
                 <img alt="" onclick="showSlide('img-5')" src="/images/Sunday/Sunday-5.jpg">
         </div>
+        <div class='article-content column'> <p><audio controls="controls" 
+    src="sounds/sunday.wav"
+    autoplay loop
+    class='audio'>
+    Your browser does not support the HTML5 Audio element.
+</audio></p></div>
     </div>
 
     <div id="slide-container">

output/theme/css/main-v2.css

@@ -165,12 +165,12 @@ p a {
 .article-content p {
     font-size: 1.2em;
     line-height: 150%;
-    padding-right: 50px; 
+    padding-right: 40px; 
 }
 
 .article-img img{
-    max-width: 60%;
-    width:60%;
+    max-width: 80%;
+    width: 80%;
 }
 
 .article {
@@ -185,7 +185,7 @@ p a {
 
 .column {
     float: left; 
-    width: 50%;
+    width: 40%;
     padding: 15px;
 }
 

output/theme/js/slideshow.js

@@ -15,12 +15,14 @@ function closeModal() {
     for(let i=0; i<elems.length; i++){
         elems[i].style.display = "none"
     }
+    document.getElementsByTagName("header")[0].style.opacity = 1
 }
 
 function showSlide(id){
     isOpen = true
     document.getElementById('slide-container').style.display = "block"
     document.getElementById(id).style.display = "block"
+    document.getElementsByTagName("header")[0].style.opacity = 0.2
     goToTop()
 }
 

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

@@ -165,12 +165,12 @@ p a {
 .article-content p {
     font-size: 1.2em;
     line-height: 150%;
-    padding-right: 50px; 
+    padding-right: 40px; 
 }
 
 .article-img img{
-    max-width: 60%;
-    width:60%;
+    max-width: 80%;
+    width: 80%;
 }
 
 .article {
@@ -185,7 +185,7 @@ p a {
 
 .column {
     float: left; 
-    width: 50%;
+    width: 40%;
     padding: 15px;
 }
 

themes/felicie/static/js/slideshow.js

@@ -15,12 +15,14 @@ function closeModal() {
     for(let i=0; i<elems.length; i++){
         elems[i].style.display = "none"
     }
+    document.getElementsByTagName("header")[0].style.opacity = 1
 }
 
 function showSlide(id){
     isOpen = true
     document.getElementById('slide-container').style.display = "block"
     document.getElementById(id).style.display = "block"
+    document.getElementsByTagName("header")[0].style.opacity = 0.2
     goToTop()
 }
 

themes/felicie/templates/article.html

@@ -9,12 +9,12 @@
 
     <h1 class='article-title'>{{ article.title }}</h1>
     <div class="article">
-        <div class='article-content column'> {{ article.content }}</div>
         <div class='article-img column'>
             {% for i in [1, 2, 3, 4, 5] %}
                 <img alt="" onclick="showSlide('img-{{ i }}')" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
             {% endfor %}
         </div>
+        <div class='article-content column'> {{ article.content }}</div>
     </div>
 
     <div id="slide-container">