From 556d2b8ea56889f566d8ff3c7bd422e54da91265 Mon Sep 17 00:00:00 2001
From: Fabien Freling <public@ffreling.com>
Date: Mon, 28 Oct 2019 22:06:15 +0100
Subject: [PATCH] Center projects cell

---
 css/style.css | 102 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 65 insertions(+), 37 deletions(-)

diff --git a/css/style.css b/css/style.css
index 122c5f2..e6a2089 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,15 +1,15 @@
 :root {
-  --code-color: #eee8d5; /* gray (base2) */
+	--code-color: #eee8d5; /* gray (base2) */
 }
 
 body {
-    max-width: 800px;
-    font-family: sans-serif;
-    font-size: 12pt;
-    line-height: 1.4;
-    padding-left: 2ch;
-    padding-right: 3ch; /* for scrollbar */
-    margin: 0 auto;
+	max-width: 800px;
+	font-family: sans-serif;
+	font-size: 12pt;
+	line-height: 1.4;
+	padding-left: 2ch;
+	padding-right: 3ch; /* for scrollbar */
+	margin: 0 auto;
 	background-color: #fdf6e3;
 	color: #586e75; /*base01*/
 }
@@ -39,62 +39,90 @@ a {
 
 div#navigation {
 	background-color: #268bd2; /* blue */
-    text-align: center;
-    border-bottom: 4px solid black;
+	text-align: center;
+	border-bottom: 4px solid black;
 	text-transform: uppercase;
 	margin-bottom: 30px;
 }
 
 div#navigation a {
-    color: white;
-    text-decoration: none;
-    background-color: black;
-    padding: 3px 10px 3px 10px;
-    margin: 0px 10px 0px 10px;
+	color: white;
+	text-decoration: none;
+	background-color: black;
+	padding: 3px 10px 3px 10px;
+	margin: 0px 10px 0px 10px;
 }
 
 p.date {
-    font-style: italic;
+	font-style: italic;
 }
 
 p.repository {
-    background-color: var(--code-color);
-    padding: 10px 10px 10px 10px;
+	background-color: var(--code-color);
+	padding: 10px 10px 10px 10px;
 }
 
 pre {
-    background-color: var(--code-color);
-    padding: 10px 10px 10px 10px;
-    font-size: 11pt;
+	background-color: var(--code-color);
+	padding: 10px 10px 10px 10px;
+	font-size: 11pt;
 }
 
 blockquote {
-    background-color: var(--code-color);
-    padding: 10px 10px 10px 10px;
+	background-color: var(--code-color);
+	padding: 10px 10px 10px 10px;
 }
 
 code {
-    background-color: var(--code-color);
+	background-color: var(--code-color);
+}
+
+div.projects {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-auto-rows: minmax(100px, auto);
+	gap: 10px;
+	grid-gap: var(gap); /* fallback */
+
+	list-style: none;
+	padding-left: 0;
+	font-size: 14pt;
+}
+
+div.item {
+	display: grid;
+	text-align: center;
+	align-items: center;
+	border: 1pt solid #ddd;
+	height: 100%;
+	text-transform: uppercase;
 }
 
 ul.projects {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    grid-auto-rows: minmax(100px, auto);
-    gap: 10px;
-    grid-gap: var(gap); /* fallback */
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-auto-rows: minmax(100px, auto);
+	gap: 10px;
+	grid-gap: var(gap); /* fallback */
 
-    list-style: none;
-    padding-left: 0;
-    font-size: 14pt;
+	list-style: none;
+	padding-left: 0;
+	font-size: 13pt;
 }
 
 ul.projects a {
-    display: block;
-    border: 1pt solid #ddd;
-    height: 100%;
-    text-align: center;
-    text-transform: uppercase;
+	display: grid;
+	align-items: center;
+	border: 1pt solid #ddd;
+	height: 100%;
+
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: bold;
+	text-shadow: 0 0 1em white;
+
+	background-size: cover;
+	background-position: center;
 }
 
 #footer {