From 805619450545ef0e7b4bbc4d6549a0bb6f35997c Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 17 Jan 2021 22:35:47 +0100
Subject: Factor out some CSS in news page

---
 "actualit\303\251s.css" | 51 +++++++++++++++++++++++++------------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git "a/actualit\303\251s.css" "b/actualit\303\251s.css"
index d9f1fe0..9df8593 100644
--- "a/actualit\303\251s.css"
+++ "b/actualit\303\251s.css"
@@ -18,6 +18,27 @@
     background: darkblue;
 }
 
+.events {
+    display: grid;
+    grid-auto-rows: var(--cell-height);
+    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
+    grid-gap: 0.8em;
+}
+
+.event a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+}
+
+.event .summary {
+    font-weight: bold;
+    color: white;
+}
+
 @media (min-width: 40em) {
     main {
         display: grid;
@@ -29,20 +50,12 @@
     }
 
     .events {
-        display: grid;
-        grid-auto-rows: 12em;
-        grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
-        grid-gap: 0.8em;
+        --cell-width: 14em;
+        --cell-height: 12em;
     }
 
     .event a {
         position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-        text-decoration: none;
     }
 
     .event img {
@@ -61,8 +74,6 @@
     .event .summary {
         opacity: 0;
         z-index: 1;
-        font-weight: bold;
-        color: white;
         transition: 0.5s;
     }
 
@@ -82,23 +93,14 @@
     }
 
     .events {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
-        grid-gap: 0.8em;
-        grid-auto-rows: 8em;
+        --cell-width: 10em;
+        --cell-height: 8em;
     }
 
     .event {
         position: relative;
     }
 
-    .event a {
-        display: block;
-        width: 100%;
-        height: 100%;
-        text-decoration: none;
-    }
-
     .event img {
         object-position: center;
         object-fit: cover;
@@ -108,11 +110,10 @@
 
     .event .summary {
         position: absolute;
+        text-align: center;
         bottom: 0;
         margin: 0;
         width: 100%;
-        text-align: center;
-        color: white;
         background: #0008;
     }
 }
-- 
cgit v1.2.3