From 17e75f5eb6479a77a31cc96bca67ec7be2b30475 Mon Sep 17 00:00:00 2001
From: Felipe Martin <me@fmartingr.com>
Date: Sat, 24 Mar 2018 17:17:37 +0100
Subject: [PATCH] Updated contact page with icons. Closes #8

---
 assets/static/sass/_grid.sass             |  4 +--
 assets/static/sass/_layout.sass           | 11 +++++-
 assets/static/sass/_variables.sass        |  3 ++
 content/contact/contents.lr               | 43 ++++++++++++++++++++---
 content/made-with-open-source/contents.lr |  2 ++
 templates/_base.html                      |  1 +
 6 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/assets/static/sass/_grid.sass b/assets/static/sass/_grid.sass
index ecaecf6..8a0136b 100644
--- a/assets/static/sass/_grid.sass
+++ b/assets/static/sass/_grid.sass
@@ -8,7 +8,7 @@ $pad: 20px
   margin: 0 0 $pad 0
 
   &:after
-    /* Or @extend clearfix
+    // Or @extend clearfix
     content: ""
     display: table
     clear: both
@@ -35,7 +35,7 @@ $pad: 20px
 .col-1-8
   width: 12.5%
 
-/* Opt-in outside padding
+// Opt-in outside padding
 .grid-pad
   padding: $pad 0 $pad $pad
 
diff --git a/assets/static/sass/_layout.sass b/assets/static/sass/_layout.sass
index e721d55..e6cc7bc 100644
--- a/assets/static/sass/_layout.sass
+++ b/assets/static/sass/_layout.sass
@@ -1,6 +1,6 @@
 body
   font-family: "Antic Slab"
-  font-size: 20px
+  font-size: $font-size-normal
   line-height: 1.5em
 
 .center
@@ -47,6 +47,12 @@ p:first-child
 .text-right
   text-align: right
 
+.text-size-normal
+  font-size: $font-size-normal
+
+.text-size-enormous
+  font-size: $font-size-enormous
+
 .float-right
   float: right
 
@@ -56,6 +62,9 @@ p:first-child
 .clearfloat
   clear: both
 
+.display-block
+  display: block
+
 .block-info
   background-color: lightblue
   padding: 12px
diff --git a/assets/static/sass/_variables.sass b/assets/static/sass/_variables.sass
index 666d126..a16f144 100644
--- a/assets/static/sass/_variables.sass
+++ b/assets/static/sass/_variables.sass
@@ -1,3 +1,6 @@
 $red: #c24e4a
 $lightgray: #f6f6f6
 $darkgray: #e9e9e9
+
+$font-size-normal: 20px
+$font-size-enormous: 5em
diff --git a/content/contact/contents.lr b/content/contact/contents.lr
index 59adcab..03d1922 100644
--- a/content/contact/contents.lr
+++ b/content/contact/contents.lr
@@ -6,8 +6,41 @@ body:
 
 Feel free to ccontact me via:
 
-- E-Mail: [me@fmartingr.com](mailto:me@fmartingr.com)
-- Github: https://github.com/fmartingr
-- OStatus: https://mastodon.social/@fmartingr
-- LinkedIn: https://linkedin.com/fmartingr
-- Telegram: https://telegram.me/fmartingr (fastest!)
+<div class="grid text-center">
+    <div class="col-1-3 text-size-enormous">
+        <a href="mailto:me@fmartingr.com">
+            <i class="fa fa-envelope" aria-hidden="true"></i>
+            <span class="text-size-normal display-block">E-Mail</span>
+        </a>
+    </div>
+    <div class="col-1-3 text-size-enormous">
+        <a href="https://github.com/fmartingr">
+            <i class="fa fa-github" aria-hidden="true"></i>
+            <span class="text-size-normal display-block">Github</span>
+        </a>
+    </div>
+    <div class="col-1-3 text-size-enormous">
+        <a href="https://linkedin.com/fmartingr">
+            <i class="fa fa-linkedin" aria-hidden="true"></i>
+            <span class="text-size-normal display-block">LinkedIn</span>
+        </a>
+    </div>
+    <div class="col-1-3 text-size-enormous">
+        <a href="https://telegram.me/fmartingr">
+            <i class="fa fa-telegram" aria-hidden="true"></i>
+            <span class="text-size-normal display-block">Telegram</span>
+        </a>
+    </div>
+    <div class="col-1-3 text-size-enormous">
+        <a href="https://mastodon.social/@fmartingr">
+            <i class="fa fa-mastodon" aria-hidden="true"></i>
+            <span class="text-size-normal display-block">Mastodon</span>
+        </a>
+    </div>
+    <div class="col-1-3 text-size-enormous">
+        <a href="https://twitter.com/fmartingr">
+            <i class="fa fa-twitter" aria-hidden="true"></i>
+            <span class="text-size-normal display-block">Birdsite</span>
+        </a>
+    </div>
+</div>
diff --git a/content/made-with-open-source/contents.lr b/content/made-with-open-source/contents.lr
index cfd09d2..b5a6fb1 100644
--- a/content/made-with-open-source/contents.lr
+++ b/content/made-with-open-source/contents.lr
@@ -12,9 +12,11 @@ Software:
 * [Emacs](https://www.gnu.org/software/emacs/)
 * [Gulp](http://gulpjs.com/)
 * [Lektor](https://getlektor.com)
+* [Visual Studio Code](https://code.visualstudio.com)
 
 Javascript libraries:
 * [Featherlight lightbox](https://github.com/noelboss/featherlight/)
+* [Fork Awesome](https://forkawesome.github.io/Fork-Awesome/)
 * [jQuery](https://jquery.com)
 
 And of course, this site "source code" [is publicly accessible on Github too](https://github.com/fmartingr/fmartingr-lektor).
diff --git a/templates/_base.html b/templates/_base.html
index a1a5898..094466c 100644
--- a/templates/_base.html
+++ b/templates/_base.html
@@ -4,6 +4,7 @@
     <title>{% block page_title %}Felipe Martin{% endblock %}</title>
     <link href='https://fonts.googleapis.com/css?family=Antic+Slab' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="{{ '/static/css/style.css'|asseturl }}">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/fork-awesome@1.0.11/css/fork-awesome.min.css" integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8=" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ get_pygments_stylesheet()|url }}">
     <link rel="alternate" type="application/rss+xml" title="RSS Feed for fmartingr.com" href="/feed.xml" />
     <!-- Mobile -->