Change programs layout to collapsable rows

1 files changed, 20 insertions, 65 deletions

diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css
index 88591c6..e4b61f2 100644
--- a/stylesheets/programmes.css
+++ b/stylesheets/programmes.css
@@ -1,78 +1,33 @@
-#program-list {
-    max-height: 60vh;
-    overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: darkblue #8ad;
-}
-
-#program-list::-webkit-scrollbar {
-    width: 0.25em;
-    height: 0.25em;
-}
-
-#program-list::-webkit-scrollbar-track {
-    background: #8ad;
-}
-
-#program-list::-webkit-scrollbar-thumb {
-    background: darkblue;
-}
-
-.programs {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
-    grid-auto-rows: var(--cell-height);
-    grid-gap: 0.8em;
+@media (min-width: 40em) {
+    main {
+        margin: 4em;
+    }
 }
 
-.program {
-    background-color: #099;
+details.program:first-child {
+    border-top: 1px solid black;
 }
 
-.program a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+details.program {
+    position: relative;
     width: 100%;
-    height: 100%;
-    color: inherit;
-    text-decoration: none;
+    border-bottom: 1px solid black;
 }
 
-.program .summary {
-    font-weight: bold;
+details.program > summary {
+    list-style: none;
 }
-
-details summary .duration {
-    font-family: monospace;
+details.program > summary::-webkit-details-marker {
+    display: none;
 }
 
-@media (min-width: 40em) {
-    main {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
-
-    .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;
-    }
+details.program > summary:after {
+    position: absolute;
+    right: 1em;
+    content: '∨';
 }
 
-@media (max-width: 40em) {
-    .programs {
-        --cell-width: 8em;
-        --cell-height: 4em;
-    }
+details.program[open] > summary:after {
+    content: '∧';
+    bottom: 0;
 }