quatuorbellefeuille.com

concerts.css (4037B)

---

 main h1 {
     color: var(--gold);
 }
 
 #event-list {
     max-height: 60vh;
     overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: black #ddd;
 }
 
 #event-list::-webkit-scrollbar {
     width: 0.25em;
     height: 0.25em;
 }
 
 #event-list::-webkit-scrollbar-track {
     background: #ddd;
 }
 
 #event-list::-webkit-scrollbar-thumb {
     background: black;
 }
 
 .events {
     display: grid;
     grid-gap: 0.8em;
 }
 
 .events.next {
     grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
 }
 
 .events.past {
     grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 0.5fr));
 }
 
 .event {
     position: relative;
 }
 
 a.thumbnail {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: var(--cell-height);
     text-decoration: none;
 }
 
 .thumbnail img {
     object-position: center;
     object-fit: cover;
     height: 100%;
     width: 100%;
     /* Make sure summary is visible when photo is not available. */
     background: black;
     color: white;
 }
 
 .thumbnail .summary {
     position: absolute;
     font-weight: bold;
     color: white;
     text-align: center;
 }
 
 .credits::before {
     content: '© ';
 }
 
 .event.canceled {
     opacity: 50%;
     transition: 0.5s;
 }
 .summary .canceled {
     display: block;
     color: red;
 }
 .event.canceled:hover,
 .event.canceled:focus-within,
 .event.canceled.active {
     opacity: 1;
 }
 
 .details > .detail {
     display: grid;
     grid-template-columns: 2em 1fr;
 }
 
 .detail.date::before {
     content: "📅";
 }
 .detail.time::before {
     content: "🕗";
 }
 .detail.place::before {
     content: "📌";
 }
 .detail.program::before {
     content: "🎼";
 }
 
 .details > .detail::before {
     grid-column: 1;
 }
 .details > .detail > * {
     grid-column: 2;
 }
 
 .detail.program {
     padding-left: 0;
     list-style: none;
 }
 
 .details.canceled > .canceled {
     color: red;
 }
 .details.canceled > :not(.canceled) {
     /* Make everything less opaque, except the "canceled" marker. */
     opacity: 50%;
 }
 
 @media (min-width: 50em) {
     main {
         /* Define thumbnail dimension here so that we can align stuff in
          * #event-details. */
         --cell-width: 14em;
         --cell-height: 12em;
 
         display: grid;
         grid-template-columns: 60% 40%;
     }
 
     main > div {
         padding-left: 1em;
         padding-right: 1em;
     }
 
     .thumbnail .summary {
         opacity: 0;
         transition: 0.5s;
     }
 
     .thumbnail img {
         transition: 0.5s;
     }
 
     .credits {
         position: absolute;
         bottom: 0;
         right: 0;
         font-size: small;
         color: white;
         background: #0008;
         padding: 0 0.2em;
         border-top-left-radius: 0.5em;
     }
 
     .event:hover img,
     .event:focus-within img,
     .event.active img {
         filter: grayscale(0.8) brightness(0.4);
     }
 
     .event:hover .summary,
     .event:focus-within .summary,
     .event.active .summary {
         opacity: 1;
     }
 
     .credits:not(:hover) > span:only-child {
         display: none;
     }
 
     /* Try to align with center of thumbnails. */
     #event-details > p.hint {
         margin-top: calc(
             /* h1: 1.4em (commun.css) with 2*.67em margins (default) */
             1.4 * (1em + 2*.67em)
             /* Half of grid height */
             + var(--cell-height) / 2
         );
     }
 }
 
 @media not all and (min-width: 50em) {
     .events {
         --cell-width: 10em;
         --cell-height: 8em;
     }
 
     .event {
         display: grid;
     }
 
     .thumbnail {
         position: relative;
     }
 
     .thumbnail .summary {
         bottom: 0;
         display: flex;
         /* Make sure "canceled" marker goes above summary. */
         flex-direction: column;
         width: 100%;
         margin: 0;
         background: #0008;
     }
     .event.active > a.thumbnail .summary {
         /* No idea why "100%" does not work here: */
         height: var(--cell-height);
         justify-content: center;
     }
 
     .credits {
         justify-self: end;
         font-size: x-small;
     }
 }