From 5eb5c4e64c712f9fbbffea2636ce020f45e75b38 Mon Sep 17 00:00:00 2001
From: theo1 <theo@framasoft.org>
Date: Sun, 17 May 2020 14:33:58 +0200
Subject: [PATCH] Changed image column to right, changed opacity of header when
 slideshow is open.

---
 output/construction.html              | 12 ++++++------
 output/courtyard.html                 | 14 +++++++-------
 output/sunday.html                    | 12 ++++++------
 output/theme/css/main-v2.css          |  8 ++++----
 output/theme/js/slideshow.js          |  2 ++
 themes/felicie/static/css/main-v2.css |  8 ++++----
 themes/felicie/static/js/slideshow.js |  2 ++
 themes/felicie/templates/article.html |  2 +-
 8 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/output/construction.html b/output/construction.html
index 02c4a47..2cf418c 100644
--- a/output/construction.html
+++ b/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">
diff --git a/output/courtyard.html b/output/courtyard.html
index 6e1b6e5..9f59ac3 100644
--- a/output/courtyard.html
+++ b/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">
diff --git a/output/sunday.html b/output/sunday.html
index 9d494a0..518dd9a 100644
--- a/output/sunday.html
+++ b/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">
diff --git a/output/theme/css/main-v2.css b/output/theme/css/main-v2.css
index 07ba126..a8307f7 100755
--- a/output/theme/css/main-v2.css
+++ b/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;
 }
 
diff --git a/output/theme/js/slideshow.js b/output/theme/js/slideshow.js
index 5b1f025..359484f 100644
--- a/output/theme/js/slideshow.js
+++ b/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()
 }
 
diff --git a/themes/felicie/static/css/main-v2.css b/themes/felicie/static/css/main-v2.css
index 07ba126..a8307f7 100755
--- a/themes/felicie/static/css/main-v2.css
+++ b/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;
 }
 
diff --git a/themes/felicie/static/js/slideshow.js b/themes/felicie/static/js/slideshow.js
index 5b1f025..359484f 100644
--- a/themes/felicie/static/js/slideshow.js
+++ b/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()
 }
 
diff --git a/themes/felicie/templates/article.html b/themes/felicie/templates/article.html
index e343bb9..428f23a 100755
--- a/themes/felicie/templates/article.html
+++ b/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">