Sync from 1cafcb39c8a101893ae30f92a0a789e2c1d8b85b

- [x] SCSS
- [x] JS
- [x] i18n files
- [x] HTML
- [x] gitalk
- [x] FontAwesome 5
- [ ] Docs

Fixes #287

18 files changed, 138 insertions, 70 deletions

diff --git a/src/js/about.js b/src/js/about.js
index 4e526da..f5dfc51 100755
--- a/src/js/about.js
+++ b/src/js/about.js
@@ -33,6 +33,15 @@
         e.preventDefault();
         self.playBack();
       });
+      // Detect click on close button outside of card
+      self.$about.click(function(e) {
+        e.preventDefault();
+        self.playBack();
+      });
+      // Deny closing the about page when users click on the card
+      self.$aboutCard.click(function(event) {
+        event.stopPropagation();
+      });
     },
 
     /**
diff --git a/src/js/fancybox.js b/src/js/fancybox.js
index e06e4df..98663c2 100755
--- a/src/js/fancybox.js
+++ b/src/js/fancybox.js
@@ -1,6 +1,6 @@
 (function($) {
   'use strict';
-  
+
   // Run fancybox feature
 
   $(document).ready(function() {
@@ -9,51 +9,31 @@
      * @returns {void}
      */
     function fancyFox() {
-      var arrows = true;
-      var thumbs = null;
+      var thumbs = false;
 
       // disable navigation arrows and display thumbs on medium and large screens
       if ($(window).height() > 480) {
-        arrows = false;
-        thumbs = {
-          width: 70,
-          height: 70
-        };
+        thumbs = true;
       }
 
       $('.fancybox').fancybox({
-        maxWidth: 900,
-        maxHeight: 800,
-        fitToView: true,
-        width: '50%',
-        height: '50%',
-        autoSize: true,
-        arrows: arrows,
-        closeClick: false,
-        openEffect: 'elastic',
-        closeEffect: 'elastic',
-        prevEffect: 'none',
-        nextEffect: 'none',
-        padding: '0',
-        helpers: {
-          thumbs: thumbs,
-          overlay: {
-            css: {
-              overflow: 'hidden',
-              background: 'rgba(0, 0, 0, 0.85)'
-            }
-          }
-        },
-        afterLoad: function() {
-          setTimeout(function() {
-            $('.fancybox-next > span, .fancybox-prev > span').css('visibility', 'visible');
-          }, 400);
+        buttons: [
+          'fullScreen',
+          'thumbs',
+          'share',
+          'download',
+          'zoom',
+          'close'
+        ],
+        thumbs: {
+          autoStart: thumbs,
+          axis: 'x'
         }
       });
     }
 
     fancyFox();
-    
+
     $(window).smartresize(function() {
       fancyFox();
     });
diff --git a/src/js/header.js b/src/js/header.js
index 3b499cc..1d25243 100755
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -12,7 +12,7 @@
     this.headerHeight = this.$header.height();
     // CSS class located in `source/_css/layout/_header.scss`
     this.headerUpCSSClass = 'header-up';
-    this.delta = 5;
+    this.delta = 15;
     this.lastScrollTop = 0;
   };
 
diff --git a/src/js/post-bottom-bar.js b/src/js/post-bottom-bar.js
index 20fd5e9..b6d0c13 100755
--- a/src/js/post-bottom-bar.js
+++ b/src/js/post-bottom-bar.js
@@ -12,8 +12,10 @@
     this.$postBottomBar = $('.post-bottom-bar');
     this.$postFooter = $('.post-actions-wrap');
     this.$header = $('#header');
-    this.delta = 1;
+    this.delta = 15;
     this.lastScrollTop = 0;
+    this.lastScrollDownPos = 0;
+    this.lastScrollUpPos = 0;
   };
 
   PostBottomBar.prototype = {
@@ -47,17 +49,26 @@
     swipePostBottomBar: function() {
       var scrollTop = $(window).scrollTop();
       var postFooterOffsetTop = this.$postFooter.offset().top;
-      // show bottom bar
-      // if the user scrolled upwards more than `delta`
-      // and `post-footer` div isn't visible
-      if (this.lastScrollTop > scrollTop &&
-        (postFooterOffsetTop + this.$postFooter.height() > scrollTop + $(window).height() ||
-        postFooterOffsetTop < scrollTop + this.$header.height())) {
-        this.$postBottomBar.slideDown();
+
+      // scrolling up
+      if (this.lastScrollTop > scrollTop) {
+        // show bottom bar
+        // if the user scrolled upwards more than `delta`
+        // and `post-footer` div isn't visible
+        if (Math.abs(this.lastScrollDownPos - scrollTop) > this.delta &&
+          (postFooterOffsetTop + this.$postFooter.height() > scrollTop + $(window).height() ||
+            postFooterOffsetTop < scrollTop + this.$header.height())) {
+          this.$postBottomBar.slideDown();
+          this.lastScrollUpPos = scrollTop;
+        }
       }
-      else {
+
+      // scrolling down
+      if (scrollTop > this.lastScrollUpPos + this.delta) {
         this.$postBottomBar.slideUp();
+        this.lastScrollDownPos = scrollTop;
       }
+
       this.lastScrollTop = scrollTop;
     }
   };
diff --git a/src/js/share-options.js b/src/js/share-options.js
index 24367c3..3ca41fe 100755
--- a/src/js/share-options.js
+++ b/src/js/share-options.js
@@ -1,8 +1,8 @@
 (function($) {
   'use strict';
-
+  
   // Open and close the share options bar
-
+  
   /**
    * ShareOptionsBar
    * @constructor
@@ -13,16 +13,16 @@
     this.$closeBtn = $('#btn-close-shareoptions');
     this.$body = $('body');
   };
-
+  
   ShareOptionsBar.prototype = {
-
+    
     /**
      * Run ShareOptionsBar feature
      * @return {void}
      */
     run: function() {
       var self = this;
-
+      
       // Detect the click on the open button
       self.$openBtn.click(function() {
         if (!self.$shareOptionsBar.hasClass('opened')) {
@@ -30,7 +30,7 @@
           self.$closeBtn.show();
         }
       });
-
+      
       // Detect the click on the close button
       self.$closeBtn.click(function() {
         if (self.$shareOptionsBar.hasClass('opened')) {
@@ -39,14 +39,14 @@
         }
       });
     },
-
+    
     /**
      * Open share options bar
      * @return {void}
      */
     openShareOptions: function() {
       var self = this;
-
+      
       // Check if the share option bar isn't opened
       // and prevent multiple click on the open button with `.processing` class
       if (!self.$shareOptionsBar.hasClass('opened') &&
@@ -54,26 +54,27 @@
         // Open the share option bar
         self.$shareOptionsBar.addClass('processing opened');
         self.$body.css('overflow', 'hidden');
+        
         setTimeout(function() {
           self.$shareOptionsBar.removeClass('processing');
         }, 250);
       }
     },
-
+    
     /**
      * Close share options bar
      * @return {void}
      */
     closeShareOptions: function() {
       var self = this;
-
+      
       // Check if the share options bar is opened
       // and prevent multiple click on the close button with `.processing` class
       if (self.$shareOptionsBar.hasClass('opened') &&
         !this.$shareOptionsBar.hasClass('processing')) {
         // Close the share option bar
         self.$shareOptionsBar.addClass('processing').removeClass('opened');
-
+        
         setTimeout(function() {
           self.$shareOptionsBar.removeClass('processing');
           self.$body.css('overflow', '');
@@ -81,7 +82,7 @@
       }
     }
   };
-
+  
   $(document).ready(function() {
     var shareOptionsBar = new ShareOptionsBar();
     shareOptionsBar.run();
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
index 80d6d87..298f771 100755
--- a/src/scss/components/_alert.scss
+++ b/src/scss/components/_alert.scss
@@ -6,6 +6,7 @@
     margin:      1em 0 0;
     border:      none;
     border-left: 3px solid;
+    word-break: break-word;
     p {
         margin: 1.5em 0 0;
 
@@ -66,4 +67,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/components/_archive.scss b/src/scss/components/_archive.scss
index 813b6de..02183b8 100755
--- a/src/scss/components/_archive.scss
+++ b/src/scss/components/_archive.scss
@@ -25,7 +25,7 @@
             .archive-post-date {
                 color: map-get($colors, light);
             }
-            // Change styl of the list by adding font-awesome icon
+            // Change style of the list by adding font-awesome icon
             &::before {
                 font-family: 'FontAwesome';
                 content:     '\f0da';
@@ -33,4 +33,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/components/_fancybox.scss b/src/scss/components/_fancybox.scss
new file mode 100644
index 0000000..4bd8a56
--- /dev/null
+++ b/src/scss/components/_fancybox.scss
@@ -0,0 +1,27 @@
+.fancybox-caption-wrap {
+    padding: 0;
+    background: transparent;
+
+    .fancybox-caption {
+        text-align: center;
+        border: none;
+    }
+}
+
+.fancybox-thumbs {
+    top: auto;
+    width: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 95px;
+    padding: 10px 10px 5px 10px;
+    box-sizing: border-box;
+    opacity: 1;
+    background: transparent;
+}
+
+.fancybox-show-thumbs .fancybox-inner {
+    right: 0;
+    bottom: 95px;
+}
diff --git a/src/scss/components/_figure.scss b/src/scss/components/_figure.scss
index 116785e..d3e0371 100755
--- a/src/scss/components/_figure.scss
+++ b/src/scss/components/_figure.scss
@@ -18,6 +18,10 @@
         float:  right;
         margin: 2px;
     }
+    .fig-video {
+        width: 100%;
+        height: auto;
+    }
     &.fig-20 {
         @extend .left;
         width: calc(20% - 4px);
diff --git a/src/scss/components/_image-gallery.scss b/src/scss/components/_image-gallery.scss
index 10a067a..c9afb59 100755
--- a/src/scss/components/_image-gallery.scss
+++ b/src/scss/components/_image-gallery.scss
@@ -63,7 +63,7 @@
                 padding-bottom: 40%;
                 margin-bottom:  $image-gallery-photos-margin;
             }
-            // Resize seconde image minus space between 2 images
+            // Resize second image minus space between 2 images
             &:nth-child(2) {
                 margin-right: $image-gallery-photos-margin;
                 // width: 50% minus the space between 2 images
@@ -75,4 +75,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/components/_post-actions.scss b/src/scss/components/_post-actions.scss
index a2899d7..a23c5dd 100755
--- a/src/scss/components/_post-actions.scss
+++ b/src/scss/components/_post-actions.scss
@@ -86,6 +86,7 @@
     }
 }
 
+// Hide post actions in print layout
 @media print {
     .post-actions-wrap {
         display: none;
diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss
index 6b25cf0..3572868 100755
--- a/src/scss/components/_post.scss
+++ b/src/scss/components/_post.scss
@@ -43,11 +43,16 @@
             width:     auto;
             max-width: 100%;
         }
-        :not(blockquote):not(.alert) {
+        :not(blockquote):not(li):not(.alert) {
             & > p {
                 margin: 1.5em 0 0 0;
             }
         }
+        li {
+            p {
+                margin: 0 0 0 0;
+            }
+        }
     }
     .post-footer {
         margin-top: 20px;
diff --git a/src/scss/components/_postShorten.scss b/src/scss/components/_postShorten.scss
index 1194556..14ae00f 100755
--- a/src/scss/components/_postShorten.scss
+++ b/src/scss/components/_postShorten.scss
@@ -151,9 +151,11 @@
             margin:   15px 0 15px 0;
 
             img {
-                width:  auto;
-                height: auto;
+                width:      100%;
+                height:     auto;
+                max-height: $post-bottom-thumbnail-image-max-height;
+                object-fit: cover;
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/components/_share-options-bar.scss b/src/scss/components/_share-options-bar.scss
index 04bf805..6b2f3ac 100755
--- a/src/scss/components/_share-options-bar.scss
+++ b/src/scss/components/_share-options-bar.scss
@@ -6,6 +6,7 @@
     background:         white;
     height:             100%;
     clear:              both;
+    box-sizing:         border-box;
     border-top:         1px solid #eef2f8;
     transition:         transform .25s ease-in-out;
     z-index:            map-get($z-indexes, 'c-share-options-bar');
@@ -46,7 +47,8 @@
                 width:   100%;
                 padding: 10px 0 10px 0;
 
-                .fa {
+                .fa,
+                .fab {
                     margin-right: 15px;
                 }
             }
@@ -115,4 +117,4 @@
     .share-options-bar {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/layouts/_about.scss b/src/scss/layouts/_about.scss
index 6d7bb91..a8ea995 100755
--- a/src/scss/layouts/_about.scss
+++ b/src/scss/layouts/_about.scss
@@ -10,6 +10,7 @@
     line-height: 100%;
     overflow-y:  auto;
     overflow-x:  hidden;
+    cursor:      pointer;
     z-index:     map-get($z-indexes, l-about);
 
     #about-card {
@@ -22,6 +23,7 @@
         margin:        15px auto;
         border-radius: 3px;
         padding:       30px 0;
+        cursor:        initial;
         @include prefix(box-shadow, 0 0 5px rgba(0, 0, 0, 0.50), 'webkit' 'moz');
 
         #about-btn-close {
@@ -110,4 +112,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/themes/_hljs-tranquilpeak.scss b/src/scss/themes/_hljs-tranquilpeak.scss
index ed8eecb..1560578 100755
--- a/src/scss/themes/_hljs-tranquilpeak.scss
+++ b/src/scss/themes/_hljs-tranquilpeak.scss
@@ -122,6 +122,18 @@ figure.highlight,
             color: map-get($highlight-colors, bondi-blue);
         }
     }
+    // Clojure
+    &.clj .code {
+        .builtin-name {
+            color: map-get($highlight-colors, persimmon);
+        }
+        .name {
+            color: map-get($highlight-colors, scampi);
+        }
+        .number {
+            color: map-get($highlight-colors, bondi-blue);
+        }
+    }
     // C#
     &.cs .code {
         .preprocessor,
@@ -460,6 +472,15 @@ figure.highlight,
             color: map-get($highlight-colors, scampi);
         }
     }
+    // Lisp
+    &.lisp .code {
+        .name {
+            color: map-get($highlight-colors, persimmon);
+        }
+        .number {
+            color: map-get($highlight-colors, bondi-blue);
+        }
+    }
     // SCSS
     &.scss {
         .tag,
@@ -558,4 +579,4 @@ figure.highlight,
             color: map-get($highlight-colors, bondi-blue);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/tranquilpeak.scss b/src/scss/tranquilpeak.scss
index f83e1bd..f31cbcc 100755
--- a/src/scss/tranquilpeak.scss
+++ b/src/scss/tranquilpeak.scss
@@ -38,6 +38,7 @@
     'components/button',
     'components/caption',
     'components/code',
+    'components/fancybox',
     'components/figure',
     'components/form',
     'components/hide',
diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss
index 3c60521..109c256 100755
--- a/src/scss/utils/_variables.scss
+++ b/src/scss/utils/_variables.scss
@@ -244,6 +244,7 @@ $pagination-height: 60px;
 // Post thumbnail image
 // Width and height of post's thumbnail image
 $post-thumbnail-image-width: 140px;
+$post-bottom-thumbnail-image-max-height: 250px;
 
 // Tooltip
 $tooltip: (