Fixes #75

_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.
+loop-count: False # Set False for infinite loop, or set any number for finite loop.
-type-speed:	10		# Default 10
+type-speed: 10
-start-delay: 200	# Default 200
+start-delay: 200
-delete-delay: 5000	# Default 5000
+delete-delay: 5000
-lines:			# You can add HTML Tags in the Text
+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
 

_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" %}
+{% if page.section-type == "blog" %}
-<script>
+
-  $(document).ready(function(){
+  <!-- Swipe Instructions for Blog Start -->
-    if(!localStorage.getItem('swipeshowed')){
+
-      $("#swipe-instruction").modal();
+  <script>
-      localStorage.setItem('swipeshowed', true);
+    $(document).ready(function(){
-    }
+      if(!localStorage.getItem('blog-swipeshowed')){
-  });
+        $("#swipe-instruction").fadeIn();
-</script>
+        $("#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>
@@ -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 -->

_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;
@@ -337,35 +360,53 @@ body {
     from {
         left: 5%;
     }
-    to {
+     to {
-        left: -5%;
+         left: -5%;
-    }
+     }
-}
+ }
 
-@-moz-keyframes swipe {
+ @-moz-keyframes swipe {
-    from {
+     from {
-        left: 5%;
+         left: 5%;
-    }
+     }
-    to {
+     to {
-        left: -5%;
+         left: -5%;
-    }
+     }
-}
+ }
-/* END Animation for hand-swipe */
+ /* END Animation for hand-swipe */
 
-/* Style for swipe instruction section */
+ /* Style for swipe instruction section */
-#swipe-instruction {
+ #swipe-instruction {
-    .modal-content {
+     display: none;
-        background-color: rgba(20, 20, 20, 0.6);
+     position: absolute;
-        padding: 10px;
+     background-color: rgba(0, 0, 0, 0.5);
-        @media(min-width:768px) {
+     width: 100%;
-          padding: 100px 0;
+     height: 100%;
-        }
+     top: 0;
-        #hand-swipe {
+     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;
+             display: block;
-            position: relative;
+             position: relative;
-            animation: swipe ease-in-out 1s alternate infinite;
+             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 */