1 files changed, 50 insertions, 5 deletions
diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
index 25ec656..ee1be86 100644
--- a/stylesheets/actualités.css
+++ b/stylesheets/actualités.css
@@ -21,11 +21,11 @@
 .events {
     display: grid;
     grid-auto-rows: var(--cell-height);
-    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 0.5fr));
     grid-gap: 0.8em;
 }
 
-.event a {
+a.event {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -37,6 +37,47 @@
 .event .summary {
     font-weight: bold;
     color: white;
+    text-align: center;
+}
+
+#event-details {
+    /* Align with photos; #event-list h1 has font-size 2em and margin
+     * .67em; browsers default line-height to "roughly 1.2". */
+    margin-top: calc(2*0.67em + 2*1.2em);
+}
+
+.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;
 }
 
 @media (min-width: 40em) {
@@ -55,7 +96,7 @@
         --cell-height: 12em;
     }
 
-    .event a {
+    a.event {
         position: relative;
     }
 
@@ -68,7 +109,9 @@
         transition: 0.5s;
     }
 
-    .event:hover img {
+    .event:not(.active):hover img,
+    .event:not(.active):focus-within img,
+    .event.active img {
         filter: grayscale(0.8) brightness(0.4);
     }
 
@@ -78,7 +121,9 @@
         transition: 0.5s;
     }
 
-    .event:hover .summary {
+    .event:not(.active):hover .summary,
+    .event:not(.active):focus-within .summary,
+    .event.active .summary {
         opacity: 1;
     }
 }