diff options
| -rw-r--r-- | programmes.html | 297 | ||||
| -rw-r--r-- | stylesheets/programmes.css | 85 |
2 files changed, 119 insertions, 263 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> diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css index 88591c6..e4b61f2 100644 --- a/stylesheets/programmes.css +++ b/stylesheets/programmes.css @@ -1,78 +1,33 @@ -#program-list { - max-height: 60vh; - overflow: auto; - scrollbar-width: thin; - scrollbar-color: darkblue #8ad; -} - -#program-list::-webkit-scrollbar { - width: 0.25em; - height: 0.25em; -} - -#program-list::-webkit-scrollbar-track { - background: #8ad; -} - -#program-list::-webkit-scrollbar-thumb { - background: darkblue; -} - -.programs { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); - grid-auto-rows: var(--cell-height); - grid-gap: 0.8em; +@media (min-width: 40em) { + main { + margin: 4em; + } } -.program { - background-color: #099; +details.program:first-child { + border-top: 1px solid black; } -.program a { - display: flex; - justify-content: center; - align-items: center; +details.program { + position: relative; width: 100%; - height: 100%; - color: inherit; - text-decoration: none; + border-bottom: 1px solid black; } -.program .summary { - font-weight: bold; +details.program > summary { + list-style: none; } - -details summary .duration { - font-family: monospace; +details.program > summary::-webkit-details-marker { + display: none; } -@media (min-width: 40em) { - main { - display: grid; - grid-template-columns: 50% 50%; - } - - .programs { - --cell-width: 10em; - --cell-height: 10em; - } - - .program a { - transition: color 0.5s; - } - .program:hover a { - color: white; - } - - .details.active > *:first-child { - margin-top: 0; - } +details.program > summary:after { + position: absolute; + right: 1em; + content: '∨'; } -@media (max-width: 40em) { - .programs { - --cell-width: 8em; - --cell-height: 4em; - } +details.program[open] > summary:after { + content: '∧'; + bottom: 0; } |