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 1/4] 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">

From bb9f07c3772d80a3b676019c7f8b61c3fed34955 Mon Sep 17 00:00:00 2001
From: theo1 <theo@framasoft.org>
Date: Sun, 17 May 2020 14:52:35 +0200
Subject: [PATCH 2/4] Introduced gallery category for full-size printing of
 images in the absence of text

---
 content/articles/construction.md      |  3 +--
 content/articles/sunday.md            |  2 +-
 output/category/gallery.html          |  0
 output/construction.html              | 31 +++++++++++++--------------
 output/courtyard.html                 | 26 +++++++++++-----------
 output/feeds/all.atom.xml             |  4 ++--
 output/feeds/gallery.atom.xml         | 12 +++++++++++
 output/feeds/public.atom.xml          | 14 ++----------
 output/sunday.html                    | 31 +++++++++++++--------------
 output/theme/css/main-v2.css          | 12 ++++++++++-
 themes/felicie/static/css/main-v2.css | 12 ++++++++++-
 themes/felicie/templates/article.html | 30 ++++++++++++++++++--------
 12 files changed, 105 insertions(+), 72 deletions(-)
 create mode 100644 output/category/gallery.html
 create mode 100644 output/feeds/gallery.atom.xml

diff --git a/content/articles/construction.md b/content/articles/construction.md
index 7003ef2..d056259 100755
--- a/content/articles/construction.md
+++ b/content/articles/construction.md
@@ -1,12 +1,11 @@
 Title: Construction
 Date: 2020-04-24 17:01
 Modified: 2020-04-24 17:01
-Category: public
+Category: gallery
 Tags: article
 Slug: construction
 Authors: felicie
 
-
 <audio controls="controls" 
     src="sounds/construction.wav"
     autoplay loop
diff --git a/content/articles/sunday.md b/content/articles/sunday.md
index 5661250..9311463 100755
--- a/content/articles/sunday.md
+++ b/content/articles/sunday.md
@@ -1,7 +1,7 @@
 Title: Sunday
 Date: 2020-04-24 17:01
 Modified: 2020-04-24 17:01
-Category: public
+Category: gallery
 Tags: article
 Slug: sunday
 Authors: felicie
diff --git a/output/category/gallery.html b/output/category/gallery.html
new file mode 100644
index 0000000..e69de29
diff --git a/output/construction.html b/output/construction.html
index 2cf418c..73f7d29 100644
--- a/output/construction.html
+++ b/output/construction.html
@@ -15,24 +15,23 @@
     
     <div class='content'>
     <script src="/theme/js/slideshow.js"></script>
-
     <h1 class='article-title'>Construction</h1>
-    <div class="article">
-        <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">
-                <img alt="" onclick="showSlide('img-3')" src="/images/Construction/Construction-3.jpg">
-                <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 class="gallery">
+        <!-- If there are only images, print them full-width. -->
+            <img class= "gallery-img" alt="" onclick="showSlide('img-1')" src="/images/Construction/Construction-1.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-2')" src="/images/Construction/Construction-2.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-3')" src="/images/Construction/Construction-3.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-4')" src="/images/Construction/Construction-4.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-5')" src="/images/Construction/Construction-5.jpg">
+            <br>
+            </div>
+
+    <!-- Slides used for slideshow -->
     <div id="slide-container">
         <div id="close-modal" onclick="closeModal()">X</div>
         <div id="slides" class="modal">
diff --git a/output/courtyard.html b/output/courtyard.html
index 9f59ac3..6335da5 100644
--- a/output/courtyard.html
+++ b/output/courtyard.html
@@ -15,17 +15,18 @@
     
     <div class='content'>
     <script src="/theme/js/slideshow.js"></script>
-
     <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" 
+
+        <!-- If there is a text, print two columns -->
+        <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
     class='audio'>
@@ -41,9 +42,10 @@ At sunset, he starts to think that the angle of the light on the stretch of eart
 <p>He laughs out loud more regularly, and it sounds odd. Both liberated and self-aware at the same time. As if he was in actual social exchange, it is often followed by the need to express, out loud again, what was so funny that he couldn’t hold it in. The toothbrush on the side of the sink seems confused but if that is what it takes to be at peace with himself, it is happy to help.
 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>
+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>
 
+    <!-- Slides used for slideshow -->
     <div id="slide-container">
         <div id="close-modal" onclick="closeModal()">X</div>
         <div id="slides" class="modal">
diff --git a/output/feeds/all.atom.xml b/output/feeds/all.atom.xml
index b533555..14f9ac2 100644
--- a/output/feeds/all.atom.xml
+++ b/output/feeds/all.atom.xml
@@ -4,7 +4,7 @@
     autoplay loop
     class='audio'&gt;
     Your browser does not support the HTML5 Audio element.
-&lt;/audio&gt;&lt;/p&gt;</content><category term="public"></category><category term="article"></category></entry><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html">&lt;p&gt;A man and a building.&lt;/p&gt;</summary><content type="html">&lt;p&gt;&lt;audio controls="controls" 
+&lt;/audio&gt;&lt;/p&gt;</content><category term="gallery"></category><category term="article"></category></entry><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html">&lt;p&gt;A man and a building.&lt;/p&gt;</summary><content type="html">&lt;p&gt;&lt;audio controls="controls" 
     src="sounds/courtyard.wav"
     autoplay loop
     class='audio'&gt;
@@ -25,4 +25,4 @@ He can hear neighbors laughing out loud, as they always had in peaceful sunny sp
     autoplay loop
     class='audio'&gt;
     Your browser does not support the HTML5 Audio element.
-&lt;/audio&gt;&lt;/p&gt;</content><category term="public"></category><category term="article"></category></entry></feed>
\ No newline at end of file
+&lt;/audio&gt;&lt;/p&gt;</content><category term="gallery"></category><category term="article"></category></entry></feed>
\ No newline at end of file
diff --git a/output/feeds/gallery.atom.xml b/output/feeds/gallery.atom.xml
new file mode 100644
index 0000000..fcaa167
--- /dev/null
+++ b/output/feeds/gallery.atom.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom"><title>Better days - gallery</title><link href="https://fel.theo-lem.org/" rel="alternate"></link><link href="https://fel.theo-lem.org/feeds/gallery.atom.xml" rel="self"></link><id>https://fel.theo-lem.org/</id><updated>2020-04-24T17:01:00+02:00</updated><entry><title>Construction</title><link href="https://fel.theo-lem.org/construction.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/construction.html</id><content type="html">&lt;p&gt;&lt;audio controls="controls" 
+    src="sounds/construction.wav"
+    autoplay loop
+    class='audio'&gt;
+    Your browser does not support the HTML5 Audio element.
+&lt;/audio&gt;&lt;/p&gt;</content><category term="gallery"></category><category term="article"></category></entry><entry><title>Sunday</title><link href="https://fel.theo-lem.org/sunday.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/sunday.html</id><content type="html">&lt;p&gt;&lt;audio controls="controls" 
+    src="sounds/sunday.wav"
+    autoplay loop
+    class='audio'&gt;
+    Your browser does not support the HTML5 Audio element.
+&lt;/audio&gt;&lt;/p&gt;</content><category term="gallery"></category><category term="article"></category></entry></feed>
\ No newline at end of file
diff --git a/output/feeds/public.atom.xml b/output/feeds/public.atom.xml
index 7e885c2..4ae5b8d 100644
--- a/output/feeds/public.atom.xml
+++ b/output/feeds/public.atom.xml
@@ -1,10 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom"><title>Better days - public</title><link href="https://fel.theo-lem.org/" rel="alternate"></link><link href="https://fel.theo-lem.org/feeds/public.atom.xml" rel="self"></link><id>https://fel.theo-lem.org/</id><updated>2020-04-24T17:01:00+02:00</updated><entry><title>Construction</title><link href="https://fel.theo-lem.org/construction.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/construction.html</id><content type="html">&lt;p&gt;&lt;audio controls="controls" 
-    src="sounds/construction.wav"
-    autoplay loop
-    class='audio'&gt;
-    Your browser does not support the HTML5 Audio element.
-&lt;/audio&gt;&lt;/p&gt;</content><category term="public"></category><category term="article"></category></entry><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html">&lt;p&gt;A man and a building.&lt;/p&gt;</summary><content type="html">&lt;p&gt;&lt;audio controls="controls" 
+<feed xmlns="http://www.w3.org/2005/Atom"><title>Better days - public</title><link href="https://fel.theo-lem.org/" rel="alternate"></link><link href="https://fel.theo-lem.org/feeds/public.atom.xml" rel="self"></link><id>https://fel.theo-lem.org/</id><updated>2020-04-24T17:01:00+02:00</updated><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html">&lt;p&gt;A man and a building.&lt;/p&gt;</summary><content type="html">&lt;p&gt;&lt;audio controls="controls" 
     src="sounds/courtyard.wav"
     autoplay loop
     class='audio'&gt;
@@ -20,9 +15,4 @@ At sunset, he starts to think that the angle of the light on the stretch of eart
 &lt;p&gt;He laughs out loud more regularly, and it sounds odd. Both liberated and self-aware at the same time. As if he was in actual social exchange, it is often followed by the need to express, out loud again, what was so funny that he couldn’t hold it in. The toothbrush on the side of the sink seems confused but if that is what it takes to be at peace with himself, it is happy to help.
 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.&lt;/p&gt;
 &lt;p&gt;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.&lt;/p&gt;</content><category term="public"></category></entry><entry><title>Sunday</title><link href="https://fel.theo-lem.org/sunday.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/sunday.html</id><content type="html">&lt;p&gt;&lt;audio controls="controls" 
-    src="sounds/sunday.wav"
-    autoplay loop
-    class='audio'&gt;
-    Your browser does not support the HTML5 Audio element.
-&lt;/audio&gt;&lt;/p&gt;</content><category term="public"></category><category term="article"></category></entry></feed>
\ No newline at end of file
+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.&lt;/p&gt;</content><category term="public"></category></entry></feed>
\ No newline at end of file
diff --git a/output/sunday.html b/output/sunday.html
index 518dd9a..da41b6b 100644
--- a/output/sunday.html
+++ b/output/sunday.html
@@ -15,24 +15,23 @@
     
     <div class='content'>
     <script src="/theme/js/slideshow.js"></script>
-
     <h1 class='article-title'>Sunday</h1>
-    <div class="article">
-        <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">
-                <img alt="" onclick="showSlide('img-3')" src="/images/Sunday/Sunday-3.jpg">
-                <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 class="gallery">
+        <!-- If there are only images, print them full-width. -->
+            <img class= "gallery-img" alt="" onclick="showSlide('img-1')" src="/images/Sunday/Sunday-1.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-2')" src="/images/Sunday/Sunday-2.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-3')" src="/images/Sunday/Sunday-3.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-4')" src="/images/Sunday/Sunday-4.jpg">
+            <br>
+            <img class= "gallery-img" alt="" onclick="showSlide('img-5')" src="/images/Sunday/Sunday-5.jpg">
+            <br>
+            </div>
+
+    <!-- Slides used for slideshow -->
     <div id="slide-container">
         <div id="close-modal" onclick="closeModal()">X</div>
         <div id="slides" class="modal">
diff --git a/output/theme/css/main-v2.css b/output/theme/css/main-v2.css
index a8307f7..a929c8d 100755
--- a/output/theme/css/main-v2.css
+++ b/output/theme/css/main-v2.css
@@ -78,7 +78,7 @@ header{
     display: flex;
     z-index: 1;
     margin: 10px;
-    max-width: 50%;
+    max-width: 70%;
     position: relative;
 }
 
@@ -158,6 +158,11 @@ p a {
     max-width: 70%;
 }
 
+.gallery-img {
+    width: 100%;
+    padding-bottom: 30px;
+}
+
 .audio {
     display: none;
 }
@@ -177,6 +182,11 @@ p a {
     display: flex;
 }
 
+.gallery {
+    display: block;
+    width: 80%;
+}
+
 .article::after {
     content: "";
     display: block;
diff --git a/themes/felicie/static/css/main-v2.css b/themes/felicie/static/css/main-v2.css
index a8307f7..a929c8d 100755
--- a/themes/felicie/static/css/main-v2.css
+++ b/themes/felicie/static/css/main-v2.css
@@ -78,7 +78,7 @@ header{
     display: flex;
     z-index: 1;
     margin: 10px;
-    max-width: 50%;
+    max-width: 70%;
     position: relative;
 }
 
@@ -158,6 +158,11 @@ p a {
     max-width: 70%;
 }
 
+.gallery-img {
+    width: 100%;
+    padding-bottom: 30px;
+}
+
 .audio {
     display: none;
 }
@@ -177,6 +182,11 @@ p a {
     display: flex;
 }
 
+.gallery {
+    display: block;
+    width: 80%;
+}
+
 .article::after {
     content: "";
     display: block;
diff --git a/themes/felicie/templates/article.html b/themes/felicie/templates/article.html
index 428f23a..5d76b0b 100755
--- a/themes/felicie/templates/article.html
+++ b/themes/felicie/templates/article.html
@@ -6,17 +6,29 @@
 
 {% block content %}
     <script src="{{ SITE_URL }}/theme/js/slideshow.js"></script>
-
     <h1 class='article-title'>{{ article.title }}</h1>
-    <div class="article">
-        <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>
 
+    {% if article.category == 'gallery' %}
+        <div class="gallery">
+        <!-- If there are only images, print them full-width. -->
+            {% for i in [1, 2, 3, 4, 5] %}
+            <img class= "gallery-img" alt="" onclick="showSlide('img-{{ i }}')" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
+            <br>
+            {% endfor %}
+            </div>
+    {% else %}
+        <!-- If there is a text, print two columns -->
+        <div class="article">
+            <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>
+    {% endif%}
+
+    <!-- Slides used for slideshow -->
     <div id="slide-container">
         <div id="close-modal" onclick="closeModal()">X</div>
         <div id="slides" class="modal">

From d279f2eb0323acef0425f057dd5d17bdfc5731c8 Mon Sep 17 00:00:00 2001
From: theo1 <theo@framasoft.org>
Date: Sun, 17 May 2020 15:07:43 +0200
Subject: [PATCH 3/4] Added download link and updated README

---
 README.md                             | 11 ++++++++++-
 content/pages/download.md             |  2 +-
 output/pages/download.html            |  2 +-
 output/theme/css/main-v2.css          |  5 +++++
 themes/felicie/static/css/main-v2.css |  5 +++++
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 9e682cc..de9639f 100755
--- a/README.md
+++ b/README.md
@@ -13,4 +13,13 @@ Ils doivent être téléversés sur le serveur directement.
 
 **Nommage des fichiers** : Pour être pris en compte dans le site final, les fichiers doivent être nommés de la manière suivante (attention à la casse) : 
 * sons : nom-de-l'article-sans-majuscule->.wav|mp3 (TODO : les mettre en .mp3 plutôt qu'en .wav, et les placer dans le template plutôt que le .md)
-* images : Nom de l article-x.jpg
\ No newline at end of file
+* images : Nom de l article-x.jpg
+* contenu : chaque nouvel article doit contenir les champs suivants au début : 
+```
+Title: 
+Date: (date de publication, format : 2020-04-05 10:20)
+Modified: (date de modification, idem)
+Category: ("article" pour les articles avec texte, "gallery" si seulement des images)
+Slug: (version sans espace ni caractère spécial du titre, par exemple "mon-titre-d'article". Sera repris dans l'URL de l'article.)
+Summary: (un rapide sommaire, optionnel)
+```
\ No newline at end of file
diff --git a/content/pages/download.md b/content/pages/download.md
index b6b7c47..e21f6cd 100755
--- a/content/pages/download.md
+++ b/content/pages/download.md
@@ -5,4 +5,4 @@ Category: misc
 Slug: download
 Summary: Donwload the content
 
-You can download all the content of this website here. 
\ No newline at end of file
+You can download all the content of this website [here](/betterdays.zip). 
\ No newline at end of file
diff --git a/output/pages/download.html b/output/pages/download.html
index f6c3492..19a59c6 100644
--- a/output/pages/download.html
+++ b/output/pages/download.html
@@ -14,7 +14,7 @@
     </header>
     
     <div class='content'>
-<p>You can download all the content of this website here. </p>
+<p>You can download all the content of this website <a href="/betterdays.zip">here</a>. </p>
     </div>
 </body>
 
diff --git a/output/theme/css/main-v2.css b/output/theme/css/main-v2.css
index a929c8d..3c2f7c5 100755
--- a/output/theme/css/main-v2.css
+++ b/output/theme/css/main-v2.css
@@ -176,6 +176,11 @@ p a {
 .article-img img{
     max-width: 80%;
     width: 80%;
+    padding-bottom: 20px;
+}
+
+.article-img img:hover {
+    opacity: 0.7;
 }
 
 .article {
diff --git a/themes/felicie/static/css/main-v2.css b/themes/felicie/static/css/main-v2.css
index a929c8d..3c2f7c5 100755
--- a/themes/felicie/static/css/main-v2.css
+++ b/themes/felicie/static/css/main-v2.css
@@ -176,6 +176,11 @@ p a {
 .article-img img{
     max-width: 80%;
     width: 80%;
+    padding-bottom: 20px;
+}
+
+.article-img img:hover {
+    opacity: 0.7;
 }
 
 .article {

From 3204fa26567eb1e1232975db724b514f6e820158 Mon Sep 17 00:00:00 2001
From: theo1 <theo@framasoft.org>
Date: Sun, 17 May 2020 15:31:20 +0200
Subject: [PATCH 4/4] Changed sldie padding when on full size print. Made exit
 button clickable.

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

diff --git a/output/construction.html b/output/construction.html
index 73f7d29..8c731ca 100644
--- a/output/construction.html
+++ b/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">
diff --git a/output/courtyard.html b/output/courtyard.html
index 6335da5..395e967 100644
--- a/output/courtyard.html
+++ b/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">
diff --git a/output/sunday.html b/output/sunday.html
index da41b6b..f3d8908 100644
--- a/output/sunday.html
+++ b/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">
diff --git a/output/theme/css/main-v2.css b/output/theme/css/main-v2.css
index 3c2f7c5..04b0f04 100755
--- a/output/theme/css/main-v2.css
+++ b/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 {
@@ -226,7 +227,7 @@ p a {
     max-width: 80%;
     max-height: 80%;
     width: auto;
-    height: auto; 
+    height: auto;
     background-color: black;
 }
 
@@ -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;
 }
\ No newline at end of file
diff --git a/output/theme/js/slideshow.js b/output/theme/js/slideshow.js
index 359484f..a0ec4e3 100644
--- a/output/theme/js/slideshow.js
+++ b/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()
 }
 
diff --git a/themes/felicie/static/css/main-v2.css b/themes/felicie/static/css/main-v2.css
index 3c2f7c5..04b0f04 100755
--- a/themes/felicie/static/css/main-v2.css
+++ b/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 {
@@ -226,7 +227,7 @@ p a {
     max-width: 80%;
     max-height: 80%;
     width: auto;
-    height: auto; 
+    height: auto;
     background-color: black;
 }
 
@@ -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;
 }
\ No newline at end of file
diff --git a/themes/felicie/static/js/slideshow.js b/themes/felicie/static/js/slideshow.js
index 359484f..a0ec4e3 100644
--- a/themes/felicie/static/js/slideshow.js
+++ b/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()
 }
 
diff --git a/themes/felicie/templates/article.html b/themes/felicie/templates/article.html
index 5d76b0b..93da6e7 100755
--- a/themes/felicie/templates/article.html
+++ b/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">