From e0acc55670065be3628bc269e899d272f71bdb41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Marchal?= <me@theomarchal.com>
Date: Sat, 13 Feb 2021 01:54:45 +0100
Subject: [PATCH] Basic implementation of details in exposition

---
 exposition.html       |  2 +-
 scripts/exposition.js |  7 ++++++-
 styles/main.css       | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/exposition.html b/exposition.html
index 1811b01..3abe2d9 100644
--- a/exposition.html
+++ b/exposition.html
@@ -37,7 +37,7 @@
 
     <article class="exposition">
         <h1>Exposition</h1>
-        <p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
+        <p class="center" style="margin-bottom:0;">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
         <div class="gallery"></div>
     </article>
 </body>
diff --git a/scripts/exposition.js b/scripts/exposition.js
index 90fcf0d..81bb488 100644
--- a/scripts/exposition.js
+++ b/scripts/exposition.js
@@ -6,8 +6,13 @@ jQuery(document).ready(function($)
         {
             if (i.photo == "ok" || i.photo == "good")
             {
-                paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
+                paintingHtml = '<div class="gallery-item">';
+                paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                 paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
+                paintingHtml += '<span class="item-title">' + i.title;
+                if (i.year != '—')
+                    paintingHtml += ' (' + i.year + ')';
+                paintingHtml += '</span></div>';
                 $(".gallery").append(paintingHtml);
             }
         }
diff --git a/styles/main.css b/styles/main.css
index b30d433..f3823df 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -215,6 +215,22 @@ article.exposition .gallery {
     text-align:center;
 }
 
+article .gallery .gallery-item {
+    display:inline-block;
+    position:relative;
+    margin:0.75rem;
+    margin-top:0.75rem;
+    margin-top:1.6rem;
+}
+
+article .gallery .item-title {
+    font-size:0.9rem;
+    margin:0rem;
+    padding:0rem;
+    padding-top:0rem;
+    display:block;
+}
+
 article .gallery img {
     max-height:30vh;
     max-width:40vw;