Merge remote-tracking branch 'refs/remotes/PanosSakkos/master'
This commit is contained in:
Nathan Jaremko
commit
014cd017de
33 changed files with 312 additions and 281 deletions
|
|
@ -1,4 +1,8 @@
|
|||
In alphabetical order:
|
||||
|
||||
Jorge Arias <mail@jorgearias.cl>
|
||||
Kartik Arora <chipset95@yahoo.co.in>
|
||||
Marcus Eisele <marcus.eisele@gmail.com>
|
||||
Nathan Jaremkio <njaremko@gmail.com>
|
||||
Panos Sakkos <panoss@microsoft.com>
|
||||
Prashant Solanki <prs.solanki@live.com>
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@ Have you published your own website by forking { Personal } and now you want to
|
|||
* Blogging functionality
|
||||
* Preview of the latest post in the home page
|
||||
* Archive page
|
||||
* Pagination
|
||||
* Gesture navigation in archive and post pages by swiping
|
||||
* #tags
|
||||
* Disqus comments
|
||||
* Facebook, Twitter, Reddit, Linked In and Google Plus share buttons
|
||||
* Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest, VKontakte share buttons
|
||||
* RSS feed
|
||||
* Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer)
|
||||
* Protection from Email harvesting
|
||||
|
|
@ -55,8 +55,8 @@ Check it live [here](https://panossakkos.github.io/personal-jekyll-theme/blog/in
|
|||
|
||||
### Latest post preview
|
||||
|
||||
### Life Events
|
||||
|
||||
### Timeline
|
||||
|
||||
### Blog Archive
|
||||
|
||||
### Post page
|
||||
|
|
|
|||
31
_config.yml
31
_config.yml
|
|
@ -10,12 +10,24 @@ url: "https://panossakkos.github.io"
|
|||
|
||||
baseurl: /personal-jekyll-theme
|
||||
|
||||
# Google tracking id to track your visitors
|
||||
|
||||
google-tracking-id: "UA-35880426-4"
|
||||
|
||||
# Forces https everywhere in your website, except when you serve it locally
|
||||
# If you are not hosted on Github Pages, and your host doesn't support https
|
||||
# then you should disable it
|
||||
|
||||
force-https: True
|
||||
|
||||
# Sections shown in the index page
|
||||
|
||||
pages_list:
|
||||
About: 'about'
|
||||
Blog: 'latest-post'
|
||||
Timeline: 'timeline'
|
||||
Contact: 'contact'
|
||||
|
||||
#############
|
||||
# HTML Head #
|
||||
#############
|
||||
|
|
@ -63,6 +75,8 @@ twitter-share: True
|
|||
reddit-share: True
|
||||
google-plus-share: True
|
||||
linkedin-share: True
|
||||
pinterest-share: True
|
||||
vkontakte-share: True
|
||||
disqus-shortname: "panossakkos"
|
||||
|
||||
###############
|
||||
|
|
@ -112,24 +126,17 @@ social:
|
|||
|
||||
# Tread carefully if you want to change the variables below this point!
|
||||
|
||||
# Navigation bar links
|
||||
# Blog link in the blog and post pages will point to the blog.html#blog
|
||||
# In the default page it will point to the preview of the last post
|
||||
# Exclusion list from the generated _site
|
||||
|
||||
pages_list:
|
||||
About: 'about'
|
||||
Blog: 'blog'
|
||||
Career: 'career'
|
||||
Contact: 'contact'
|
||||
exclude: ["LICENSE", "README", "CONTRIBUTORS", "scripts"]
|
||||
|
||||
# Pagination path
|
||||
paginate_path: "blog/page:num"
|
||||
|
||||
paginate_path: "blog/page:num/"
|
||||
|
||||
# Enable minification SASS
|
||||
|
||||
sass:
|
||||
style: compressed
|
||||
|
||||
# Exclusion list from the generated _site
|
||||
exclude: ["Rakefile", "LICENSE", "readme.markdown", "vendor"]
|
||||
|
||||
gems: [jekyll-paginate]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<!-- About Start -->
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section id="{{ page.section-type }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
{{ page.content | markdownify }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<!-- Contact Start -->
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section id="{{ page.section-type }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@
|
|||
|
||||
<!-- Custom CSS -->
|
||||
<link href="{{site.baseurl}}/css/grayscale.css" rel="stylesheet">
|
||||
{% if page.section-type == "index" %}
|
||||
<link href="{{site.baseurl}}/css/timeline.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,11 @@
|
|||
<!--* Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com)
|
||||
* Code licensed under the Apache License v2.0.
|
||||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.-->
|
||||
<script>$(window).scroll(function(){50<$(".navbar").offset().top?$(".navbar-fixed-top").addClass("top-nav-collapse"):$(".navbar-fixed-top").removeClass("top-nav-collapse")});$(function(){$("a.page-scroll").bind("click",function(b){var a=$(this);$("html, body").stop().animate({scrollTop:$(a.attr("href")).offset().top},1500,"easeInOutExpo",function(){a.blur()});b.preventDefault()})});$(".navbar-collapse ul li a").click(function(){$(".navbar-toggle:visible").click()});</script>
|
||||
<script>
|
||||
function toggleNavCollapse(){50<$(".navbar").offset().top?$(".navbar-fixed-top").addClass("top-nav-collapse"):$(".navbar-fixed-top").removeClass("top-nav-collapse");}
|
||||
$(document).ready(toggleNavCollapse);
|
||||
$(window).scroll(toggleNavCollapse);$(function(){$("a.page-scroll").bind("click",function(b){var a=$(this);$("html, body").stop().animate({scrollTop:$(a.attr("href")).offset().top-50},1500,"easeInOutExpo",function(){a.blur()});b.preventDefault()})});$(".navbar-collapse ul li a").click(function(){$(".navbar-toggle:visible").click()});
|
||||
</script>
|
||||
|
||||
{% if site.google-tracking-id %}
|
||||
|
||||
|
|
@ -147,4 +151,48 @@
|
|||
|
||||
{% endif %}
|
||||
|
||||
{% if page.section-type == "post" %}
|
||||
|
||||
<!-- Post Gesture Navigation Start -->
|
||||
|
||||
<script type="text/javascript" src="{{site.baseurl}}/js/hammer.min.js"></script>
|
||||
|
||||
<script>
|
||||
var post = document.getElementById('post');
|
||||
|
||||
new Hammer(post).on('swipeleft', function(event) {
|
||||
window.location.replace("{{site.baseurl}}{{page.previous.url}}");
|
||||
});
|
||||
|
||||
new Hammer(post).on('swiperight', function(event) {
|
||||
window.location.replace("{{site.baseurl}}{{page.next.url}}");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Post Gesture Navigation Start -->
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% if page.section-type == "blog" %}
|
||||
|
||||
<!-- Blog Gesture Navigation Start -->
|
||||
|
||||
<script type="text/javascript" src="{{site.baseurl}}/js/hammer.min.js"></script>
|
||||
|
||||
<script>
|
||||
var page = document.getElementById('page');
|
||||
|
||||
new Hammer(page).on('swipeleft', function(event) {
|
||||
window.location.replace("{{site.baseurl}}{{paginator.next_page_path}}");
|
||||
});
|
||||
|
||||
new Hammer(page).on('swiperight', function(event) {
|
||||
window.location.replace("{{site.baseurl}}{{paginator.previous_page_path}}");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Blog Gesture Navigation Start -->
|
||||
|
||||
{% endif %}
|
||||
|
||||
<!-- Javascript End -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<!-- Latest Post Preview Start -->
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section id="{{ page.section-type }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
|
||||
|
|
|
|||
|
|
@ -13,42 +13,31 @@
|
|||
<a class="navbar-brand page-scroll" href="{{site.baseurl}}/index.html#page-top">
|
||||
{% endif %}
|
||||
<div>{% if site.black-favicon %}<img src="{{site.baseurl}}{{ site.black-favicon }}" alt=""> {% endif %}{{ site.title }}</div>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
|
||||
<li class="hidden">
|
||||
<a href="#page-top"></a>
|
||||
</li>
|
||||
|
||||
{% if page.section-type == "index" %}
|
||||
|
||||
<!-- Scroll to section for each page in index -->
|
||||
{% for p in site.pages_list %}
|
||||
<li>
|
||||
<a class="page-scroll" href="#{{ p[1] }}"> {{ p[0] }} </a>
|
||||
<a class="page-scroll" href="#{{ p[1] }}"> {{ p[0] }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
<!-- Blog, Post, Tag pages-->
|
||||
{% for p in site.pages_list %}
|
||||
{% if page.section-type == "blog" and p[0] == "Blog" %}
|
||||
<!-- Blog button in blog.html doesn't refresh the page -->
|
||||
<li>
|
||||
<a class="page-scroll" href="#blog"> {{ p[0] }} </a>
|
||||
</li>
|
||||
{% elsif p[0] == "Blog" %}
|
||||
<li>
|
||||
<a class="page-scroll" href="{{site.baseurl}}/blog/index.html"> {{ p[0] }} </a>
|
||||
</li>
|
||||
<li>
|
||||
{% comment %} If are blog, redirect to index.html of Blog {% endcomment %}
|
||||
{% if p[1] == "latest-post" %}
|
||||
<a class="page-scroll" href="{{site.baseurl}}/blog/index.html"> {{ p[0] }}</a>
|
||||
{% else %}
|
||||
<li>
|
||||
<a class="page-scroll" href="{{site.baseurl}}/index.html#{{ p[1] }}"> {{ p[0] }} </a>
|
||||
</li>
|
||||
<a class="page-scroll" href="{{site.baseurl}}/index.html#{{ p[1] }}"> {{ p[0] }}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,21 @@
|
|||
<div class="pagination">
|
||||
|
||||
<h4>
|
||||
|
||||
|
||||
{% if paginator.previous_page %}
|
||||
<a href="{{site.baseurl}}{{ paginator.previous_page_path }}" class="previous">Newer Posts</a>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.previous_page and paginator.next_page %}
|
||||
|
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<a href="{{site.baseurl}}{{ paginator.next_page_path }}" class="next">Older Posts</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</h4>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination Links End -->
|
||||
|
|
|
|||
|
|
@ -36,6 +36,35 @@
|
|||
<div class="g-plus" data-action="share" data-href="{{site.url}}{{ site.baseurl}}{{page.url}}" data-annotation="bubble"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.vkontakte-share %}
|
||||
<div style="float:left; padding: 0 5px; vertical-align:top; background-color: #0077B5; border-radius:3px">
|
||||
<style type="text/css">
|
||||
vk {color: #fff;}
|
||||
</style>
|
||||
<script type="text/javascript" src="http://vk.com/js/api/share.js?9"; charset="windows-1251"></script>
|
||||
<script type="text/javascript">
|
||||
document.write(VK.Share.button(
|
||||
{
|
||||
url: '{{site.url}}{{ site.baseurl}}{{page.url}}',
|
||||
title: '{{site.title}} | {{page.title}}',
|
||||
description: '{{page.description}}',
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
text: '<vk><i class="fa fa-vk"></i> Share</vk>'
|
||||
}
|
||||
));
|
||||
</script>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if site.pinterest-share %}
|
||||
<div style="float:left; padding: 0 5px; vertical-align:top">
|
||||
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
|
||||
<a data-pin-do="buttonPin" href="https://www.pinterest.com/pin/create/button/" data-pin-config="beside" data-pin-description="{{page.description}}" data-pin-url="{{site.url}}{{ site.baseurl}}{{page.url}}"></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- Share Buttons End -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<!-- Career Start -->
|
||||
<!-- Timeline Start -->
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section id="{{ page.section-type }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
|
||||
|
|
@ -42,4 +42,4 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Career End -->
|
||||
<!-- Timeline End -->
|
||||
|
|
@ -6,18 +6,18 @@
|
|||
|
||||
{% include head.html %}
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
|
||||
<body>
|
||||
|
||||
{% include navigation.html %}
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section id="page" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
|
||||
{{ page.content | markdownify }}
|
||||
|
||||
{% for post in paginator.posts %}
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{site.baseurl}}{{post.url}}"> <strong>{{ post.title }} </strong> </a> <small><a href="{{site.baseurl}}{{post.url}}#disqus_thread">Comments</a></small></h4>
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <br class="visible-xs-block visible-sm-block"><a href="{{site.baseurl}}{{post.url}}"> <strong>{{ post.title }}</strong> </a> <br class="visible-xs-block visible-sm-block"><small><a href="{{site.baseurl}}{{post.url}}#disqus_thread">Comments</a></small></h4>
|
||||
{% endfor %}
|
||||
|
||||
{% include pagination.html %}
|
||||
|
|
@ -26,9 +26,9 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
{% include head.html %}
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
|
||||
<body>
|
||||
|
||||
{% include navigation.html %}
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
|
||||
<h1><strong>{{ page.title }}</strong></h1>
|
||||
|
||||
|
|
@ -20,8 +20,14 @@
|
|||
|
||||
<img class="img-responsive center-block" src="{{site.baseurl}}{{ site.404-img }}" alt="">
|
||||
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -6,32 +6,18 @@
|
|||
|
||||
{% include head.html %}
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" data-offset="151">
|
||||
|
||||
{% include navigation.html %}
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
{% for page in site.pages %}
|
||||
|
||||
{% if page.section-type == "about" %}
|
||||
|
||||
{% include about.html %}
|
||||
|
||||
{% elsif page.section-type == "latest-post" %}
|
||||
|
||||
{% include latest-post.html %}
|
||||
|
||||
{% elsif page.section-type == "career" %}
|
||||
|
||||
{% include career.html %}
|
||||
|
||||
{% elsif page.section-type == "contact" %}
|
||||
|
||||
{% include contact.html %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% for p in site.pages_list %}
|
||||
{% for page in site.pages %}
|
||||
{% if p[1] == page.section-type%}
|
||||
{% include {{ page.path }} %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% include footer.html %}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
{% include head.html %}
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
|
||||
<body>
|
||||
|
||||
{% include navigation.html %}
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section id="post" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
|
||||
<h1><strong>{{ page.title }}</strong></h1>
|
||||
<h4><strong>{{ page.date | date_to_string }}</strong>
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
{% include head.html %}
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
|
||||
<body>
|
||||
|
||||
{% include navigation.html %}
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
|
||||
<div id="archives">
|
||||
<div>
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<section class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ The contact part of the index page is consisted of two elements:
|
|||
</ol>
|
||||
|
||||
You can modify its text from the contact.html file.
|
||||
Then in the _config.yml set the email variable to your email.
|
||||
Then in the \_config.yml set the email variable to your email.
|
||||
|
||||
Don't be afraid of Email Harvesting, write your email properly, and the page will perform javascript obfuscation.
|
||||
|
||||
<small>Many thanks to <a href="https://github.com/joariasl" target="_blank">@joariasl</a> for this feature!</small>
|
||||
<small>Many thanks to <a href="https://github.com/joariasl" target="blank">@joariasl</a> for this feature!</small>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@ tags: [ 'tutorial' ]
|
|||
---
|
||||
|
||||
Social buttons (rendered in the footer) are great for having a small hub with all your social footprint.
|
||||
In order to change them, go to _config.yml and edit the social list:
|
||||
In order to change them, jump to \_config.yml and edit the social list:
|
||||
|
||||
<pre style="text-align: left">
|
||||
social:
|
||||
- title: "github"
|
||||
url: "https://github.com/"
|
||||
- title: "linkedin"
|
||||
url: "http://no.linkedin.com/"
|
||||
url: "http://linkedin.com/"
|
||||
- title: "youtube"
|
||||
url: "http://youtube.com/"
|
||||
- title: "rss"
|
||||
|
|
@ -24,4 +24,3 @@ social:
|
|||
The titles of the social link are used to find the icon in Font Awesome.
|
||||
|
||||
To look for an icon, search for one at the [Font Awesome icon gallery](https://fortawesome.github.io/Font-Awesome/icons/) and put the icon name (without fa-) as title.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Adding a life event
|
||||
title: Adding a life event in the Timeline
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
One of the cool features of { Personal } is that enables you to tell your life's story in
|
||||
One of the coolest features of { Personal } is that enables you to tell your life's story in
|
||||
the form of a timeline of photos, dates and text descriptions. Let's see how it works.
|
||||
|
||||
Open the _config.yml and find the events list definition, it should look like this:
|
||||
Open the \_config.yml and find the events list definition, it should look like this:
|
||||
|
||||
<pre style="text-align: left">
|
||||
events:
|
||||
|
|
|
|||
|
|
@ -6,14 +6,16 @@ category: tech
|
|||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
### Creating a new post
|
||||
|
||||
Run the ./scripts/newpost script with the file name of the post as an argument:
|
||||
|
||||
<pre style="text-align: left">
|
||||
cd <your { personal } repo>
|
||||
cd <your { Personal } repo>
|
||||
./scripts/newpost hello-world
|
||||
</pre>
|
||||
|
||||
A a new post template with name YYYY-MM-DD-hello-world.md will be created under ./_posts, with the current date.
|
||||
A a new post template with name YYYY-MM-DD-hello-world.md will be created under ./\_posts, with the current date.
|
||||
|
||||
In the created post, just replace the Title, Category and tags and you can
|
||||
start writing your post in markdown right bellow the end of the post header.
|
||||
|
|
@ -35,6 +37,12 @@ tags: [ 'tag1', 'tag2' ]
|
|||
|
||||
The *layout* and *section-type* are used by the theme.
|
||||
|
||||
### Post navigation
|
||||
|
||||
You can navigate between the posts by swiping left/right in the post pages!
|
||||
|
||||
### Hashtags
|
||||
|
||||
Note: *{ Personal }* generates a static page, just like all Jekyll themes.
|
||||
As a result we have to create the tag pages before building and publishing the site.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,14 +8,18 @@ tags: [ 'tutorial' ]
|
|||
|
||||
A website is truly personal if it's your blog as well, this place of the internet where you can place your thoughts about anything!
|
||||
|
||||
### Latest post preview in Index page
|
||||
|
||||
First of all, you get a preview of the latest post in the index, in order to attract the visitor to visit your blog. The size of this preview is defined by:
|
||||
|
||||
<pre style="text-align: left">
|
||||
post-preview-words: 128
|
||||
post-preview-words: 96
|
||||
</pre>
|
||||
|
||||
Feel free to experiment with different sizes, and pick the best for you.
|
||||
|
||||
### Archive
|
||||
|
||||
A blog is expected to host many posts, so you will need an archive with pagination,
|
||||
which in a nutshell it's a grouping of your posts in pages, in reverse chronological
|
||||
order. You can define the number of posts that are displayed per page by changing:
|
||||
|
|
@ -24,17 +28,26 @@ order. You can define the number of posts that are displayed per page by changin
|
|||
paginate: 5
|
||||
</pre>
|
||||
|
||||
You can select the social network share buttons that you want under each post from:
|
||||
Note that you can navigate the pages of the Archive by swiping left/right!
|
||||
|
||||
### Share buttons
|
||||
|
||||
Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest, VKontakte share buttons are available which can be enabled or disabled by setting the following:
|
||||
|
||||
<pre style="text-align: left">
|
||||
fb-share: True
|
||||
twitter-share: True
|
||||
reddit-share: True
|
||||
google-plus-share: True
|
||||
linkedin-share: True
|
||||
pinterest-share: True
|
||||
vkontakte-share: True
|
||||
</pre>
|
||||
|
||||
And you can enable <a href="http://www.disqus.com" target="_blank">Disqus</a> comments
|
||||
by just setting your Disqus username here:
|
||||
### Comments
|
||||
|
||||
And you can enable <a href="http://www.disqus.com" target="blank">Disqus</a> comments by just setting your Disqus username here:
|
||||
|
||||
<pre style="text-align: left">
|
||||
disqus-shortname: "<YOUR DISQUS USERNAME>"
|
||||
disqus-shortname: "YOUR DISQUS USERNAME"
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Modifying the Intro
|
||||
title: Modifying the Header
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
The intro part of the index page is consisted of three elements:
|
||||
The intro part of the index page is consisted of four elements:
|
||||
|
||||
<ol>
|
||||
<li>A black favicon</li>
|
||||
|
|
@ -38,9 +38,9 @@ lines: # You can add HTML Tags in the Text
|
|||
- text: "Where’s your will to be weird?"
|
||||
</pre>
|
||||
|
||||
<small>Many thanks to <a href="https://github.com/prashantsolanki3" target="_blank">@prashantsolanki3</a> for this feature!</small>
|
||||
<small>Many thanks to <a href="https://github.com/prashantsolanki3" target="blank">@prashantsolanki3</a> for this feature!</small>
|
||||
|
||||
In order to set the background and your image, modify the following variables in _config:
|
||||
In order to set the background and your image, modify the following variables in \_config:
|
||||
|
||||
<pre style="text-align: left">
|
||||
black-favicon: "/img/black-lab-glass.ico"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ category: tech
|
|||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
In the _config.yml, find and set the variables of the Head section:
|
||||
In the \_config.yml, find and set the variables of the Head section:
|
||||
|
||||
<pre style="text-align: left">
|
||||
#############
|
||||
|
|
@ -37,10 +37,10 @@ If you don't want Google tracking, set it to an empty string, or simply remove t
|
|||
|
||||
If you are using *{ Personal }* as a Github repository theme, set the repository name as the site.baseurl, in the site configuration file.
|
||||
This step is essential, since its related to file paths!
|
||||
And when you serve the website locally, don't forget to set the baseurl to an empty string, like this:
|
||||
In order to serve the website locally just run:
|
||||
|
||||
<pre style="text-align: left">
|
||||
jekyll serve --baseurl ""
|
||||
./scripts/serve
|
||||
</pre>
|
||||
|
||||
<small>Many thanks to <a href="https://github.com/prashantsolanki3" target="_blank">@prashantsolanki3</a> for the language support!</small>
|
||||
<small>Many thanks to <a href="https://github.com/joariasl" target="blank">@joariasl</a> for the language support! </small>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ tags: [ 'tutorial' ]
|
|||
|
||||
Click the view more posts link bellow, to see the currently available post-tutorials to help you get your { Personal } website up and running quicker!
|
||||
|
||||
Note that every time you update the site configuration (_config.yml), you will need
|
||||
Note that every time you update the site configuration (\_config.yml), you will need
|
||||
to cancel the serving (*Ctr + C*) and serve the website again.
|
||||
|
||||
Any contributions, feedback and issues to the <a href="https://github.com/PanosSakkos/personal-jekyll-theme" target="_blank">repo</a> are more than welcome!
|
||||
Any contributions, feedback or issues to the <a href="https://github.com/PanosSakkos/personal-jekyll-theme" target="blank">repo</a> are more than welcome!
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
// Variables
|
||||
|
||||
$primary: #fed136;
|
||||
$primary: #00cdff;
|
||||
$dark: #000;
|
||||
$light: #fff;
|
||||
|
||||
$navbar-text-shadow: true;
|
||||
$header-text-shadow: true;
|
||||
$header-background-color: $dark;
|
||||
$intro-text-color: $light;
|
||||
$navbar-color: $light;
|
||||
$navbar-lg-collapse-background-color: $header-background-color;
|
||||
$navbar-lg-background: transparent;
|
||||
$navbar-sm-background-color: $navbar-lg-collapse-background-color;
|
||||
|
||||
$social-buttons-color: $primary;
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
layout: null
|
||||
section-type: career
|
||||
title: Career
|
||||
---
|
||||
## Career
|
||||
239
css/grayscale.scss
Executable file → Normal file
239
css/grayscale.scss
Executable file → Normal file
|
|
@ -31,7 +31,7 @@ h5,
|
|||
h6 {
|
||||
margin: 0 0 35px;
|
||||
text-transform: uppercase;
|
||||
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
|
@ -40,10 +40,7 @@ p {
|
|||
margin: 0 0 25px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media(min-width:767px) {
|
||||
p {
|
||||
@media(min-width:768px) {
|
||||
margin: 0 0 35px;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
|
|
@ -57,95 +54,85 @@ a {
|
|||
transition: all .2s ease-in-out;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: darken($primary, 20%);
|
||||
text-decoration: none;
|
||||
color: darken($primary,20%);
|
||||
}
|
||||
}
|
||||
|
||||
.light {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
text-align: center;
|
||||
margin: 0 0 35px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.navbar-custom {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid rgba($light, 0.3);
|
||||
text-transform: uppercase;
|
||||
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
background-color: $dark;
|
||||
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
background-color: $navbar-sm-background-color;
|
||||
|
||||
/* Fix height limit and scroll for small screen and many items menu */
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.navbar-toggle {
|
||||
padding: 4px 6px;
|
||||
font-size: 16px;
|
||||
color: $navbar-color;
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
.navbar-toggle {
|
||||
padding: 4px 6px;
|
||||
font-size: 16px;
|
||||
color: $light;
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $light;
|
||||
}
|
||||
ul {
|
||||
font-size: 14px;
|
||||
color: $navbar-color;
|
||||
@if $header-text-shadow{
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
text-align: center;
|
||||
li {
|
||||
&.active {
|
||||
outline: nonte;
|
||||
background-color: rgba($light, 0.3);
|
||||
}
|
||||
a {
|
||||
-webkit-transition: background .3s ease-in-out;
|
||||
-moz-transition: background .3s ease-in-out;
|
||||
transition: background .3s ease-in-out;
|
||||
&:hover,
|
||||
&:hover {
|
||||
/* color: rgba($light, 0.8); */
|
||||
outline: none;
|
||||
background-color: rgba($light, 0.3);
|
||||
}
|
||||
&:focus,
|
||||
&.active {
|
||||
&:active {
|
||||
outline: none;
|
||||
background-color: rgba($light, 0.3);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
outline: none;
|
||||
a {
|
||||
background-color: rgba($light, 0.3);
|
||||
&:hover {
|
||||
color: $navbar-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:767px) {
|
||||
.navbar {
|
||||
@media(min-width:768px) {
|
||||
padding: 20px 0;
|
||||
border-bottom: none;
|
||||
letter-spacing: 1px;
|
||||
background: transparent;
|
||||
background: $navbar-lg-background;
|
||||
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||
transition: background .5s ease-in-out,padding .5s ease-in-out;
|
||||
}
|
||||
|
||||
.top-nav-collapse {
|
||||
padding: 0;
|
||||
background-color: $dark;
|
||||
}
|
||||
|
||||
.navbar-custom.top-nav-collapse {
|
||||
border-bottom: 1px solid rgba($light, 0.3);
|
||||
&.top-nav-collapse {
|
||||
padding: 0;
|
||||
background: $navbar-lg-collapse-background-color;
|
||||
border-bottom: 1px solid rgba($light, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,9 +142,11 @@ ol {
|
|||
height: auto;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
color: $light;
|
||||
background: url( {{ site.background-img }} ) no-repeat bottom center scroll;
|
||||
background-color: $dark;
|
||||
color: $intro-text-color;
|
||||
{% if site.background-img %}
|
||||
background: url({{ site.background-img }}) no-repeat bottom center scroll;
|
||||
{% endif %}
|
||||
background-color: $header-background-color;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
|
|
@ -168,68 +157,27 @@ ol {
|
|||
.brand-heading {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 18px;
|
||||
@if $navbar-text-shadow {
|
||||
text-shadow: 1px 0 1px #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:767px) {
|
||||
.intro {
|
||||
@media(min-width:768px) {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
.intro-body {
|
||||
.brand-heading {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 25px;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-top: 15px;
|
||||
padding: 7px 16px;
|
||||
border: 2px solid $light;
|
||||
border-radius: 35px;
|
||||
font-size: 40px;
|
||||
color: $light;
|
||||
background: transparent;
|
||||
-webkit-transition: background .3s ease-in-out;
|
||||
-moz-transition: background .3s ease-in-out;
|
||||
transition: background .3s ease-in-out;
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: $light;
|
||||
background: rgba($light, 0.1);
|
||||
}
|
||||
i.animated {
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 1s;
|
||||
-moz-transition-property: -moz-transform;
|
||||
-moz-transition-duration: 1s;
|
||||
}
|
||||
&:hover {
|
||||
i.animated {
|
||||
-webkit-animation-name: pulse;
|
||||
-moz-animation-name: pulse;
|
||||
-webkit-animation-duration: 1.5s;
|
||||
-moz-animation-duration: 1.5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
from {
|
||||
-webkit-transform: scale(1);
|
||||
|
|
@ -248,7 +196,7 @@ ol {
|
|||
}
|
||||
|
||||
@-moz-keyframes pulse {
|
||||
fom {
|
||||
from {
|
||||
-moz-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
|
@ -265,59 +213,30 @@ ol {
|
|||
}
|
||||
|
||||
.content-section {
|
||||
margin-top: 100px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
width: 100%;
|
||||
padding: 50px 0;
|
||||
color: $light;
|
||||
background: url(../img/downloads-bg.jpg) no-repeat center center scroll;
|
||||
background-color: $dark;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
@media(min-width:767px) {
|
||||
.content-section {
|
||||
padding-top: 250px;
|
||||
@media(min-width:767px) {
|
||||
margin-top: 125px;
|
||||
padding-top: 125px;
|
||||
}
|
||||
|
||||
.download-section {
|
||||
padding: 100px 0;
|
||||
/* Added in { Personal } for responsive images in posts and section contents */
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 400px;
|
||||
margin-top: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.banner-social-buttons {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media(max-width:1199px) {
|
||||
ul.banner-social-buttons {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:767px) {
|
||||
ul.banner-social-buttons {
|
||||
li {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
/* Added in { Personal } */
|
||||
ul,
|
||||
ol {
|
||||
text-align: center;
|
||||
margin: 0 0 35px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
list-style-position: inside;
|
||||
}
|
||||
}
|
||||
|
||||
/* Added in { Personal } */
|
||||
ul.social-buttons li a {
|
||||
display: block;
|
||||
width: 40px;
|
||||
|
|
@ -326,7 +245,7 @@ ul.social-buttons li a {
|
|||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
outline: 0;
|
||||
/* color: #fff; */
|
||||
color: $social-buttons-color;
|
||||
background-color: #222;
|
||||
|
||||
-webkit-transition: all .3s;
|
||||
|
|
@ -337,7 +256,7 @@ ul.social-buttons li a {
|
|||
&:focus,
|
||||
&:active {
|
||||
color: #222;
|
||||
background-color: darken($primary, 10%);
|
||||
background-color: darken($social-buttons-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -360,10 +279,6 @@ footer {
|
|||
background: rgba($light, 0.2);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img::selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -373,9 +288,10 @@ img::-moz-selection {
|
|||
}
|
||||
|
||||
body {
|
||||
webkit-tap-highlight-color: rgba($light, 0.2);
|
||||
-webkit-tap-highlight-color: rgba($light, 0.2);
|
||||
}
|
||||
|
||||
/* Added in { Personal } for Typed Cursor in Header */
|
||||
.typed-cursor{
|
||||
opacity: 1;
|
||||
-webkit-animation: blink 0.7s infinite;
|
||||
|
|
@ -397,3 +313,4 @@ body {
|
|||
50% { opacity:0; }
|
||||
100% { opacity:1; }
|
||||
}
|
||||
/* END Added in { Personal } for Typed Cursor in Header */
|
||||
|
|
|
|||
7
js/hammer.min.js
vendored
Normal file
7
js/hammer.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
section-type: latest-post
|
||||
title: Blog
|
||||
---
|
||||
## Blog
|
||||
|
|
@ -7,7 +7,7 @@ POSTS_DIR = '_posts/'
|
|||
post = ARGV[0]
|
||||
|
||||
File.open(POSTS_DIR + Date.today.strftime("%Y-%m-%d-") + post + '.md', 'w') {|f| f.write(
|
||||
"---\nlayout: post\nsection-type: post\ntitle: <Title>\ncategory: <Category>\ntags: [ '<tag1>', '<tag2>' ]\n---")
|
||||
"---\nlayout: post\nsection-type: post\ntitle: Title\ncategory: Category\ntags: [ 'tag1', 'tag2' ]\n---")
|
||||
}
|
||||
|
||||
puts('[+] Created ' + post + ' post')
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
#!/bin/bash
|
||||
|
||||
jekyll serve --baseurl ""
|
||||
jekyll serve --host "127.0.0.1" --baseurl ""
|
||||
|
|
|
|||
6
timeline.html
Executable file
6
timeline.html
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: null
|
||||
section-type: timeline
|
||||
title: Timeline
|
||||
---
|
||||
## Timeline
|
||||
Loading…
Add table
Add a link
Reference in a new issue