From 21527466ce558ea6b1fea9f64dfabb0abafd4dd9 Mon Sep 17 00:00:00 2001
From: Fabien Freling <public@ffreling.com>
Date: Tue, 11 Jun 2019 13:56:18 +0200
Subject: [PATCH] Use grid for projects listing

---
 css/style.css | 40 ++++++++++------------------------------
 projects.md   | 14 +++++++-------
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/css/style.css b/css/style.css
index 117cd55..6210474 100644
--- a/css/style.css
+++ b/css/style.css
@@ -95,38 +95,18 @@ div#fabs-icon a:hover {
 	color: #268bd2;
 }
 
-ul#projects {
-	margin: 1em 0;
-	list-style: none;
-	padding-left: 0;
-	margin-left: 0;
-	display: block;
-	text-align: center;
-}
- 
-#projects li {
-/*	display: inline;
-*/	display: block;
-}
- 
-#projects li a {
-	list-style: none;
-	display: block;
-	margin: 1em 4em 1em 4em;
-	padding: 1em 1em 1em 10em;
-	border: 1px solid #ddd;
-	font-family: Helvetica, sans-serif;
-/*	font-size: 11px;
-*/	text-transform: uppercase;
-	color: #666;
-	text-decoration: none;
-	text-align: left;
-	background-position: 2em;
+.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 */
 }
 
-#projects li a:hover {
-	background-position: 2em;
-	border: 1px solid #ccc;
+.project {
+    border: 1pt solid #ddd;
+    font-size: 14pt;
+    text-align: center;
 }
 
 #footer {
diff --git a/projects.md b/projects.md
index ce52900..7a7ea13 100644
--- a/projects.md
+++ b/projects.md
@@ -2,10 +2,10 @@
 title: Projects
 ---
 
-<ul id="projects">
-<li><a href="projects/oboy/index.html">OBoy</a></li>
-<li><a href="projects/trailr/index.html">Trailr</a></li>
-<li><a href="projects/whereiscar/index.html">Where is my car?</a></li>
-<li><a href="projects/maestro/index.html">Maestro</a></li>
-<li><a href="projects/dawnchaos/index.html">Dawn of Chaos</a></li>
-</ul>
+<div class="projects">
+<div class="project"><a href="projects/oboy/index.html">OBoy</a></div>
+<div class="project"><a href="projects/trailr/index.html">Trailr</a></div>
+<div class="project"><a href="projects/whereiscar/index.html">Where is my car?</a></div>
+<div class="project"><a href="projects/maestro/index.html">Maestro</a></div>
+<div class="project"><a href="projects/dawnchaos/index.html">Dawn of Chaos</a></div>
+</div>