From 1aae4345fb0e84b989e05b73040974f62ffee413 Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+lilman@gmail.com>
Date: Tue, 16 Aug 2022 15:25:32 +0100
Subject: [PATCH] Style tables

- Add colour/styling to table
- Change SoC table to be full width
---
 blog/vm-seperation-of-concerns.html | 22 +++++++++++-----------
 main.css                            | 20 ++++++++++++++++++++
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/blog/vm-seperation-of-concerns.html b/blog/vm-seperation-of-concerns.html
index c48425b..839d4ee 100644
--- a/blog/vm-seperation-of-concerns.html
+++ b/blog/vm-seperation-of-concerns.html
@@ -38,36 +38,36 @@
 				<p>Some people will seperate each service into their own VM, however I don't believe this to be efficient (in all cases).</p>
 				<p>What I recommend is to take your server needs, and break them down into logical blocks, adding each of these blocks to their own VMs. This will keep certain things contained alone, as you want them seperated as much as possible (NAS, etc).</p>
 				<table>
-					<thead><tr><th>Concern/VM</th><th>Services</th></tr></thead>
+					<thead><tr><th colspan="2">Concern/VM</th><th colspan="5">Services</th></tr></thead>
 					<tbody>
 						<tr>
-							<th>Production Web Server</th>
+							<th colspan="2">Production Web Server</th>
 							<td>Nginx</td>
 							<td>PHP</td>
-							<td>CertBot</td>
+							<td colspan="5">CertBot</td>
 						</tr>
 						<tr>
-							<th>Staging Web Server</th>
+							<th colspan="2">Staging Web Server</th>
 							<td>Nginx</td>
 							<td>PHP</td>
 							<td>CertBot</td>
-							<td>mariaDB</td>
+							<td colspan="5">mariaDB</td>
 						</tr>
 						<tr>
-							<th>NAS</th>
-							<td>OpenMediaVault</td>
+							<th colspan="2">NAS</th>
+							<td colspan="5">OpenMediaVault</td>
 						</tr>
 						<tr>
-							<th>SQL server</th>
-							<td>mariaDB</td>
+							<th colspan="2">SQL server</th>
+							<td colspan="5">mariaDB</td>
 						</tr>
 						<tr>
-							<th>Torrent Box</th>
+							<th colspan="2">Torrent Box</th>
 							<td>Transmission</td>
 							<td>VPN (to external)</td>
 							<td>Sonarr</td>
 							<td>Radarr</td>
-							<td>Ombi</td>
+							<td colspan="5">Ombi</td>
 						</tr>
 					</tbody>
 				</table>
diff --git a/main.css b/main.css
index 1811aad..b33eb3e 100644
--- a/main.css
+++ b/main.css
@@ -37,6 +37,26 @@ pre{
 	padding: 12px;
 }
 
+/* Table Design */
+table{
+	text-align: left;
+	width: 100%;
+	border-collapse: collapse;
+}
+td, th{
+	border: 1px solid #222;
+	padding: 9px 6px;
+}
+th{
+	padding: 12px;
+	color: white;
+}
+thead th{ background-color: #191919; }
+tbody th{ background-color: #292929; }
+
+tr:nth-child(even){ background-color: #FEFEFE; }
+tr:hover{ background-color: #DEDEDE; }
+
 /* Special Design */
 .tag{
 	font-size: 0.8rem;