1 files changed, 179 insertions, 0 deletions
diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
new file mode 100644
index 0000000..9df1ed9
--- /dev/null
+++ b/stylesheets/concerts.css
@@ -0,0 +1,179 @@
+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-auto-rows: var(--cell-height);
+    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 0.5fr));
+    grid-gap: 0.8em;
+}
+
+a.event {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+}
+
+.event img {
+    position: absolute;
+    object-position: center;
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+}
+
+.event .summary {
+    font-weight: bold;
+    color: white;
+    text-align: center;
+    z-index: 1;
+}
+
+.event.canceled {
+    opacity: 50%;
+    transition: 0.5s;
+}
+.event.canceled .summary::before {
+    display: block;
+    content: "ANNULÉ";
+    color: red;
+}
+.event.canceled:hover,
+.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;
+}
+
+.photo-credits {
+    font-size: x-small;
+}
+
+.details.canceled::before {
+    display: block;
+    content: "ANNULÉ";
+    color: red;
+}
+
+.details.canceled .detail,
+.details.canceled .more {
+    opacity: 50%;
+}
+
+@media (min-width: 40em) {
+    main {
+        display: grid;
+        grid-template-columns: 60% 40%;
+    }
+
+    main > div {
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    .events {
+        --cell-width: 14em;
+        --cell-height: 12em;
+    }
+
+    .event .summary {
+        opacity: 0;
+        transition: 0.5s;
+    }
+
+    .event img {
+        transition: 0.5s;
+    }
+
+    .event:not(.active):hover img,
+    .event:not(.active):focus-within img,
+    .event.active img {
+        filter: grayscale(0.8) brightness(0.4);
+    }
+
+    .event:not(.active):hover .summary,
+    .event:not(.active):focus-within .summary,
+    .event.active .summary {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 40em) {
+    .events {
+        --cell-width: 10em;
+        --cell-height: 8em;
+    }
+
+    a.event {
+        align-items: flex-end;
+    }
+    a.event.active {
+        align-items: stretch;
+    }
+
+    .event .summary {
+        margin: 0;
+        background: #0008;
+        width: 100%;
+    }
+    a.event.active .summary {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        /* Make sure CANCELED block goes above summary. */
+        flex-direction: column;
+    }
+}