Factor out some CSS in programs page

1 files changed, 29 insertions, 47 deletions

diff --git a/programmes.css b/programmes.css
index 4cb9cb9..87ead6c 100644
--- a/programmes.css
+++ b/programmes.css
@@ -18,6 +18,31 @@
     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;
+}
+
+.program {
+    background-color: #099;
+}
+
+.program a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    text-decoration: none;
+}
+
+.program .summary {
+    font-weight: bold;
+}
+
 details summary .duration {
     font-family: monospace;
 }
@@ -33,41 +58,17 @@ details summary .duration {
     }
 
     .programs {
-        display: grid;
-        grid-auto-rows: 10em;
-        grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
-        grid-gap: 0.8em;
-    }
-
-    .program {
-        background-color: #099;
+        --cell-width: 10em;
+        --cell-height: 10em;
     }
 
     .program a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-        text-decoration: none;
-        color: inherit;
         transition: color 0.5s;
     }
-
     .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;
     }
@@ -80,26 +81,7 @@ details summary .duration {
     }
 
     .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;
+        --cell-width: 8em;
+        --cell-height: 4em;
     }
 }