Add program page

Mostly copied from the news page.

1 files changed, 56 insertions, 0 deletions

diff --git a/programmes.css b/programmes.css
new file mode 100644
index 0000000..f7ce43e
--- /dev/null
+++ b/programmes.css
@@ -0,0 +1,56 @@
+main {
+    display: grid;
+    overflow: auto;
+    grid-template-columns: 50% 50%;
+}
+
+main > div {
+    padding: 2%;
+    overflow: auto;
+}
+
+#program-list, #program-details {
+    background-color: #dbb;
+}
+
+.programs {
+    display: grid;
+    grid-auto-rows: 14em;
+    grid-template-columns: repeat(auto-fit, 40%);
+    grid-gap: 0.8em;
+}
+
+.program {
+    position: relative;
+    background-color: #fb8;
+}
+
+.program a {
+    position: absolute;
+    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 summary .duration {
+    font-family: monospace;
+}