Implemented a fancy contact information layout

3 files changed, 56 insertions, 11 deletions

diff --git a/src/contact.md b/src/contact.md
index db645d9..8a1a977 100644
--- a/src/contact.md
+++ b/src/contact.md
@@ -3,14 +3,23 @@
 ---
 ---
 
-## Casual
-[![🔗](/img/link-tabler.svg)](#Casual)
+<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>
 
-Email: [syndamia@protonmail.com](mailto:syndamia@protonmail.com)
-
-## Work-related
-[![🔗](/img/link-tabler.svg)](#Work-related)
-
-Official (Work) Email: [kamen.d.mladenov@protonmail.com](mailto:kamen.d.mladenov@protonmail.com)
-
-[LinkedIn](https://www.linkedin.com/in/kamen-mladenov)
+</div>
diff --git a/src/darkmode.css b/src/darkmode.css
index 436fafb..b759846 100644
--- a/src/darkmode.css
+++ b/src/darkmode.css
@@ -1,6 +1,7 @@
 :root {
   --link-tab-bg-color: #464646;
   --link-tab-bg-hover-color: #d47408;
+  --bold-color: #d49408;
 }
 
 
@@ -29,7 +30,7 @@ blockquote * {
 }
 
 h1, h2, h3, h4, h5, h6, b {
-  color: #d49408;
+  color: var(--bold-color);
   border-color: #777;
 }
 
diff --git a/src/styles.css b/src/styles.css
index 17b2e21..11b9863 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -277,6 +277,41 @@ blockquote > :last-child {
   margin-bottom: 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: #343434;
+  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(--bold-color);
+}
+
+.contact-card-content {
+  font-size: 0.9em;
+  margin: 1em 1.3em;
+  box-sizing: border-box;
+}
+
 /* OpenSans font */
 
 @font-face {