Fixes #75

_includes/js.html

@@ -214,4 +214,44 @@ $(window).scroll(toggleNavCollapse);$(function(){$("a.page-scroll").bind("click"
 
 {% endif %}
 
+{% if page.section-type == "blog" %}
+
+  <!-- Swipe Instructions for Blog Start -->
+
+  <script>
+    $(document).ready(function(){
+      if(!localStorage.getItem('blog-swipeshowed')){
+        $("#swipe-instruction").fadeIn();
+        $("#swipe-instruction .close-swipe-instruction").click(function(){
+          $("#swipe-instruction").fadeOut();
+        });
+        localStorage.setItem('blog-swipeshowed', true);
+      }
+    });
+  </script>
+
+  <!-- Swipe Instructions for Blog End -->
+
+{% endif %}
+
+{% if page.section-type == "post" %}
+
+  <!-- Swipe Instructions for Post Start -->
+
+  <script>
+    $(document).ready(function(){
+      if(!localStorage.getItem('post-swipeshowed')){
+        $("#swipe-instruction").fadeIn();
+        $("#swipe-instruction .close-swipe-instruction").click(function(){
+          $("#swipe-instruction").fadeOut();
+        });
+        localStorage.setItem('post-swipeshowed', true);
+      }
+    });
+  </script>
+
+  <!-- Swipe Instructions for Post End -->
+
+{% endif %}
+
 <!-- Javascript End -->

_includes/navigation.html

@@ -13,7 +13,9 @@
         <a class="navbar-brand" href="{{site.baseurl}}/">
       {% endif %}
           <div>
-            {% if site.black-favicon %}<img src="{{site.baseurl}}{{ site.black-favicon }}" alt="">{% endif %}
+            {% if site.black-favicon %}
+              <img src="{{site.baseurl}}{{ site.black-favicon }}" alt="">
+            {% endif %}
             {{ site.title }}
           </div>
         </a>

_includes/swipe-instructions.html

@@ -0,0 +1,25 @@
+
+<!-- Swipe Instructions Start -->
+
+<div id="swipe-instruction">
+  <div>
+    <p><br><br><br></p>
+    <i id="hand-swipe" class="fa fa-hand-o-up"></i>
+    <p><strong>
+    {% if page.section-type == "blog" %}
+      Did you know that you can navigate the archive pages by swiping left and right?
+    {% elsif page.section-type == "post" %}
+      Did you know that you can navigate the posts by swiping left and right?
+    {% endif %}
+    </strong></p>
+    <button type="button" class="btn btn-default ok-btn close-swipe-instruction">
+      {% if page.section-type == "blog" %}
+        Got it!
+      {% elsif page.section-type == "post" %}
+        Awesome!
+      {% endif %}
+    </button>
+  </div>
+</div>
+
+<!-- Swipe Instructions End -->

_layouts/blog.html

@@ -11,9 +11,12 @@
     {% include navigation.html %}
 
     <section id="page" class="container content-section text-center">
+
       <div class="row">
         <div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
 
+        {% include swipe-instructions.html %}
+
         {{ page.content | markdownify }}
 
         <div>

_layouts/post.html

@@ -14,6 +14,8 @@
       <div class="row">
         <div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
 
+          {% include swipe-instructions.html %}
+
           <h1><strong>{{ page.title }}</strong></h1>
           <h4><strong>{{ page.date | date_to_string }}</strong>
             <small> . {{ page.category }} . <a href="{{site.baseurl}}{{page.url }}#disqus_thread">Comments</a>

css/grayscale.scss

@@ -253,6 +253,29 @@ a {
     }
 }
 
+.btn {
+    border-radius: 0;
+    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-weight: 400;
+    -webkit-transition: all .3s ease-in-out;
+    -moz-transition: all .3s ease-in-out;
+    transition: all .3s ease-in-out;
+}
+
+.btn-default {
+    border: 1px solid $primary;
+    color: $primary;
+    background-color: transparent;
+}
+
+.btn-default:hover,
+.btn-default:focus {
+    border: 1px solid $primary;
+    outline: 0;
+    color: #000;
+    background-color: $primary;
+}
+
 /* Added in { Personal } */
 ul.social-buttons li a {
     display: block;
@@ -331,3 +354,59 @@ 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 {
+     display: none;
+     position: absolute;
+     background-color: rgba(0, 0, 0, 0.5);
+     width: 100%;
+     height: 100%;
+     top: 0;
+     right: 0;
+     bottom: 0;
+     left: 0;
+     > div {
+         background-color: rgba(20, 20, 20, 0.6);
+         padding: 10px;
+         @media(min-width:768px) {
+           padding: 20px 0;
+         }
+         #hand-swipe {
+            @media(min-width:992px) {
+              font-size: 100px;
+            }
+            font-size: 80px;
+             display: block;
+             position: relative;
+             animation: swipe ease-in-out 1s alternate infinite;
+         }
+     }
+ }
+
+.ok-btn {
+  background-color: $dark;
+  color: $primary;
+}
+
+ /* END Style for swipe instruction section */