Implemented a fancy contact information layout

1 files changed, 35 insertions, 0 deletions

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 {