From 3fffab87c21b236f3b82838702caf6369ddaef2e Mon Sep 17 00:00:00 2001
From: Jorge Arias <mail@jorgearias.cl>
Date: Sat, 21 Nov 2015 18:00:13 -0300
Subject: [PATCH 1/2] Show swipe instruction for the first view

In the post and blog pages
Fixed PanosSakkos/personal-jekyll-theme#75
---
 _includes/js.html         | 11 +++++++++++
 _includes/navigation.html | 14 ++++++++++++++
 css/grayscale.scss        | 38 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+)

diff --git a/_includes/js.html b/_includes/js.html
index 0cf5af1..89ae176 100755
--- a/_includes/js.html
+++ b/_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 -->
diff --git a/_includes/navigation.html b/_includes/navigation.html
index 4b40ed4..c4ee8c7 100755
--- a/_includes/navigation.html
+++ b/_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 -->
diff --git a/css/grayscale.scss b/css/grayscale.scss
index 5161b56..7b0784d 100644
--- a/css/grayscale.scss
+++ b/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 */

From 262c38ee85b687ce12a5fa8dec90df1b1f1de433 Mon Sep 17 00:00:00 2001
From: Panos Sakkos <panos.sakkos@gmail.com>
Date: Sun, 22 Nov 2015 22:08:49 +0100
Subject: [PATCH 2/2] Fixes #75

---
 _config.yml                       | 23 +++++---
 _includes/js.html                 | 47 ++++++++++++---
 _includes/navigation.html         | 18 +-----
 _includes/swipe-instructions.html | 25 ++++++++
 _layouts/blog.html                |  3 +
 _layouts/post.html                |  2 +
 css/grayscale.scss                | 97 ++++++++++++++++++++++---------
 7 files changed, 154 insertions(+), 61 deletions(-)
 create mode 100644 _includes/swipe-instructions.html

diff --git a/_config.yml b/_config.yml
index 344d713..edd93b0 100755
--- a/_config.yml
+++ b/_config.yml
@@ -1,12 +1,16 @@
 
 # Site settings
 
+# NB! Set your site's url, otherwise stuff will break :)
+
 url: "https://panossakkos.github.io"
 
 # If you're hosting your site at a Project repository on GitHub pages
 # (https://yourusername.github.io/repository-name)
 # and NOT your user repository (https://yourusername.github.io)
 # then add in the baseurl here, like this: "/repository-name"
+#
+# NB! Without this *nothing* will work, because it's used in every path :)
 
 baseurl: /personal-jekyll-theme
 
@@ -53,7 +57,7 @@ description: "Blog and website of John Smith, blogging mainly for tech. Opinions
 keywords: "smith, jones, personal, jekyll, theme"
 
 ################
-# Intro layout #
+# Header layout #
 ################
 
 black-favicon: "/img/black-lab-glass.ico"
@@ -61,17 +65,17 @@ background-img: "../img/intro-bg.jpg"
 me-img: "/img/jetpacktocat.png"
 
 ##############################
-# Dynamic Text on the header #
+# Dynamic Text on the Header #
 ##############################
 
 dynamic-typing: True
-shuffle: True	# Shuffle the lines.
+shuffle: True # Shuffle the lines.
 loop: True
-loop-count:	False # Set False for infinite loop, or set any number for finite loop.
-type-speed:	10		# Default 10
-start-delay: 200	# Default 200
-delete-delay: 5000	# Default 5000
-lines:			# You can add HTML Tags in the Text
+loop-count: False # Set False for infinite loop, or set any number for finite loop.
+type-speed: 10
+start-delay: 200
+delete-delay: 5000
+lines: # You can add HTML Tags in the Text
   - text: "The lower you fall, the higher you'll fly."
   - text: "Where’s your will to be weird?"
 
@@ -105,6 +109,7 @@ events:
     description: "Started coding"
 
 # First image of the Timeline
+
 timeline-img: "/img/timeline/default.png"
 
 ##################
@@ -137,7 +142,7 @@ social:
 
 ################################################################################
 
-# Tread carefully if you want to change the variables below this point!
+# NB! Tread carefully if you want to change the variables below this point!
 
 # Exclusion list from the generated _site
 
diff --git a/_includes/js.html b/_includes/js.html
index 89ae176..f3ce708 100755
--- a/_includes/js.html
+++ b/_includes/js.html
@@ -214,15 +214,44 @@ $(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>
+{% 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 -->
diff --git a/_includes/navigation.html b/_includes/navigation.html
index c4ee8c7..894ef4c 100755
--- a/_includes/navigation.html
+++ b/_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>
@@ -51,18 +53,4 @@
   </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 -->
diff --git a/_includes/swipe-instructions.html b/_includes/swipe-instructions.html
new file mode 100644
index 0000000..59ae5f1
--- /dev/null
+++ b/_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 -->
diff --git a/_layouts/blog.html b/_layouts/blog.html
index 5b2f49a..7a0960e 100644
--- a/_layouts/blog.html
+++ b/_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>
diff --git a/_layouts/post.html b/_layouts/post.html
index d6c43c5..5799700 100644
--- a/_layouts/post.html
+++ b/_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>
diff --git a/css/grayscale.scss b/css/grayscale.scss
index 7b0784d..8a75401 100644
--- a/css/grayscale.scss
+++ b/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;
@@ -337,35 +360,53 @@ body {
     from {
         left: 5%;
     }
-    to {
-        left: -5%;
-    }
-}
+     to {
+         left: -5%;
+     }
+ }
 
-@-moz-keyframes swipe {
-    from {
-        left: 5%;
-    }
-    to {
-        left: -5%;
-    }
-}
-/* END Animation for hand-swipe */
+ @-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 {
+ /* 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;
-        }
-    }
+             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 */
+
+ /* END Style for swipe instruction section */