Improve news & program pages on mobile

2 files changed, 167 insertions, 90 deletions

diff --git a/actualités.css b/actualités.css
index 26e147e..d9f1fe0 100644
--- a/actualités.css
+++ b/actualités.css
@@ -1,15 +1,6 @@
-main {
-    display: grid;
-    grid-template-columns: 60% 40%;
-}
-
-main > div {
-    padding: 1em;
-    overflow: auto;
-}
-
 #event-list {
     max-height: 60vh;
+    overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: darkblue #8ad;
 }
@@ -27,48 +18,101 @@ main > div {
     background: darkblue;
 }
 
-.events {
-    display: grid;
-    grid-auto-rows: 12em;
-    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
-    grid-gap: 0.8em;
-}
+@media (min-width: 40em) {
+    main {
+        display: grid;
+        grid-template-columns: 60% 40%;
+    }
 
-.event a {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    text-decoration: none;
-}
+    main > div {
+        padding: 1em;
+    }
 
-.event img {
-    position: absolute;
-    object-position: center;
-    object-fit: cover;
-    height: 100%;
-    width: 100%;
-    transition: 0.5s;
-}
+    .events {
+        display: grid;
+        grid-auto-rows: 12em;
+        grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
+        grid-gap: 0.8em;
+    }
 
-.event:hover img {
-    filter: grayscale(0.8) brightness(0.4);
-}
+    .event a {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        text-decoration: none;
+    }
 
-.event .summary {
-    opacity: 0;
-    z-index: 1;
-    font-weight: bold;
-    color: white;
-    transition: 0.5s;
-}
+    .event img {
+        position: absolute;
+        object-position: center;
+        object-fit: cover;
+        height: 100%;
+        width: 100%;
+        transition: 0.5s;
+    }
+
+    .event:hover img {
+        filter: grayscale(0.8) brightness(0.4);
+    }
+
+    .event .summary {
+        opacity: 0;
+        z-index: 1;
+        font-weight: bold;
+        color: white;
+        transition: 0.5s;
+    }
 
-.event:hover .summary {
-    opacity: 1;
+    .event:hover .summary {
+        opacity: 1;
+    }
+
+    .details.active > *:first-child {
+        margin-top: 0;
+    }
 }
 
-.details.active > *:first-child {
-    margin-top: 0;
+@media (max-width: 40em) {
+    main {
+        padding-left: 0.8em;
+        padding-right: 0.8em;
+    }
+
+    .events {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+        grid-gap: 0.8em;
+        grid-auto-rows: 8em;
+    }
+
+    .event {
+        position: relative;
+    }
+
+    .event a {
+        display: block;
+        width: 100%;
+        height: 100%;
+        text-decoration: none;
+    }
+
+    .event img {
+        object-position: center;
+        object-fit: cover;
+        height: 100%;
+        width: 100%;
+    }
+
+    .event .summary {
+        position: absolute;
+        bottom: 0;
+        margin: 0;
+        width: 100%;
+        text-align: center;
+        color: white;
+        background: #0008;
+    }
 }
diff --git a/programmes.css b/programmes.css
index 95907ac..4cb9cb9 100644
--- a/programmes.css
+++ b/programmes.css
@@ -1,15 +1,6 @@
-main {
-    display: grid;
-    grid-template-columns: 50% 50%;
-}
-
-main > div {
-    padding: 1em;
-    overflow: auto;
-}
-
 #program-list {
     max-height: 60vh;
+    overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: darkblue #8ad;
 }
@@ -27,46 +18,88 @@ main > div {
     background: darkblue;
 }
 
-.programs {
-    display: grid;
-    grid-auto-rows: 10em;
-    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
-    grid-gap: 0.8em;
+details summary .duration {
+    font-family: monospace;
 }
 
-.program {
-    background-color: #099;
-}
+@media (min-width: 40em) {
+    main {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
 
-.program a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    text-decoration: none;
-    color: inherit;
-    transition: color 0.5s;
-}
+    main > div {
+        padding: 1em;
+    }
 
-.program:hover a {
-    color: white;
-}
+    .programs {
+        display: grid;
+        grid-auto-rows: 10em;
+        grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+        grid-gap: 0.8em;
+    }
 
-.program .summary {
-    font-weight: bold;
-    text-align: center;
-    transition: 0.5s;
-}
+    .program {
+        background-color: #099;
+    }
 
-.program:hover .summary {
-    opacity: 1;
-}
+    .program a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        text-decoration: none;
+        color: inherit;
+        transition: color 0.5s;
+    }
 
-details summary .duration {
-    font-family: monospace;
+    .program:hover a {
+        color: white;
+    }
+
+    .program .summary {
+        font-weight: bold;
+        text-align: center;
+        transition: 0.5s;
+    }
+
+    .program:hover .summary {
+        opacity: 1;
+    }
+
+    .details.active > *:first-child {
+        margin-top: 0;
+    }
 }
 
-.details.active > *:first-child {
-    margin-top: 0;
+@media (max-width: 40em) {
+    main {
+        padding-left: 0.8em;
+        padding-right: 0.8em;
+    }
+
+    .programs {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
+        grid-gap: 0.8em;
+        grid-auto-rows: 4em;
+    }
+
+    .program {
+        background-color: #099;
+    }
+
+    .program a {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+    }
+
+    .program .summary {
+        font-weight: bold;
+    }
 }