Style programs up a bit

1 files changed, 30 insertions, 6 deletions

diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css
index e4b61f2..d21e899 100644
--- a/stylesheets/programmes.css
+++ b/stylesheets/programmes.css
@@ -15,19 +15,43 @@ details.program {
 }
 
 details.program > summary {
+    display: grid;
+    grid-template-columns: 4fr 5fr 4em;
+    line-height: 2em;
     list-style: none;
+    cursor: pointer;
 }
 details.program > summary::-webkit-details-marker {
     display: none;
 }
 
-details.program > summary:after {
-    position: absolute;
-    right: 1em;
-    content: '∨';
+details.program > summary > .name {
+    margin-left: 2em;
+    font-weight: bold;
+    color: #2f5597;
+}
+
+details.program[open] > summary > .name,
+details.program[open] > summary > .composers {
+    color: var(--gold);
 }
 
-details.program[open] > summary:after {
-    content: '∧';
+details.program > summary > img.button {
+    display: block;
+    width: 2em;
+    margin: auto 1em;
+}
+details.program > summary > img.button.close,
+details.program[open] > summary > img.button.open {
+    display: none;
+}
+details.program[open] > summary > img.button.close {
+    display: block;
+    position: absolute;
     bottom: 0;
+    right: 0;
+}
+
+details.program > summary ~ * {
+    margin-left: 2em;
 }