Always display copyright beneath concert photos on mobile

1 files changed, 21 insertions, 10 deletions

diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
index ac96122..7e04261 100644
--- a/stylesheets/concerts.css
+++ b/stylesheets/concerts.css
@@ -24,7 +24,6 @@ main h1 {
 
 .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;
 }
@@ -38,7 +37,7 @@ a.event {
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: 100%;
+    height: var(--cell-height);
     text-decoration: none;
 }
 
@@ -60,12 +59,7 @@ a.event {
     content: '© ';
 }
 .credits {
-    position: absolute;
-    bottom: 0;
-    right: 0;
     color: white;
-    background: #0008;
-    border-top-left-radius: 0.5em;
     padding: 0 0.2em;
     font-size: small;
 }
@@ -147,6 +141,14 @@ a.event {
         transition: 0.5s;
     }
 
+    .credits {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: #0008;
+        border-top-left-radius: 0.5em;
+    }
+
     .eventcontainer:not(.active):hover img,
     .eventcontainer:not(.active):focus-within img,
     .eventcontainer.active img {
@@ -180,6 +182,10 @@ a.event {
         --cell-height: 8em;
     }
 
+    .eventcontainer {
+        display: grid;
+    }
+
     .event .summary {
         align-self: flex-end;
 
@@ -191,11 +197,16 @@ a.event {
         background: #0008;
     }
     .eventcontainer.active > a.event .summary {
-        height: 100%;
+        align-self: stretch;
+        /* No idea why "100%" does not work here: */
+        height: var(--cell-height);
         justify-content: center;
     }
 
-    .eventcontainer:not(.active) .credits > span:only-child {
-        display: none;
+    .credits {
+        justify-self: end;
+        color: white;
+        background: #444;
+        border-radius: 0 0 0.5em 0.5em;
     }
 }