Merge branch 'theo'
This commit is contained in:
theo1
commit
71a26b79bc
11
README.md
11
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
|
||||
* 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)
|
||||
```
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -5,4 +5,4 @@ Category: misc
|
||||
Slug: download
|
||||
Summary: Donwload the content
|
||||
|
||||
You can download all the content of this website here.
|
||||
You can download all the content of this website [here](/betterdays.zip).
|
||||
0
output/category/gallery.html
Normal file
0
output/category/gallery.html
Normal file
@ -15,26 +15,25 @@
|
||||
|
||||
<div class='content'>
|
||||
<script src="/theme/js/slideshow.js"></script>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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="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">
|
||||
|
||||
@ -15,10 +15,18 @@
|
||||
|
||||
<div class='content'>
|
||||
<script src="/theme/js/slideshow.js"></script>
|
||||
|
||||
<h1 class='article-title'>Courtyard</h1>
|
||||
<div class="article">
|
||||
<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'>
|
||||
@ -34,18 +42,12 @@ 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 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">
|
||||
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>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p></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"><p>A man and a building.</p></summary><content type="html"><p><audio controls="controls"
|
||||
</audio></p></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"><p>A man and a building.</p></summary><content type="html"><p><audio controls="controls"
|
||||
src="sounds/courtyard.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
@ -25,4 +25,4 @@ He can hear neighbors laughing out loud, as they always had in peaceful sunny sp
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p></content><category term="public"></category><category term="article"></category></entry></feed>
|
||||
</audio></p></content><category term="gallery"></category><category term="article"></category></entry></feed>
|
||||
12
output/feeds/gallery.atom.xml
Normal file
12
output/feeds/gallery.atom.xml
Normal file
@ -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"><p><audio controls="controls"
|
||||
src="sounds/construction.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p></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"><p><audio controls="controls"
|
||||
src="sounds/sunday.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p></content><category term="gallery"></category><category term="article"></category></entry></feed>
|
||||
@ -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"><p><audio controls="controls"
|
||||
src="sounds/construction.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p></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"><p>A man and a building.</p></summary><content type="html"><p><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"><p>A man and a building.</p></summary><content type="html"><p><audio controls="controls"
|
||||
src="sounds/courtyard.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
@ -20,9 +15,4 @@ 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></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"><p><audio controls="controls"
|
||||
src="sounds/sunday.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p></content><category term="public"></category><category term="article"></category></entry></feed>
|
||||
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></content><category term="public"></category></entry></feed>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -15,26 +15,25 @@
|
||||
|
||||
<div class='content'>
|
||||
<script src="/theme/js/slideshow.js"></script>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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="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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -165,18 +170,28 @@ 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%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-img img:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.article {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: block;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.article::after {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -185,14 +200,14 @@ p a {
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#slide-container {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 300%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -200,6 +215,7 @@ p a {
|
||||
background-color: #000000;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
@ -211,7 +227,7 @@ p a {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
height: auto;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@ -219,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;
|
||||
}
|
||||
@ -15,12 +15,20 @@ function closeModal() {
|
||||
for(let i=0; i<elems.length; i++){
|
||||
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()
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -165,18 +170,28 @@ 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%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-img img:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.article {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: block;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.article::after {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -185,14 +200,14 @@ p a {
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#slide-container {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 300%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -200,6 +215,7 @@ p a {
|
||||
background-color: #000000;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
@ -211,7 +227,7 @@ p a {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
height: auto;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@ -219,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;
|
||||
}
|
||||
@ -15,12 +15,20 @@ function closeModal() {
|
||||
for(let i=0; i<elems.length; i++){
|
||||
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()
|
||||
}
|
||||
|
||||
|
||||
@ -6,19 +6,31 @@
|
||||
|
||||
{% block content %}
|
||||
<script src="{{ SITE_URL }}/theme/js/slideshow.js"></script>
|
||||
|
||||
<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>
|
||||
|
||||
{% 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="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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user