Move credits closer to photos in concerts page

1 files changed, 38 insertions, 27 deletions

diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
index b03bdc2..f732daa 100644
--- a/stylesheets/concerts.css
+++ b/stylesheets/concerts.css
@@ -29,8 +29,11 @@ main h1 {
     grid-gap: 0.8em;
 }
 
-a.event {
+.eventcontainer {
     position: relative;
+}
+
+a.event {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -40,7 +43,6 @@ a.event {
 }
 
 .event img {
-    position: absolute;
     object-position: center;
     object-fit: cover;
     height: 100%;
@@ -48,10 +50,24 @@ a.event {
 }
 
 .event .summary {
+    position: absolute;
     font-weight: bold;
     color: white;
     text-align: center;
-    z-index: 1;
+}
+
+.credits::before {
+    content: '© ';
+}
+.credits {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: white;
+    background: #0008;
+    border-bottom-left-radius: 0.5em;
+    padding: 0 0.2em;
+    font-size: small;
 }
 
 .event.canceled {
@@ -63,7 +79,7 @@ a.event {
     color: red;
 }
 .event.canceled:hover,
-.event.canceled.active {
+.eventcontainer.active .event.canceled {
     opacity: 1;
 }
 
@@ -97,10 +113,6 @@ a.event {
     list-style: none;
 }
 
-.photo-credits {
-    font-size: x-small;
-}
-
 .details.canceled > .canceled {
     color: red;
 }
@@ -135,17 +147,21 @@ a.event {
         transition: 0.5s;
     }
 
-    .event:not(.active):hover img,
-    .event:not(.active):focus-within img,
-    .event.active img {
+    .eventcontainer:not(.active):hover img,
+    .eventcontainer:not(.active):focus-within img,
+    .eventcontainer.active img {
         filter: grayscale(0.8) brightness(0.4);
     }
 
-    .event:not(.active):hover .summary,
-    .event:not(.active):focus-within .summary,
-    .event.active .summary {
+    .eventcontainer:not(.active):hover .summary,
+    .eventcontainer:not(.active):focus-within .summary,
+    .eventcontainer.active .summary {
         opacity: 1;
     }
+
+    .credits:not(:hover) > span:only-child {
+        display: none;
+    }
 }
 
 @media (max-width: 40em) {
@@ -154,23 +170,18 @@ a.event {
         --cell-height: 8em;
     }
 
-    a.event {
-        align-items: flex-end;
-    }
-    a.event.active {
-        align-items: stretch;
-    }
-
     .event .summary {
+        align-self: flex-end;
+
+        display: flex;
+        /* Make sure CANCELED block goes above summary. */
+        flex-direction: column;
+        width: 100%;
         margin: 0;
         background: #0008;
-        width: 100%;
     }
-    a.event.active .summary {
-        display: flex;
-        align-content: center;
+    .eventcontainer.active > a.event .summary {
+        height: 100%;
         justify-content: center;
-        /* Make sure CANCELED block goes above summary. */
-        flex-direction: column;
     }
 }