diff --git a/README.md b/README.md index 233d370..5b46ef6 100755 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ You can watch it in action [here](https://panossakkos.github.io/personal-jekyll- * Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest and VKontakte share buttons * RSS feed * Cool (anti-procrastinating) 404 page -* [Android] Web App mode(https://developer.chrome.com/multidevice/android/installtohomescreen) +* iOS and Android Web App mode * Forcing of https protocol * Protection from Email harvesting * Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer) @@ -69,7 +69,10 @@ The theme contains documentation in the form of [blog posts](https://panossakkos ### Mobile rendering ![Web App](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/web-app.jpg) ### Web App mode -![Pinned](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/pinned.jpg) + +![iOS](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/ios.jpg) + +![Android](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/pinned.jpg) ## How to run locally diff --git a/_config.yml b/_config.yml index 7121989..2603944 100755 --- a/_config.yml +++ b/_config.yml @@ -32,7 +32,8 @@ pages_list: web-app-mode: True -# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen +# 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" diff --git a/_includes/force-https.html b/_includes/force-https.html new file mode 100644 index 0000000..d0c7f6c --- /dev/null +++ b/_includes/force-https.html @@ -0,0 +1,13 @@ + +{% if site.force-https %} + + + + + + +{% endif %} diff --git a/_includes/head.html b/_includes/head.html index 1bec86c..813d3e7 100755 --- a/_includes/head.html +++ b/_includes/head.html @@ -2,13 +2,7 @@ - {% if site.force-https %} - - {% endif %} + {% include force-https.html %} @@ -46,21 +40,9 @@ {% endif %} - {% if site.web-app-mode %} + {% include web-app.html %} - - - - - {% endif %} - - {% if site.syntax-highlight and page.section-type == "post"%} - - - - - - {% endif %} + {% include syntax-highlight.html %} diff --git a/_includes/syntax-highlight.html b/_includes/syntax-highlight.html new file mode 100644 index 0000000..f91d833 --- /dev/null +++ b/_includes/syntax-highlight.html @@ -0,0 +1,8 @@ + +{% if site.syntax-highlight and page.section-type == "post"%} + + + + + +{% endif %} diff --git a/_includes/web-app.html b/_includes/web-app.html new file mode 100644 index 0000000..e7753eb --- /dev/null +++ b/_includes/web-app.html @@ -0,0 +1,18 @@ + +{% if site.web-app-mode %} + + + + + + + + + + + + + + + +{% endif %} diff --git a/_posts/2015-06-22-web-app-mode.md b/_posts/2015-06-22-web-app-mode.md index f26d2ab..4b40973 100644 --- a/_posts/2015-06-22-web-app-mode.md +++ b/_posts/2015-06-22-web-app-mode.md @@ -5,15 +5,13 @@ title: Web app mode category: tech tags: [ 'tutorial'] --- -You can make your website behave like a native web app in -[Android](https://developer.chrome.com/multidevice/android/installtohomescreen) -devices by setting the web-app-mode variable to True and providing links for the -icons for each resolution: +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: 

 web-app-mode: True
 
-# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
+# 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"
@@ -24,10 +22,10 @@ icon-192p: "/img/web-app/icon-192p.png"
 
 This is how the website will look when added to the homescreen:
 
-![Pinned](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/pinned.jpg)
+![iOS](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/ios.jpg)
+
+![Android](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/pinned.jpg)
 
 And when the user opens it (note that it renders in fullscreen):
 
 ![Web App](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/web-app.jpg)
-
-iOS Web App support is on [its](https://github.com/PanosSakkos/personal-jekyll-theme/issues/88) way