type-on-strap 2.2.5 → 2.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed8a97f0cd96fb6b4cb453fc664880312eb47199ffe4b2fc76eb60f2ab2db593
-  data.tar.gz: 263d45173c7dfa1fb586dd38c96edc97799155e5a36fb636ed3a10acc81a6473
+  metadata.gz: c0098429517f562b4330cd6a7d47f23f08813f6c5c09d7f46465fa4eddd04d97
+  data.tar.gz: ebef52e66c8cee36cf4b3dbe24abf3e0284be381a0aed6c0367cfaac28262797
 SHA512:
-  metadata.gz: f9fcbb5d9d7332aa45c6263360ba9eda1704d0c4906fdff03d51be88897c31fe947a521ff3b80fa74e6467051534179cf051aa2a5adfd634ba92a7d765f8ceae
-  data.tar.gz: 0dd9911ebcea1dae5dda7bfb19a8e0b7f833c9373e1a59ab29118bd1d8c54192cb7c38634b482c6ec9c36d558ea2b652fe3210b6ea8f6f9152ef09015a80a4fa
+  metadata.gz: 97ea3d7ba30682bb78c0f12706fc2aa85fda34f81499ffa5d3f7643394a919503f3ed02270fa9f70212ea7a0dea3397b992c08306093fa172269eeaca82f4bbe
+  data.tar.gz: 2a8dcbea38807ff11d3860f063ce11a3921d8e35bf23b35f433eec599f915a90e9be38b3684e463a1c154f0b184fd5462aac431cc481c1b17d4079afc458f330

data/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2020 Sylhare
+Copyright (c) 2016-2021 Sylhare
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -14,10 +14,11 @@ A free and open-source [Jekyll](https://jekyllrb.com) theme. Based on Rohan Chan
 * Handle Bootstrap'ed pages: [Get Bootstrap](http://getbootstrap.com/)
 * 🔎 Search feature: [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)
 * Math Rendering : [KateX](https://github.com/Khan/KaTeX)
+* Diagram Rendering: [Mermaid-js](https://github.com/mermaid-js/mermaid)
 * 🖋 Nice fonts: [Font Awesome](https://fontawesome.com/), [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro), [Pacifico](https://fonts.google.com/specimen/Pacifico?selection.family=Pacifico) 
 * Seo Tags: [Jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
 * 🛠 Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)
-* Free of rights images from [pexels](https://www.pexels.com/)
+* Find free of rights images on [pexels](https://www.pexels.com/)
 
 > [Demo Site](https://sylhare.github.io/Type-on-Strap/)
 
@@ -118,6 +119,8 @@ description: My blog posts            # Short description, primarily used by sea
 favicon: assets/favicon.ico           # Icon displayed in the tab
 ```
 
+You can also customize the seo tags default option following the jekyll-seo-tag plugin [documentation](http://jekyll.github.io/jekyll-seo-tag/advanced-usage/).
+
 ### Theme customization 🎨
 
 #### Footer and Header's text
@@ -160,7 +163,7 @@ to your project's `_config.yml` file:
 disqus_shortname: my_disqus_shortname
 ```
 
-### Math typesetting
+### Math typesetting with KateX
 
 When KateX is set in `_config.yml`:
 
@@ -185,6 +188,29 @@ $$
 $$
 ```
 
+You can find a cheat sheet of the compatible LaTex symbols [online](https://artofproblemsolving.com/wiki/index.php/LaTeX:Symbols).
+
+### Diagrams with Mermaid
+
+Enable the [mermaid-js](https://github.com/mermaid-js/mermaid) diagram rendering by setting mermaid to true in the `_config.yml`.
+This will load and init the [mermaid.min.js](https://mermaid-js.github.io/mermaid/getting-started/n00b-gettingStarted.html#4-calling-mermaid-from-a-relative-link).
+
+```yml
+mermaid: true # to Enable it
+```
+
+Find all the help you need on the official [mermaid documentation](https://mermaid-js.github.io/mermaid/).
+You can create with ease diagrams. Add your mermaid script inside two mermaid divs (default Kramdown does not yet support mermaid).
+With the `class="mermaid"` inside the `<div>`:
+
+```html
+<div class="mermaid">
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+</div>
+```
+
 ### Social icons
 
 In `_data/social.yml` you can customize the social icons from other wbesite you wish to display in the blog.
@@ -237,7 +263,7 @@ layout: post
 title: Hello World                                # Title of the page
 hide_title: true                                  # Hide the title when displaying the post, but shown in lists of posts
 feature-img: "assets/img/sample.png"              # Add a feature-image to the post
-thumbnail: "assets/thumbnails/sample-th.png"      # Add a thumbnail image on blog view
+thumbnail: "assets/img/thumbnails/sample-th.png"  # Add a thumbnail image on blog view
 color: rgb(80,140,22)                             # Add the specified color as feature image, and change link colors in post
 bootstrap: true                                   # Add bootstrap to the page
 tags: [sample, markdown, html]
@@ -465,7 +491,9 @@ Jekyll works with [liquid](https://shopify.github.io/liquid/) tags usually repre
 These are useful to render your jekyll files. 
 You can learn more about them on [shopify's doc](https://help.shopify.com/themes/liquid/basics)
 
-### Minimizing and optimizing: css, js and images
+### Gulp toolbox
+
+#### Requirements
 
 Before you need to have *node* and `npm` installed:
 
@@ -481,18 +509,33 @@ sudo npm install gulp-cli -g
 npm install
 ```
 
+#### Minimizing and optimizing: css, js and images
+
 You can run the default task that will compress the js, css and images and create the thumbnails for the supported image
 formats:
 
 ```bash
 cd assets/
 gulp default
-gulp thumbnails # to create all of the images thumbnails
+gulp thumbnails-all # to create all of the images thumbnails
+gulp thumbnails     # to create thumbnails for the feature-img/ only
 # tip: run a git status to see the changes
 git status
 ```
 
-You can find more about the gulp tasks in the [gulpfile.js](assets/gulpfile.js)
+You can find more about the gulp tasks in the [gulpfile.js](assets/gulpfile.js).
+
+#### Create a post
+
+To create a `.md` file in the *_posts/* section with the jekyll format of today's date.
+Use this command with the title you'd like to create the very basic post.
+
+```bash
+gulp post -n 'title of the post'
+```
+
+A file will be create following the format `yyyy-mm-dd-title-of-the-post.md` with default post attributes inside.
+Nothing will happen if the file exists already.
 
 ### Use as Ruby Gem 💎
 

data/_data/language.yml

@@ -14,3 +14,5 @@ str_javascript_required_disqus: "Please enable JavaScript to view comments."
 str_no_result_found: "No result found"
 str_cookie_approve: "Approve"
 str_cookie_disclaimer: "We would like to use third party cookies and scripts to improve the functionality of this website."
+str_months: [January, February, March, April, May, June, July, August, September, October, November, December]
+

data/_includes/blog.html

@@ -1,4 +1,7 @@
 <div class="posts">
+    {% unless paginator.posts %}
+    <article><section class="post-content"><p>There are no blog posts</p></section></article>
+    {% endunless %}
     {% for post in paginator.posts %}
     <div class="post-teaser">
         {% if post.thumbnail %}

data/_includes/blog_nav.html

@@ -5,14 +5,14 @@
         {% if paginator.previous_page and paginator.previous_page != 1%}
         <!-- << -->
         <a aria-label="{{ site.data.language.str_previous_page | default: 'Prev' }}" href="{{ '/' | relative_url }}" class="button">
-            <span><i class="fa fa-angle-double-left"></i></span>
+            <span><i class="fas fa-angle-double-left"></i></span>
         </a>
         {% endif %}
         
         <!-- < previous -->
         <a aria-label="{{ site.data.language.str_previous_page | default: 'Prev' }}" href="{{ paginator.previous_page_path | relative_url }}"
            {% unless paginator.previous_page %}style="visibility:hidden"{% endunless %} class="button">
-            <span><i class="fa fa-chevron-left"></i></span>
+            <span><i class="fas fa-chevron-left"></i></span>
             {{ site.data.language.str_previous_page | default: "Prev" }}
         </a>
     </div>
@@ -27,14 +27,14 @@
         <a aria-label="{{ site.data.language.str_next_page | default: 'Next' }}" href="{{ paginator.next_page_path | relative_url }}"
            {% unless paginator.next_page %}style="visibility:hidden"{% endunless %} class="button">
             {{ site.data.language.str_next_page | default: "Next" }}
-            <span><i class="fa fa-chevron-right"></i></span>
+            <span><i class="fas fa-chevron-right"></i></span>
         </a>
 
         {% if paginator.next_page and paginator.next_page != paginator.total_pages %}
         <!-- >> -->
         <a aria-label="{{ site.data.language.str_next_page | default: 'Next' }}"
         href="{{ site.paginate_path | relative_url | replace: ':num', paginator.total_pages }}" class="button">
-            <span><i class="fa fa-angle-double-right"></i></span>
+            <span><i class="fas fa-angle-double-right"></i></span>
         </a>
         {% endif %}
         

data/_includes/head.html

@@ -1,6 +1,6 @@
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5">
 
     <!-- Main JS (navbar.js, katex_init.js and masonry_init.js)-->
     <script defer src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
@@ -11,16 +11,12 @@
     <!--Favicon-->
     <link rel="shortcut icon" href="{{ site.favicon | relative_url }}" type="image/x-icon">
 
-    <!-- Canonical -->
-    <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
-
     <!-- RSS -->
-    <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ 'feed.xml' | absolute_url }}"/>
+    <link rel="alternate" type="application/atom+xml" title="{{ site.title | default: 'Title' }}" href="{{ 'feed.xml' | absolute_url }}"/>
     
     {% if page.bootstrap %}
     <!-- Bootstrap-4.1.3 isolation CSS -->
     <link rel="stylesheet" type="text/css" href="{{ '/assets/css/vendor/bootstrap-iso.min.css' | relative_url }}">
-
     <!-- JQuery 3.3.1 -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <!-- Bootstrap 4.1.3 compiled and minified JavaScript -->
@@ -29,12 +25,20 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
     {% endif %}
 
-    <!-- KaTeX 0.8.3 -->
-    <!-- if you have any issue check https://github.com/KaTeX/KaTeX -->
+    <!-- KaTeX 0.12.0 -->
     {% if site.katex or site.theme_settings.katex %}
-    <script src="{{ '/assets/js/vendor/katex.min.js' | relative_url }}"></script>
+    <script defer src="{{ '/assets/js/vendor/katex.min.js' | relative_url }}"></script>
+    <script defer src="{{ '/assets/js/vendor/auto-render.min.js' | relative_url }}" onload="renderMathInElement(document.body);"></script>
+    {% endif %}
+
+    <!-- Mermaid 8.9.2 -->
+    {% if site.mermaid %}
+    <script defer src="{{ '/assets/js/vendor/mermaid.min.js' | relative_url }}" onload="mermaid.initialize({startOnLoad:true});"></script>
     {% endif %}
 
+    <!-- Simple Jekyll Search 1.9.1 -->
+    <script src="{{ '/assets/js/vendor/simple-jekyll-search.min.js' | relative_url }}" type="text/javascript"></script>
+
     <!-- Google Analytics / Cookie Consent -->
     <script>
       const cookieName = 'cookie-notice-dismissed-{{ site.url }}';
@@ -43,9 +47,9 @@
     </script>
 
     {% if site.cookie_consent %}
-        <div id="cookie-notice"><span>{{ site.data.language.str_cookie_disclaimer | default: "We would like to use third party cookies and scripts to improve the functionality of this website." }}
+        <span id="cookie-notice"><span>{{ site.data.language.str_cookie_disclaimer | default: "We would like to use third party cookies and scripts to improve the functionality of this website." }}
           </span><a id="cookie-notice-accept" class="button">{{ site.data.language.str_cookie_approve | default: "Approve" }}</a>
-        </div>
+        </span>
     {% endif %}
     {% if site.google_analytics %}
         <!-- Global site tag (gtag.js) -->
@@ -56,15 +60,22 @@
 
     <!-- seo tags -->
     <meta property="og:image" content="{{ '/' | absolute_url }}{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ page.feature-img | default: site.header_feature_image }}{% endif %}">
+    {% unless page.layout == post %}
+    <meta property="og:type" content="website" />
+    {% endunless %}
     {% seo %}
 
     <!-- RSS -->
     {% feed_meta %}
 
     <!-- Twitter Cards -->
-    <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.theme_settings.title }}{% endif %}">
-    <meta name="twitter:description" content="{{ page.content | strip_html | strip_newlines | truncate: 160 }}">
-    {% if site.theme_settings.twitter %}<meta name="twitter:creator" content="@{{ site.theme_settings.twitter }}">{% endif %}
+    <meta name="twitter:title" content="{{ page.title | default: site.title }}">
+    <meta name="twitter:description" content="{{ page.content | strip_html | strip_newlines | truncate: 160 | default: site.header_text}}">
+    {% if site.data.social.twitter %}
+    <meta name="twitter:creator" content="@{{ site.data.social.twitter }}">
+    <meta name="twitter:site" content="@{{ site.data.social.twitter }}">
+    {% endif %}
     <meta name="twitter:card" content="{% unless page.thumbnail %}summary{% else %}summary_large_image{% endunless %}">
     <meta name="twitter:image" content="{{ '/' | absolute_url }}{% if page.thumbnail %}{{ page.thumbnail }}{% else %}{{ page.feature-img | default: site.header_feature_image }}{% endif %}">
+    <meta name="twitter:image:alt" content="{{ page.title | default: site.title }}">
 </head>

data/_includes/icons.html

@@ -1,10 +1,10 @@
 {% if site.data.social.rss or site.theme_settings.rss %}
 <li>
-    <a feed.xml href="{{ absolute_url }}{{ site.data.social.feed.path | default: 'feed.xml' }}"
+    <a feed.xml href="{{ site.data.social.feed.path | default: 'feed.xml' | relative_url }}"
        title="{{ site.data.language.str_rss_follow | default: "Follow RSS feed" }}">
         <span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-rss fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -14,8 +14,8 @@
 <li>
     <a href="mailto:{{ site.data.social.email_address }}" title="{{ site.data.language.str_email }}">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -26,8 +26,8 @@
     <a href="https://www.behance.net/{{ site.data.social.behance }}"
        title="{{ site.data.language.str_follow_on }} Behance">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-behance fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-behance fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -38,8 +38,8 @@
     <a href="https://bitbucket.org/{{ site.data.social.bitbucket }}"
        title="{{ site.data.language.str_follow_on }} Bitbucket">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-bitbucket fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-bitbucket fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -50,8 +50,8 @@
     <a href="https://dribbble.com/{{ site.data.social.dribbble }}"
        title="{{ site.data.language.str_follow_on }} Dribbble">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-dribbble fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-dribbble fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -62,8 +62,8 @@
     <a href="https://www.facebook.com/{{ site.data.social.facebook }}"
        title="{{ site.data.language.str_follow_on }} Facebook">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -74,8 +74,8 @@
     <a href="https://www.flickr.com/photos/{{ site.data.social.flickr }}"
        title="{{ site.data.language.str_follow_on }} Flickr">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-flickr fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-flickr fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -85,8 +85,8 @@
 <li>
     <a href="https://github.com/{{ site.data.social.github }}" title="{{ site.data.language.str_follow_on }} GitHub">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-github fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-github fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -97,8 +97,8 @@
     <a href="http://instagram.com/{{ site.data.social.instagram }}"
        title="{{ site.data.language.str_follow_on }} Instagram">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -108,8 +108,8 @@
 <li>
     <a href="https://keybase.io/{{ site.data.social.keybase }}" title="{{ site.data.language.str_follow_on }} Keybase">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-key fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-keybase fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -119,8 +119,8 @@
 <li>
     <a href="{{ site.data.social.linkedin }}" title="{{ site.data.language.str_follow_on }} LinkedIn">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -131,8 +131,8 @@
     <a href="http://www.pinterest.com/{{ site.data.social.pinterest }}"
        title="{{ site.data.language.str_follow_on }} Pinterest">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-pinterest fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-pinterest fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -143,8 +143,8 @@
     <a href="https://www.reddit.com/user/{{ site.data.social.reddit }}"
        title="{{ site.data.language.str_follow_on }} Reddit">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-reddit fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-reddit fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -155,8 +155,8 @@
     <a href="https://soundcloud.com/{{ site.data.social.soundcloud }}"
        title="{{ site.data.language.str_follow_on }} SoundCloud">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-soundcloud fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-soundcloud fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -166,8 +166,8 @@
 <li>
     <a href="{{ site.data.social.stack_exchange }}" title="{{ site.data.language.str_follow_on }} Stack Exchange">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-stack-exchange fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-stack-exchange fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -177,8 +177,8 @@
 <li>
     <a href="{{ site.data.social.stack_overflow }}" title="{{ site.data.language.str_follow_on }} Stack Overflow">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-stack-overflow fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-stack-overflow fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -189,8 +189,8 @@
     <a href="http://steamcommunity.com/id/{{ site.data.social.steam }}"
        title="{{ site.data.language.str_follow_on }} Steam">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-steam fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-steam fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -200,8 +200,8 @@
 <li>
     <a href="http://{{ site.data.social.tumblr }}.tumblr.com/" title="{{ site.data.language.str_follow_on }} Tumblr">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-tumblr fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-tumblr fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -211,8 +211,8 @@
 <li>
     <a href="https://gitlab.com/{{ site.data.social.gitlab }}" title="{{ site.data.language.str_follow_on }} Gitlab">
         <span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-gitlab fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-gitlab fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -223,8 +223,8 @@
     <a class="type" href="https://twitter.com/{{ site.data.social.twitter }}"
        title="{{ site.data.language.str_follow_on }} Twitter">
         <span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -235,8 +235,8 @@
     <a class="type" href="https://vimeo.com/{{ site.data.social.vimeo }}"
        title="{{ site.data.language.str_follow_on }} Vimeo">
         <span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-vimeo fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-vimeo fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -247,8 +247,8 @@
     <a href="https://{{ site.data.social.wordpress }}.wordpress.com/"
        title="{{ site.data.language.str_follow_on }} WordPress">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-wordpress fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-wordpress fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>
@@ -259,8 +259,8 @@
     <a href="https://www.youtube.com/channel/{{ site.data.social.youtube }}"
        title="{{ site.data.language.str_follow_on }} YouTube">
 		<span class="fa-stack fa-lg">
-            <i class="fa fa-circle fa-stack-2x"></i>
-            <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fab fa-youtube fa-stack-1x fa-inverse"></i>
         </span>
     </a>
 </li>