Style programs up a bit

4 files changed, 56 insertions, 10 deletions

diff --git a/images/chevron-down.svg b/images/chevron-down.svg
new file mode 100644
index 0000000..5f10285
--- /dev/null
+++ b/images/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e05a00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
\ No newline at end of file
diff --git a/images/chevron-up.svg b/images/chevron-up.svg
new file mode 100644
index 0000000..121efdd
--- /dev/null
+++ b/images/chevron-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e4b63a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
\ No newline at end of file
diff --git a/programmes.html b/programmes.html
index 13f8c4d..2670d46 100644
--- a/programmes.html
+++ b/programmes.html
@@ -1,6 +1,11 @@
 <main>
   <details class="program">
-    <summary>Programme A</summary>
+    <summary>
+      <div class="name">Programme A</div>
+      <div class="composers">Foo, Bar, Baz</div>
+      <img class="button open" src="images/chevron-down.svg">
+      <img class="button close" src="images/chevron-up.svg">
+    </summary>
     <p>
       Un programme qui est sacrément bien nommé, parce que son
       contenu correspond tout à fait à ce qui vient en tête
@@ -26,7 +31,12 @@
   </details>
 
   <details class="program">
-    <summary>Programme B</summary>
+    <summary>
+      <div class="name">Programme B</div>
+      <div class="composers">Foo, Bar, Baz</div>
+      <img class="button open" src="images/chevron-down.svg">
+      <img class="button close" src="images/chevron-up.svg">
+    </summary>
     <p>
       Un programme qui comme son nom l'indique, rend hommage
       à ce à quoi il fait référence. Composé des œuvres
@@ -52,7 +62,12 @@
   </details>
 
   <details class="program">
-    <summary>Programme C</summary>
+    <summary>
+      <div class="name">Programme C</div>
+      <div class="composers">Foo, Bar, Baz</div>
+      <img class="button open" src="images/chevron-down.svg">
+      <img class="button close" src="images/chevron-up.svg">
+    </summary>
     <p>
       Les morceaux de ce programme font référence à ceux à quoi
       on peut s'attendre en lisant son nom. En voici la liste :
@@ -77,7 +92,12 @@
   </details>
 
   <details class="program">
-    <summary>Programme D</summary>
+    <summary>
+      <div class="name">Programme D</div>
+      <div class="composers">Foo, Bar, Baz</div>
+      <img class="button open" src="images/chevron-down.svg">
+      <img class="button close" src="images/chevron-up.svg">
+    </summary>
     <p>
       Un programme dont les morceaux ont été choisis pour des
       raisons en lien avec sa dénomination. Composé des œuvres
diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css
index e4b61f2..d21e899 100644
--- a/stylesheets/programmes.css
+++ b/stylesheets/programmes.css
@@ -15,19 +15,43 @@ details.program {
 }
 
 details.program > summary {
+    display: grid;
+    grid-template-columns: 4fr 5fr 4em;
+    line-height: 2em;
     list-style: none;
+    cursor: pointer;
 }
 details.program > summary::-webkit-details-marker {
     display: none;
 }
 
-details.program > summary:after {
-    position: absolute;
-    right: 1em;
-    content: '∨';
+details.program > summary > .name {
+    margin-left: 2em;
+    font-weight: bold;
+    color: #2f5597;
+}
+
+details.program[open] > summary > .name,
+details.program[open] > summary > .composers {
+    color: var(--gold);
 }
 
-details.program[open] > summary:after {
-    content: '∧';
+details.program > summary > img.button {
+    display: block;
+    width: 2em;
+    margin: auto 1em;
+}
+details.program > summary > img.button.close,
+details.program[open] > summary > img.button.open {
+    display: none;
+}
+details.program[open] > summary > img.button.close {
+    display: block;
+    position: absolute;
     bottom: 0;
+    right: 0;
+}
+
+details.program > summary ~ * {
+    margin-left: 2em;
 }