updated documentation posts

This commit is contained in:
Panos Sakkos 2015-11-23 23:45:35 +01:00
parent 1ff21c8554
commit eef1c65740
4 changed files with 60 additions and 35 deletions

View file

@ -24,27 +24,6 @@ google-tracking-id: "UA-35880426-4"
force-https: True
syntax-highlight: True
# Sections shown in the index page
pages_list:
About: 'about'
Blog: 'latest-post'
Timeline: 'timeline'
Contact: 'contact'
web-app-mode: True
# Icons for Web App mode
icon-36p: "/img/web-app/icon-36p.png"
icon-48p: "/img/web-app/icon-48p.png"
icon-72p: "/img/web-app/icon-72p.png"
icon-96p: "/img/web-app/icon-96p.png"
icon-144p: "/img/web-app/icon-144p.png"
icon-192p: "/img/web-app/icon-192p.png"
#############
# HTML Head #
#############
@ -61,8 +40,8 @@ keywords: "smith, jones, personal, jekyll, theme"
################
black-favicon: "/img/black-lab-glass.ico"
background-img: "../img/intro-bg.jpg"
me-img: "/img/jetpacktocat.png"
##############################
# Dynamic Text on the Header #
@ -79,6 +58,31 @@ lines: # You can add HTML Tags in the Text
- text: "The lower you fall, the higher you'll fly."
- text: "Wheres your will to be weird?"
me-img: "/img/jetpacktocat.png"
syntax-highlight: True
# Sections shown in the index page
pages_list:
About: 'about'
Blog: 'latest-post'
Timeline: 'timeline'
Contact: 'contact'
# Web app mode
web-app-mode: True
# Icons for Web App mode
icon-36p: "/img/web-app/icon-36p.png"
icon-48p: "/img/web-app/icon-48p.png"
icon-72p: "/img/web-app/icon-72p.png"
icon-96p: "/img/web-app/icon-96p.png"
icon-144p: "/img/web-app/icon-144p.png"
icon-192p: "/img/web-app/icon-192p.png"
########
# Blog #
########

View file

@ -160,7 +160,9 @@ $(window).scroll(toggleNavCollapse);$(function(){$("a.page-scroll").bind("click"
<script>
function addTohistory() {
history.pushState({}, '{{page.title}}', '{{site.url}}{{site.baseurl}}{{page.url}}');
if (!window.location.host.startsWith("127.0.0.1")) {
history.pushState({}, '{{page.title}}', '{{site.url}}{{site.baseurl}}{{page.url}}');
}
}
</script>

View file

@ -6,12 +6,15 @@ category: tech
tags: [ 'tutorial']
---
You can make your website behave like a native web app in iOS and Android devices
by setting the web-app-mode variable to True and providing links for the icons for each resolution:
by providing links for the icons for each resolution:
<pre><code data-trim class="yaml">
# Web app mode
web-app-mode: True
# Icons for Web App mode
icon-36p: "/img/web-app/icon-36p.png"
icon-48p: "/img/web-app/icon-48p.png"
icon-72p: "/img/web-app/icon-72p.png"
@ -20,6 +23,8 @@ icon-144p: "/img/web-app/icon-144p.png"
icon-192p: "/img/web-app/icon-192p.png"
</code></pre>
<small>If you want to disable this feature, simply set the web-app-mode variable to false</small>
This is how the website will look when added to the homescreen:
![iOS](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/ios.jpg)

View file

@ -6,20 +6,37 @@ category: tech
tags: [ 'tutorial' ]
---
The intro part of the index page is consisted of four elements:
The intro part of the index page (Header) is consisted of four elements:
<ol>
<li>A black favicon</li>
<li>Text</li>
<li>Background image</li>
<li>Welcome text</li>
<li>Your image</li>
</ol>
Your text can be either dynamically typed when the visitor is viewing your index page, or it can be fixed.
## Black favicon
If you want to disable the dynamic typing, set the site.dynamic-typing to false and type your intro text in the index.html file.
The black favicon is an image on the left of the navigation bar.
Preferably it should be a black and white version of your favicon.
You can add your desired dynamically typed text in the lines list:
<pre><code data-trim class="yaml">
black-favicon: "/img/black-lab-glass.ico"
</code></pre>
## Background image
In order to set the background, set the path to following variable:
<pre><code data-trim class="yaml">
background-img: "../img/intro-bg.jpg"
</code></pre>
<small>NB! Keep the .. in the beginning of the background image path</small>
## Welcome text
The welcome text is controlled by the following (self-explanatory) variables:
<pre><code data-trim class="yaml">
##############################
@ -38,17 +55,14 @@ lines: # You can add HTML Tags in the Text
- text: "Wheres your will to be weird?"
</code></pre>
<small>Many thanks to <a href="https://github.com/prashantsolanki3" target="blank">@prashantsolanki3</a> for this feature!</small>
## Your image
In order to set the background and your image, modify the following variables in \_config:
You can set your image from the following variable:
<pre><code data-trim class="yaml">
black-favicon: "/img/black-lab-glass.ico"
background-img: "../img/intro-bg.jpg"
me-img: "/img/jetpacktocat.png"
</code></pre>
The black favicon is an image on the left of the navigation bar.
Preferably it should be a black and white version of your favicon.
<small>Many thanks to <a href="https://github.com/prashantsolanki3" target="blank">@prashantsolanki3</a> for this feature!</small>
All set!