diff options
| -rw-r--r-- | actualités.html | 1 | ||||
| -rw-r--r-- | programmes.css | 56 | ||||
| -rw-r--r-- | programmes.html | 251 |
3 files changed, 307 insertions, 1 deletions
diff --git a/actualités.html b/actualités.html index 0d14cfa..57cbaf1 100644 --- a/actualités.html +++ b/actualités.html @@ -233,7 +233,6 @@ </div> </div> - <!-- TODO: prevent scroll when clicking on overflowing details --> <script> // When JS is enabled, hide concert details by default, and // allow the user to display concerts selectively. diff --git a/programmes.css b/programmes.css new file mode 100644 index 0000000..f7ce43e --- /dev/null +++ b/programmes.css @@ -0,0 +1,56 @@ +main { + display: grid; + overflow: auto; + grid-template-columns: 50% 50%; +} + +main > div { + padding: 2%; + overflow: auto; +} + +#program-list, #program-details { + background-color: #dbb; +} + +.programs { + display: grid; + grid-auto-rows: 14em; + grid-template-columns: repeat(auto-fit, 40%); + grid-gap: 0.8em; +} + +.program { + position: relative; + background-color: #fb8; +} + +.program a { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + text-decoration: none; + color: inherit; + transition: color 0.5s; +} + +.program:hover a { + color: white; +} + +.program .summary { + font-weight: bold; + text-align: center; + transition: 0.5s; +} + +.program:hover .summary { + opacity: 1; +} + +details summary .duration { + font-family: monospace; +} diff --git a/programmes.html b/programmes.html new file mode 100644 index 0000000..d762219 --- /dev/null +++ b/programmes.html @@ -0,0 +1,251 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="utf-8"> + <title>Programmes - Quatuor Camelot</title> + <link rel="stylesheet" href="commun.css"> + <link rel="stylesheet" href="programmes.css"> + </head> + <body> + <header class="banner"> + + <div class="brand"> + <a href="index.html"> + <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png" + alt="logo"> + <h1 class="qname">Quatuor Camelot</h1> + </a> + </div> + + <nav> + <ol> + <li><a href="quatuor.html">Le quatuor</a></li> + <li><a href="actualités.html">Actualités</a></li> + <li class="current"><a href="programmes.html">Programmes</a></li> + <li><a href="médias.html">Médias</a></li> + </ol> + </nav> + + <div class="lang"> + EN + </div> + + </header> + + <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> + + <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> + + <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> + + </main> + + <footer class="social"> + <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg"> + <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg"> + <p class="contact"> + <a href="contact.html">Contact</a> + </p> + </footer> + + <footer class="legal"> + <p>Mentions légales - Plan du site</p> + </footer> + </body> +</html> |