keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

First test of an exposition view with basic info

Browse Source
This commit is contained in:
Théo Marchal 2021-01-28 23:48:38 +01:00
parent 6c5fd9ca2a
commit 8603c7ad77
2 changed files with 96 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
exposition.html
View File

@ -39,61 +39,103 @@
<p style="text-align:center;">Cliquez sur une image pour la voir en grand avec ses détails.</p> <p style="text-align:center;">Cliquez sur une image pour la voir en grand avec ses détails.</p>
<div id="gallery" class="exposition"> <div id="gallery" class="exposition">
<a data-fancybox="exposition" href="photos/paintings/normal/15.jpg" data-fancybox-index="15"> <div class="gallery-item">
<img src="photos/paintings/mini/15.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/15.jpg" data-fancybox-index="15">
</a> <img src="photos/paintings/mini/15.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/19.jpg" data-fancybox-index="19"> <div class="gallery-item">
<img src="photos/paintings/mini/19.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/19.jpg" data-fancybox-index="19">
</a> <img src="photos/paintings/mini/19.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/22.jpg" data-fancybox-index="22"> <div class="gallery-item">
<img src="photos/paintings/mini/22.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/22.jpg" data-fancybox-index="22">
</a> <img src="photos/paintings/mini/22.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/26.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/26.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/26.jpg">
</a> <img src="photos/paintings/mini/26.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/34.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/34.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/34.jpg">
</a> <img src="photos/paintings/mini/34.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/42.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/42.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/42.jpg">
</a> <img src="photos/paintings/mini/42.jpg">
</a>
<span class="item-title">Champs de colza et vue sur Dugny et la vallée de la Meuse (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/43.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/43.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/43.jpg">
</a> <img src="photos/paintings/mini/43.jpg">
</a>
<span class="item-title">Champs de colza et vue sur Dugny et la vallée de la Meuse (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/44.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/44.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/44.jpg">
</a> <img src="photos/paintings/mini/44.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/51.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/51.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/51.jpg">
</a> <img src="photos/paintings/mini/51.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/55.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/55.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/55.jpg">
</a> <img src="photos/paintings/mini/55.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/57.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/57.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/57.jpg">
</a> <img src="photos/paintings/mini/57.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/58.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/58.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/58.jpg">
</a> <img src="photos/paintings/mini/58.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/59.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/59.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/59.jpg">
</a> <img src="photos/paintings/mini/59.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
<a data-fancybox="exposition" href="photos/paintings/normal/64.jpg"> <div class="gallery-item">
<img src="photos/paintings/mini/64.jpg"> <a data-fancybox="exposition" href="photos/paintings/normal/64.jpg">
</a> <img src="photos/paintings/mini/64.jpg">
</a>
<span class="item-title">Sérénade à l'enfant (1959)</span>
</div>
</div> </div>
</article> </article>
</body> </body>

16
styles/main.css
View File

@ -191,12 +191,19 @@ article.main p.signature {
/* Exposition */ /* Exposition */
article #gallery { article #gallery .gallery-item {
display:inline-block; display:inline-block;
position:relative; position:relative;
margin:0.75rem;
margin-top:1.6rem;
}
margin:auto; article #gallery .item-title {
margin-top:0; font-size:0.9rem;
margin:0rem;
padding:0rem;
padding-top:0.25rem;
display:block;
} }
article #gallery.exposition { article #gallery.exposition {
@ -206,7 +213,8 @@ article #gallery.exposition {
article #gallery img { article #gallery img {
max-height:30vh; max-height:30vh;
max-width:40vw; max-width:40vw;
margin:0.5rem; display:block;
margin:auto;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {