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

3 files changed, 45 insertions, 78 deletions

diff --git a/src/about.md b/src/about.md
index de34872..ba01d27 100644
--- a/src/about.md
+++ b/src/about.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>
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>
diff --git a/src/styles.css b/src/styles.css
index 1559964..d6c877a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -327,10 +327,9 @@ article > table:nth-child(5) td:first-child {
   width: 60%;
 }
 
-article > table td:nth-child(n+2) {
-  line-height: 1.1em;
-  padding: 0.3em;
-  padding-top: 0.2em;
+article > table td:not(:empty) {
+  padding: 0.5em;
+  word-break: break-word;
 }
 
 article > table code {
@@ -343,7 +342,6 @@ article > table th {
 
 article > table td,
 article > table th {
-  padding: 6px 13px;
   border: 1px solid var(--td-border-color);
 }
 
@@ -387,41 +385,6 @@ blockquote > :last-child {
   padding: 0;
 }
 
-/* Contact flex */
-
-#contact-flex {
-  display: flex;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
-
-#contact-flex > div {
-  flex: 1;
-}
-
-.contact-card-title, .contact-card-content {
-  background-color: var(--alternating-row-color);
-  padding: 0.7rem;
-  line-height: 1.5rem;
-}
-
-.contact-card-title *, .contact-card-content * {
-  background-color: inherit;
-  border: none;
-}
-
-.contact-card-title {
-  font-size: 1.2em;
-  margin: 0em 0.4em;
-  color: var(--header-color);
-}
-
-.contact-card-content {
-  font-size: 0.9em;
-  margin: 1em 1.3em;
-  box-sizing: border-box;
-}
-
 /* Syntax highlighting (colours are inspired from gruvbox) */
 
 .cst, .chr { /* Constant, Chars */