From b977d7a7abfb89ce8259c01a4b010d6d26f67768 Mon Sep 17 00:00:00 2001
From: Romain de Laage <romain.delaage@rdelaage.ovh>
Date: Wed, 19 Feb 2020 14:44:22 +0100
Subject: [PATCH] Improved responsive

---
 style.css | 108 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 76 insertions(+), 32 deletions(-)

diff --git a/style.css b/style.css
index 3ffd5e2..baf4b6f 100644
--- a/style.css
+++ b/style.css
@@ -91,37 +91,81 @@ table{
 	border-collapse: separate;
 	border-spacing: 0;
 }
-table td, table th{
-	border: solid #C0C0C0 1px;
-	border-bottom: none;
-	border-right: none;
-	padding: 10px;
-	transition: 0.3s;
+@media screen and (min-width: 800px){
+	td, th{
+		border: solid #C0C0C0 1px;
+		border-bottom: none;
+		border-right: none;
+		padding: 10px;
+		transition: 0.3s;
+	}
+	tr:last-child td, tr:last-child th{
+		border-bottom: solid #C0C0C0 1px;
+	}
+	td:last-child, th:last-child{
+		border-right: solid #C0C0C0 1px;
+	}
+	tr:first-child td:first-child, tr:first-child th:first-child{
+		border-radius: 15px 0 0 0;
+	}
+	tr:first-child td:last-child, tr:first-child th:last-child{
+		border-radius: 0 15px 0 0;
+	}
+	tr:last-child td:last-child, tr:last-child th:last-child{
+		border-radius: 0 0 15px 0;
+	}
+	tr:last-child td:first-child, tr:last-child th:first-child{
+		border-radius: 0 0 0 15px;
+	}
+	tr:nth-child(2n) td, tr:nth-child(2n) th{
+		background-color: rgba(255, 255, 255, 0.05);
+	}
+	tr:hover td, tr:hover th{
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+	tr:hover td:hover, tr:hover th:hover{
+		background-color: rgba(255, 255, 255, 0.4);
+	}
 }
-tr:last-child td, tr:last-child th{
-	border-bottom: solid #C0C0C0 1px;
-}
-td:last-child, th:last-child{
-	border-right: solid #C0C0C0 1px;
-}
-tr:first-child td:first-child, tr:first-child th:first-child{
-	border-radius: 15px 0 0 0;
-}
-tr:first-child td:last-child, tr:first-child th:last-child{
-	border-radius: 0 15px 0 0;
-}
-tr:last-child td:last-child, tr:last-child th:last-child{
-	border-radius: 0 0 15px 0;
-}
-tr:last-child td:first-child, tr:last-child th:first-child{
-	border-radius: 0 0 0 15px;
-}
-tr:nth-child(2n) td, tr:nth-child(2n) th{
-	background-color: rgba(255, 255, 255, 0.05);
-}
-tr:hover td, tr:hover th{
-	background-color: rgba(255, 255, 255, 0.2);
-}
-tr:hover td:hover, tr:hover th:hover{
-	background-color: rgba(255, 255, 255, 0.4);
+@media screen and (max-width: 800px){
+	header{
+		height: initial;
+		line-height: initial;
+	}
+	footer{
+		height: initial;
+		line-height: initial;
+	}
+	nav{
+		width: 100%;
+		height: initial;
+	}
+	nav .logo{
+		display: none;
+	}
+	section{
+		width: 100%;
+		height: initial;
+	}
+	table{	
+		width: 100%;
+	}
+	td{
+		border: dashed #C0C0C0 1px;
+	}
+	th{
+		border: solid #C0C0C0 1px;
+	}
+	td, th{
+		display: block;
+		border-bottom: none;
+		text-align: center;
+	}
+	tr:last-child td:last-child, tr:last-child th:last-child{
+		border-bottom: solid #C0C0C0 1px;
+		border-radius: 0 0 15px 15px;
+	}
+	tr:first-child td:first-child, tr:first-child th:first-child{
+		border-radius: 15px 15px 0 0;
+	}
 }