From a0f38b965c172216de2bacb6dedf88cfff1ae6ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Marchal?= <me@theomarchal.com>
Date: Sat, 9 Jan 2021 01:14:18 +0100
Subject: [PATCH] Exposition picker list style test

---
 exposition.html | 17 ++++++++++++++++-
 styles/main.css | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/exposition.html b/exposition.html
index f827659..6bd782a 100644
--- a/exposition.html
+++ b/exposition.html
@@ -28,7 +28,22 @@
     </header>
 
     <article>
-        <h1>Exposition</h1>
+        <div id="expo-top">
+            <span class="support">Support :
+                <select name="type">
+                    <option selected="yes">Tableaux</option>
+                    <option>Aquarelle</option>
+                    <option>Soie</option>
+                    <option>Divers</option>
+                </select>
+            </span>
+        
+            <h1>Exposition</h1>
+            
+            <span class="pagination">
+                <span>&larr;</span> Page 3 sur 6 <span>&rarr;</span>
+            </span>
+        </div>
 
         <div id="gallery">
             <a data-fancybox="exposition" href="images/paintings/normal/15.jpg" data-fancybox-index="15">
diff --git a/styles/main.css b/styles/main.css
index 980f4ad..43ce434 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -96,6 +96,45 @@ article.main p.signature {
 
 /* Exposition */
 
+article #expo-top {
+    display:flex;
+    flex-direction:row;
+    justify-content:space-between;
+    align-self: flex-end;
+    align-content: space-between;
+    flex-wrap: wrap;
+
+    position:relative;
+    display:block;
+    margin:0;
+    margin-bottom:1.5rem;
+}
+
+article #expo-top h1 {
+    margin:0;
+}
+
+article #expo-top .support {
+    bottom:0;
+    display:block;
+    position:absolute;
+    margin-left:6rem;
+}
+
+article #expo-top .pagination {
+    bottom:0;
+    display:block;
+    position:absolute;
+
+    right:6rem;
+    margin-left:0;
+}
+
+article #expo-top span span {
+    display:initial;
+    font-size:1.5rem;
+}
+
 article #gallery {
     display:inline-block;
     position:relative;