Replaced contact flex with table, obscurified emails and updated table styling

1 files changed, 21 insertions, 19 deletions

diff --git a/src/about/index.md b/src/about/index.md
index de34872..ba01d27 100644
--- a/src/about/index.md
+++ b/src/about/index.md
@@ -50,23 +50,25 @@ I have been using *Linux-based* operating systems for the past year and a half:
 ---
 ---
 
-<div id="contact-flex">
-	<div>
-		<div class="contact-card-title">
-			Casual
-		</div>
-		<div class="contact-card-content">
-			<strong>Email</strong></br><a href="mailto:syndamia@protonmail.com">syndamia@protonmail.com</a></br>
-		</div>
-	</div>
-	<div>
-		<div class="contact-card-title">
-			Work
-		</div>
-		<div class="contact-card-content">
-			<strong>Email</strong></br><a href="mailto:kamen.d.mladenov@protonmail.com">kamen.d.mladenov@protonmail.com</a></br>
-			<strong>LinkedIn</strong></br><a href="https://www.linkedin.com/in/kamen-mladenov/">kamen-mladenov</a></br>
-		</div>
-	</div>
+<table>
+	<tr>
+		<td>Casual</td>
+		<td>Work</td>
+	</tr>
+	<tr>
+		<!-- http://www.wbwip.com/wbw/emailencoder.html -->
+		<td>
+			<strong>Email</strong></br>
+			<a class="borderless" href="mailto:&#115;&#121;&#110;&#100;&#097;&#109;&#105;&#097;&#064;&#112;&#114;&#111;&#116;&#111;&#110;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;">&#115;&#121;&#110;&#100;&#097;&#109;&#105;&#097;&#064;&#112;&#114;&#111;&#116;&#111;&#110;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a>
+		</td>
+		<td>
+			<strong>Email</strong></br>
+			<a class="borderless" href="mailto:&#107;&#097;&#109;&#101;&#110;&#046;&#100;&#046;&#109;&#108;&#097;&#100;&#101;&#110;&#111;&#118;&#064;&#112;&#114;&#111;&#116;&#111;&#110;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;">&#107;&#097;&#109;&#101;&#110;&#046;&#100;&#046;&#109;&#108;&#097;&#100;&#101;&#110;&#111;&#118;&#064;&#112;&#114;&#111;&#116;&#111;&#110;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a>
+			</br>
+			<strong>LinkedIn</strong></br>
+			<a class="borderless" href="https://www.linkedin.com/in/kamen-mladenov/">kamen-mladenov</a>
+		</td>
+	</tr>
+</table>
 
-</div>
+<p></p>