First test of an exposition view with basic info

exposition.html

@@ -39,61 +39,103 @@
         <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 class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/15.jpg" data-fancybox-index="15">
                     <img src="photos/paintings/mini/15.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/19.jpg" data-fancybox-index="19">
                     <img src="photos/paintings/mini/19.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/22.jpg" data-fancybox-index="22">
                     <img src="photos/paintings/mini/22.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/26.jpg">
                     <img src="photos/paintings/mini/26.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/34.jpg">
                     <img src="photos/paintings/mini/34.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/42.jpg">
                     <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>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/43.jpg">
                     <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>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/44.jpg">
                     <img src="photos/paintings/mini/44.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/51.jpg">
                     <img src="photos/paintings/mini/51.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/55.jpg">
                     <img src="photos/paintings/mini/55.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/57.jpg">
                     <img src="photos/paintings/mini/57.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/58.jpg">
                     <img src="photos/paintings/mini/58.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/59.jpg">
                     <img src="photos/paintings/mini/59.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
 
+            <div class="gallery-item">
                 <a data-fancybox="exposition" href="photos/paintings/normal/64.jpg">
                     <img src="photos/paintings/mini/64.jpg">
                 </a>
+                <span class="item-title">Sérénade à l'enfant (1959)</span>
+            </div>
         </div>
     </article>
 </body>

styles/main.css

@@ -191,12 +191,19 @@ article.main p.signature {
 
 /* Exposition */
 
-article #gallery {
+article #gallery .gallery-item {
     display:inline-block;
     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 {
@@ -206,7 +213,8 @@ article #gallery.exposition {
 article #gallery img {
     max-height:30vh;
     max-width:40vw;
-    margin:0.5rem;
+    display:block;
+    margin:auto;
 }
 
 @media only screen and (max-width: 1000px) {