quatuorbellefeuille.com

Content, build scripts and admin scripts for the Bellefeuille Quartet website.
git clone https://git.kevinlegouguec.net/quatuorbellefeuille.com
Log | Files | Refs

programmes.css (2029B)

      1 @media (min-width: 50em) {
      2     main {
      3         margin: 2em 4em 0 4em;
      4     }
      5     details.program > summary > .name,
      6     details.program > summary ~ * {
      7         margin-left: 2em;
      8     }
      9 }
     10 
     11 details.program:first-child {
     12     border-top: 1px solid black;
     13 }
     14 
     15 details.program {
     16     position: relative;
     17     width: 100%;
     18     border-bottom: 1px solid black;
     19 }
     20 
     21 details.program > summary {
     22     display: grid;
     23     grid-template-columns: 4fr 5fr 4em;
     24     grid-gap: 0.8em;
     25     align-items: center;        /* Handle sub/superscripts. */
     26     line-height: 2em;
     27     list-style: none;
     28     cursor: pointer;
     29 }
     30 details.program > summary::-webkit-details-marker {
     31     display: none;
     32 }
     33 
     34 /* Disable Chrome's outline; we already highlight this block
     35    prominently enough IMO. */
     36 details.program > summary:focus {
     37     outline: none;
     38 }
     39 
     40 details.program > summary > .name,
     41 details.program[open] > summary,
     42 details.program > summary:focus {
     43     color: #1f4e79;
     44     font-weight: bold;
     45 }
     46 
     47 details.program > summary > img.button {
     48     display: block;
     49     width: 2em;
     50     margin: auto 1em;
     51 }
     52 details.program > summary > img.button.close,
     53 details.program[open] > summary > img.button.open {
     54     display: none;
     55 }
     56 details.program[open] > summary > img.button.close {
     57     display: block;
     58     position: absolute;
     59     bottom: 0;
     60     right: 0;
     61 }
     62 
     63 .info {
     64     display: grid;
     65     grid-template-columns: 2em 1fr;
     66 }
     67 .info.duration::before {
     68     content: "🕑";
     69 }
     70 .info.pieces::before {
     71     content: "🎼";
     72 }
     73 .info::before {
     74     grid-column: 1;
     75 }
     76 .info > * {
     77     grid-column: 2;
     78 }
     79 
     80 details.program > *:nth-child(3) {
     81     color: var(--gold);
     82     font-weight: 600;
     83 }
     84 
     85 html[lang=fr] details.program blockquote {
     86     quotes: "« " " »"; /* No idea why browsers don't add spaces by default. */
     87 }
     88 
     89 details.program blockquote p::before {
     90     content: open-quote;
     91 }
     92 details.program blockquote p::after {
     93     content: close-quote;
     94 }
     95 
     96 ol.info.pieces {
     97     list-style: none;
     98     padding-left: 0;
     99 }
    100 
    101 ol.info.pieces > li.intermission {
    102     margin-left: 4em;
    103     font-style: italic;
    104 }