Show swipe instruction for the first view

In the post and blog pages
Fixed PanosSakkos/personal-jekyll-theme#75

_includes/js.html

@@ -214,4 +214,15 @@ $(window).scroll(toggleNavCollapse);$(function(){$("a.page-scroll").bind("click"
 
 {% endif %}
 
+{% if page.section-type == "blog" or page.section-type == "post" %}
+<script>
+  $(document).ready(function(){
+    if(!localStorage.getItem('swipeshowed')){
+      $("#swipe-instruction").modal();
+      localStorage.setItem('swipeshowed', true);
+    }
+  });
+</script>
+{% endif %}
+
 <!-- Javascript End -->

_includes/navigation.html

@@ -51,4 +51,18 @@
   </div>
 </nav>
 
+{% if page.section-type == "blog" or page.section-type == "post" %}
+<div id="swipe-instruction" class="modal fade">
+  <div class="modal-content container content-section text-center">
+    <div class="row">
+      <div>
+        <i id="hand-swipe" class="fa fa-hand-o-up"></i>
+        <p><strong>Hey!<br/>Did you know that you can navigate the archive pages by swiping left and right?<br>Check it out!</strong></p>
+        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}
+
 <!-- Navigation End -->

css/grayscale.scss

@@ -331,3 +331,41 @@ body {
     100% { opacity:1; }
 }
 /* END Added in { Personal } for Typed Cursor in Header */
+
+/* Animation for hand-swipe */
+@-webkit-keyframes swipe {
+    from {
+        left: 5%;
+    }
+    to {
+        left: -5%;
+    }
+}
+
+@-moz-keyframes swipe {
+    from {
+        left: 5%;
+    }
+    to {
+        left: -5%;
+    }
+}
+/* END Animation for hand-swipe */
+
+/* Style for swipe instruction section */
+#swipe-instruction {
+    .modal-content {
+        background-color: rgba(20, 20, 20, 0.6);
+        padding: 10px;
+        @media(min-width:768px) {
+          padding: 100px 0;
+        }
+        #hand-swipe {
+            font-size: 80px;
+            display: block;
+            position: relative;
+            animation: swipe ease-in-out 1s alternate infinite;
+        }
+    }
+}
+/* END Style for swipe instruction section */