add WeChat to socials (alshedivat#1730)

When the WeChat icon in socials is clicked, a picture of your WeChat QR
code is shown in the center of the screen. The actual picture of your QR
code has to be uploaded.

Author: johanneshoerner

_config.yml

@@ -105,6 +105,7 @@ facebook_id: # your facebook id
 youtube_id: # your youtube channel id (youtube.com/@<youtube_id>)
 discord_id: # your discord id (18-digit unique numerical identifier)
 zotero_username: # your zotero username
+wechat_qr: # filename of your wechat qr-code saved as an image (e.g., wechat-qr.png if saved to assets/img/wechat-qr.png)
 
 contact_note: >
   You can even add a little note about which of these is the best way to reach you.
@@ -425,4 +426,4 @@ jsonresume:
   - skills
   - languages
   - interests
-  - references
+  - references

_includes/scripts/wechatModal.html

@@ -0,0 +1,20 @@
+{% if site.wechat_qr %}
+
+<!-- WeChat Modal -->
+
+<script>
+var wechatModal = document.getElementById("WeChatMod");
+var wechatBtn = document.getElementById("WeChatBtn");
+
+wechatBtn.onclick = function() {
+  wechatModal.style.display = "block";
+}
+
+window.onclick = function(event) {
+  if (event.target == wechatModal) {
+    wechatModal.style.display = "none";
+  }
+}
+</script>
+
+{% endif %}

_includes/social.html

@@ -109,3 +109,10 @@
             {%- if site.rss_icon -%}
             <a href="{{ site.baseurl }}/feed.xml" title="RSS Feed"><i class="fas fa-rss-square"></i></a>
             {% endif %}
+            {%- if site.wechat_qr -%}
+            <a id="WeChatBtn" title="WeChat"><i class="fab fa-weixin"></i></a>
+            <div id="WeChatMod" class="wechat-modal">
+                <img src="{{ site.wechat_qr | prepend: 'assets/img/' | relative_url }}" alt="WeChat QR" id="WeChatQR">
+            </div>
+            {% include scripts/wechatModal.html %}
+            {% endif %}

_layouts/default.html

@@ -58,5 +58,6 @@
     {% include scripts/mathjax.html %}
     {% include scripts/analytics.html %}
     {% include scripts/progressBar.html %}
+    {% include scripts/wechatModal.html %}
   </body>
 </html>

_sass/_base.scss

@@ -326,6 +326,36 @@ blockquote {
   }
 }
 
+.wechat-modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.8);
+}
+
+.wechat-modal > img {
+  display: block;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  width: 33%;
+  max-width: 400px;
+  transform: translate(-50%, -50%);
+}
+
+@media only screen and (max-width: 400px){
+  .wechat-modal > img {
+    width: 100%;
+  }
+}
+
 
 // Footer
 footer.fixed-bottom {