Change programs layout to collapsable rows

1 files changed, 99 insertions, 198 deletions

diff --git a/programmes.html b/programmes.html
index bce6afe..13f8c4d 100644
--- a/programmes.html
+++ b/programmes.html
@@ -1,203 +1,104 @@
 <main>
-  <div id="program-list">
-    <h1>Nos programmes</h1>
-    <div class="programs">
-      <div class="program">
-        <a href="#program-a">
-          <p class="summary">Programme A</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-b">
-          <p class="summary">Programme B</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-c">
-          <p class="summary">Programme C</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-d">
-          <p class="summary">Programme D</p>
-        </a>
-      </div>
-    </div>
-  </div>
+  <details class="program">
+    <summary>Programme A</summary>
+    <p>
+      Un programme qui est sacrément bien nommé, parce que son
+      contenu correspond tout à fait à ce qui vient en tête
+      quand on lit son nom. Composé des œuvres suivantes :
+    </p>
+    <ol>
+      <li>
+        <p>La première
+          <span class="duration">6min 11s 101ms</span></p>
+        <p>Composée par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>La seconde
+          <span class="duration">6min 22s 202ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>La troisième
+          <span class="duration">6min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 
-  <div id="program-details">
-    <div class="details" id="program-a">
-      <h1>Programme A</h1>
-      <p>
-        Un programme qui est sacrément bien nommé, parce que son
-        contenu correspond tout à fait à ce qui vient en tête
-        quand on lit son nom. Composé des œuvres suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">6min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La seconde
-              <span class="duration">6min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">6min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-b">
-      <h1>Programme B</h1>
-      <p>
-        Un programme qui comme son nom l'indique, rend hommage
-        à ce à quoi il fait référence. Composé des œuvres
-        suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">7min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La seconde
-              <span class="duration">7min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">7min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-c">
-      <h1>Programme C</h1>
-      <p>
-        Les morceaux de ce programme font référence à ceux à quoi
-        on peut s'attendre en lisant son nom. En voici la liste :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              Le premier
-              <span class="duration">8min 11s 101ms</span>
-            </summary>
-            Composé par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              Le second
-              <span class="duration">8min 22s 202ms</span>
-            </summary>
-            Composé par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              Le troisième
-              <span class="duration">8min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-d">
-      <h1>Programme D</h1>
-      <p>
-        Un programme dont les morceaux ont été choisis pour des
-        raisons en lien avec sa dénomination. Composé des œuvres
-        suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">9min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">9min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">9min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-  </div>
+  <details class="program">
+    <summary>Programme B</summary>
+    <p>
+      Un programme qui comme son nom l'indique, rend hommage
+      à ce à quoi il fait référence. Composé des œuvres
+      suivantes :
+    </p>
+    <ol>
+      <li>
+        <p>La première
+          <span class="duration">7min 11s 101ms</span></p>
+        <p>Composée par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>La seconde
+          <span class="duration">7min 22s 202ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>La troisième
+          <span class="duration">7min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 
-  <script>
-    // When JS is enabled, hide concert details by default, and
-    // allow the user to display concerts selectively.
-    var detailsStyle = document.createElement('style');
-    document.head.appendChild(detailsStyle);
-    detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
-
-    var anchor = document.location.hash;
-    if (anchor.match(/#program-/))
-        document.querySelector(anchor).classList.add('active');
-
-    document.querySelectorAll('.program a').forEach((link) => {
-        link.addEventListener('click', function(click) {
-            if (click.ctrlKey || click.shiftKey)
-                return;
-
-            var prev = document.querySelector('.details.active');
-            if (prev)
-                prev.classList.remove('active');
-            var id = link.attributes['href'].value;
-            document.querySelector(id).classList.add('active');
-        });
-    });
-  </script>
+  <details class="program">
+    <summary>Programme C</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 :
+    </p>
+    <ol>
+      <li>
+        <p>Le premier
+          <span class="duration">8min 11s 101ms</span></p>
+        <p>Composé par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>Le second
+          <span class="duration">8min 22s 202ms</span></p>
+        <p>Composé par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>Le troisième
+          <span class="duration">8min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 
+  <details class="program">
+    <summary>Programme D</summary>
+    <p>
+      Un programme dont les morceaux ont été choisis pour des
+      raisons en lien avec sa dénomination. Composé des œuvres
+      suivantes :
+    </p>
+    <ol>
+      <li>
+        <p>La première
+          <span class="duration">9min 11s 101ms</span></p>
+        <p>Composée par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>La première
+          <span class="duration">9min 22s 202ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>La troisième
+          <span class="duration">9min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 </main>