Merge branch 'mobile'

1 files changed, 43 insertions, 28 deletions

diff --git a/programmes.css b/programmes.css
index 95907ac..87ead6c 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;
 }
@@ -29,8 +20,8 @@ main > div {
 
 .programs {
     display: grid;
-    grid-auto-rows: 10em;
-    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
+    grid-auto-rows: var(--cell-height);
     grid-gap: 0.8em;
 }
 
@@ -40,33 +31,57 @@ main > div {
 
 .program a {
     display: flex;
-    align-items: center;
     justify-content: center;
-    height: 100%;
+    align-items: center;
     width: 100%;
-    text-decoration: none;
+    height: 100%;
     color: inherit;
-    transition: color 0.5s;
-}
-
-.program:hover a {
-    color: white;
+    text-decoration: none;
 }
 
 .program .summary {
     font-weight: bold;
-    text-align: center;
-    transition: 0.5s;
-}
-
-.program:hover .summary {
-    opacity: 1;
 }
 
 details summary .duration {
     font-family: monospace;
 }
 
-.details.active > *:first-child {
-    margin-top: 0;
+@media (min-width: 40em) {
+    main {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    main > div {
+        padding: 1em;
+    }
+
+    .programs {
+        --cell-width: 10em;
+        --cell-height: 10em;
+    }
+
+    .program a {
+        transition: color 0.5s;
+    }
+    .program:hover a {
+        color: white;
+    }
+
+    .details.active > *:first-child {
+        margin-top: 0;
+    }
+}
+
+@media (max-width: 40em) {
+    main {
+        padding-left: 0.8em;
+        padding-right: 0.8em;
+    }
+
+    .programs {
+        --cell-width: 8em;
+        --cell-height: 4em;
+    }
 }