Fixes #75
This commit is contained in:
Panos Sakkos
parent
3fffab87c2
commit
262c38ee85
7 changed files with 154 additions and 61 deletions
23
_config.yml
23
_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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
25
_includes/swipe-instructions.html
Normal file
25
_includes/swipe-instructions.html
Normal file
|
|
@ -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 -->
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue