Updated various layout parts and added a download page

_data/footer.yml

@@ -1,16 +1,34 @@
 # Footer navigation links
 
-- title: Donate via PayPal
+- title: Visit us on
-  url: https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal%40hexad%2edk&item_name=Duplicati%20Donation&no_shipping=2&no_note=1&tax=0&currency_code=EUR&bn=PP%2dDonationsBF&charset=UTF%2d8&lc=US
+  items:
-  
-- title: Donate via Bitcoin
-  url: bitcoin:1LSRaoUMHe6W7SZaPwdW5KffRKmyqGrDWN 
-  
   - title: Visit us on Facebook
+    image: images/facebook.png
     url: http://www.facebook.com/pages/Duplicati/105118456272281
     
   - title: Visit us On Google+  
+    image: images/googleplus.png
     url: https://plus.google.com/105271984558189185842
 
+  - title: Visit us On Google Groups
+    image: images/googlegroups.png
+    url: https://gitter.im/duplicati/Lobby
+
   - title: Visit us On Gitter
+    image: images/gitter.png
     url: https://gitter.im/duplicati/Lobby
+
+  - title: Visit us On GitHub
+    image: images/github.png
+    url: https://github.com/duplicati/duplicati
+
+- title: Donate
+  items:
+  - title: Donate via PayPal
+    image: images/paypal.png
+    url: https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal%40hexad%2edk&item_name=Duplicati%20Donation&no_shipping=2&no_note=1&tax=0&currency_code=EUR&bn=PP%2dDonationsBF&charset=UTF%2d8&lc=US
+    
+  - title: Donate via Bitcoin
+    image: images/bitcoin.png
+    url: bitcoin:1LSRaoUMHe6W7SZaPwdW5KffRKmyqGrDWN 
+

_data/navigation.yml

@@ -1,7 +1,7 @@
 # Site navigation links
 
-- title: Home
+- title: Download
-  url: /
+  url: /download
   excerpt:
   image:
 

_includes/favicon.html

@@ -0,0 +1,17 @@
+    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">    

_includes/footer.html

@@ -1,15 +1,28 @@
 <footer role="contentinfo" id="site-footer">
     <nav role="navigation" class="menu bottom-menu">
+        <div class="inner-float">
+          {%if site.owner.gitterroom %}
           <ul class="menu-item">
-		{% for link in site.data.footer %}
+            <li class="first btn" id="sidecar-target">Open chat</li>
+          </ul>
+          {% endif %}
+
+            {% for group in site.data.footer %}
+            <ul class="menu-item">
+                <li class="first">{{ group.title }}:</li>
+              {% for link in group.items %}
                 {% if link.url contains 'http' %}
                   {% assign domain = '' %}
                 {% else %}
                   {% assign domain = site.url %}
                 {% endif %}
-			<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
+                <li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}><img alt="{{ link.title }}" src="{{ site.url }}/{{ link.image }}" /></a></li>
                 {% endfor %}
            </ul>
+          {% endfor %}
+
+
+        </div>
     </nav><!-- /.bottom-menu -->
     <!--
     <p class="copyright">&#169; {{ site.time | date: '%Y' }} <a href="{{ site.url }}">{{ site.title }}</a> powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> + <a href="http://mmistakes.github.io/skinny-bones-jekyll/" rel="nofollow">Skinny Bones</a>.</p>

_includes/gitter-sidecar.html

@@ -1,7 +1,9 @@
 {% if site.owner.gitterroom %}
 <script>
   ((window.gitter = {}).chat = {}).options = {
-    room: '{{ site.owner.gitterroom }}'
+    room: '{{ site.owner.gitterroom }}',
+    activationElement: '#sidecar-target',
+    showChatByDefault: false
   };
 </script>
 <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

_layouts/default.html

@@ -11,35 +11,22 @@
     {% include open-graph.html %}
     {% include analytics.html %}
     {% include gitter-sidecar.html %}
+    {% include favicon.html %}
 
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
 
     <link href="{{ site.url }}/atom.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Atom Feed">
     <link href="{{ site.url }}/sitemap.xml" type="application/xml" rel="sitemap" title="Sitemap">
 
+    <script src="{{ site.url }}/js/vendor/jquery-1.9.1.min.js"></script>
+    <script src="{{ site.url }}/js/main.js"></script>
+    {% include lightgallery.html %}
+
     <meta name="HandheldFriendly" content="True">
     <meta name="MobileOptimized" content="320">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="cleartype" content="on">
 
-    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-    <meta name="theme-color" content="#ffffff">    
-
     <link rel="stylesheet" href="{{ site.url }}/css/main.css">
     <link type="text/css" rel="stylesheet" href="{{ site.url }}/css/lightgallery.min.css" /> 
     <!-- HTML5 Shiv and Media Query Support for IE -->
@@ -55,14 +42,19 @@
     {% include header.html %}
     {% include navigation-sliding.html %}
     
+    {% if page.image.parallax %}
+    <div class="page-lead" style="background-image:url({{ site.url }}/images/{{ page.image.parallax }})">
+      <div class="wrap page-lead-content">
+        <h1>Duplicati 2.0</h1>
+        <h2>Store securely encrypted backups on cloud storage services!
+      </div><!-- /.page-lead-content -->
+    </div><!-- /.page-lead -->
+    {% endif %}
+
     <div id="page-wrapper">
       {{ content }}
-      {% include footer.html %}
     </div>
-
+    {% include footer.html %}
-    <script src="{{ site.url }}/js/vendor/jquery-1.9.1.min.js"></script>
-    <script src="{{ site.url }}/js/main.js"></script>
-    {% include lightgallery.html %}
 
   </body>
 

_layouts/home.html

@@ -11,6 +11,7 @@
     {% include open-graph.html %}
     {% include analytics.html %}
     {% include gitter-sidecar.html %}
+    {% include favicon.html %}
     {% if author.google.plus %}<link rel="author" href="https://plus.google.com/{{ author.google.plus }}"/>{% endif %}
 
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
@@ -40,7 +41,7 @@
       <div class="wrap page-lead-content">
         <h1>Duplicati 2.0</h1>
         <h2>Store securely encrypted backups on cloud storage services!<br />Free for Windows, macOS and Linux</h2>
-        <a href="https://github.com/duplicati/duplicati/releases" class="btn">Download 2.0 (experimental)</a> &nbsp;&nbsp; or &nbsp;&nbsp; <a href="
+        <a href="{{ site.url }}/download" class="btn">Download 2.0 (experimental)</a> &nbsp;&nbsp; or &nbsp;&nbsp; <a href="
 https://sites.google.com/a/duplicati.com/duplicati/home" class="btn-inverse">Have a look at  1.3.4</a>
       </div><!-- /.page-lead-content -->
     </div><!-- /.page-lead -->

_layouts/media.html

@@ -19,7 +19,6 @@ layout: default
 		<div class="inner-wrap">
 			<div id="content" class="page-content" itemprop="articleBody">
 				{{ content }}
-				<hr />
 				<footer class="page-footer">
 					{% if page.share != false %}{% include share-this.html %}{% endif %}
 					{% include page-meta.html %}

_sass/_base.scss

@@ -388,6 +388,24 @@ nav {
   }
 }
 
+#site-footer {
+  nav {
+      ul {
+        float: right;
+        margin: em(10) em(20);
+        padding: 0;    
+      }
+
+    li {
+        margin-right: em(10);
+      a {
+        margin: 0px;
+        height: initial;
+      }
+    }
+  }
+}
+
 /*
    Global animation transition
    ========================================================================== */
@@ -395,3 +413,11 @@ nav {
 b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, .highlight {
     @include transition (color 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out);
 }
+
+#sidecar-target {
+    padding: em(5) em(10);
+    background-color: $primary-color;
+    color: darken($white, 5);
+    cursor: pointer;
+    margin-bottom: 0px;
+}

_sass/_download.scss

@@ -0,0 +1,35 @@
+.downloadlinks {
+	text-align: center;
+	color: $light-text-color;
+	.link {
+		.btn, btn-inverse {
+			@include font-size(18,yes,28);
+			p {
+				display: inline;
+				padding-right: em(10);
+				padding-left: em(10);
+			}
+			a {
+				color: $white;
+			}
+			img {
+				padding-right: em(10);
+				padding-left: em(10);
+			}
+		}
+	}
+
+	.alt-link {
+		.btn {
+			background-color: lighten($primary-color, 10);
+			&:hover {
+				background-color: $primary-color;
+			}
+		}
+	}
+
+	.version-number {
+		padding-left: em(10);
+		display: none;
+	}
+}

_sass/_layout.scss

@@ -110,7 +110,7 @@
 			font-weight: 700;
 			@include font-size(16,no);
 			line-height: .5 * $masthead-height; // half the height to center vertically
-			color: $black;
+			color: $light-text-color;
 		}
 	}
 }
@@ -344,10 +344,11 @@
    ========================================================================== */
 
 #site-footer {
+	.inner-float {
 		@include outer-container;
-	margin-top: (3 * (0px + $doc-line-height));
+		padding-top: (0px + $doc-line-height) / 3;
-	margin-top: (3 * (0rem + ($doc-line-height / $doc-font-size)));
 		padding-bottom: 0px;
+	}
 	font-family: $alt-font;
   /* Copyright text */
 	.copyright {

_sass/_variables.scss

@@ -29,6 +29,7 @@ $bottom-menu-color            : #e9e9e9;
 
 $text-color                  	: #313130;
 $caption-color                : mix($white, $text-color, 25%);
+$light-text-color             : lighten($black, 65);
 
 $base-color                  	: #343434;
 $comp-color                  	: complement($base-color);

css/main.scss

@@ -48,6 +48,7 @@ sitemap: false
 @import "toc"; /* table of contents */
 @import "breadcrumbs";
 @import "syntax";
+@import "download";
 
 /*
    Page specific

download/index.md

@@ -0,0 +1,70 @@
+---
+layout: media
+share: false
+permalink: /download
+image:
+  parallax: background-1600x800.jpg
+---
+
+<style type="text/css">
+    #main div.inner-wrap { width: 100%; }
+</style>
+
+<div id="downloadlinks" class="downloadlinks">
+    <h2>Download the latest and greatest version of Duplicati here:</h2>
+
+    <div id="current-os">
+    
+    </div>
+
+    <div id="other-os">
+        <div id="other-os-label">other versions and operating systems:</div>
+        <div id="os-windows" class="link"><a id="link-msi64" class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/windows.png" />Windows <div class="version-number"></div></a></div>
+        <div id="os-linux" class="link"><a id="link-deb" class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/debian.png" />Debian <img src="../images/download/ubuntu.png" />Ubuntu <div class="version-number"></div></a></div>
+        <div id="os-linux" class="link"><a id="link-rpm" class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/fedora.png" />Fedora <img src="../images/download/redhat.png" />RedHat <div class="version-number"></div></a></div>
+        <div id="os-mac" class="link"><a id="link-dmg" class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/mac.png" />macOS / OSX <div class="version-number"></div></a></div>
+    </div>
+
+
+    <div id="alternates">
+        <div>less frequently used items:</div>
+        <div id="os-win32" class="link alt-link"><a id="link-msi86" class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/windows.png" />Windows 32bit <div class="version-number"></div></a></div>
+        <div id="os-synology" class="link alt-link"><a id="link-spk" class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/synology.png" /> <div class="version-number"></div></a></div>
+        <div id="os-zip" class="link alt-link"><a id="link-zip" class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/zip.png" />Zip file <div class="version-number"></div></a></div>
+
+
+    </div>
+
+    <div id="alternates">
+        <div>for developers and system administrators:</div>
+
+        <div id="os-source" class="link alt-link"><a class="btn" href="https://github.com/duplicati/duplicati"><img src="../images/download/github.png" />Source code - on GitHub</a></div>
+
+        <div id="os-older" class="link alt-link"><a class="btn" href="https://github.com/duplicati/duplicati/releases"><img src="../images/download/older.png" />Other versions - older or testing</a></div>
+    </div>
+</div>
+
+<script src="{{ site.url }}/js/plugins/jquery.client.js" ></script>
+<!-- <script src="{{ site.url }}/js/download.js" ></script>    -->
+<script src="http://updates.duplicati.com/experimental/latest-installers.js"></script>
+
+<script type="text/javascript">
+$(document).ready(function(){
+ $("#os-" + $.client.os.toLowerCase()).addClass('current');
+ $('#downloadlinks').addClass('has-current');
+
+ var curel = $("#os-" + $.client.os.toLowerCase());
+ if (curel.length > 0)
+ {
+    $('#current-os').prepend(curel);
+    $('#other-os-label').show();
+ }
+
+ $('.version-number').html(duplicati_installers.version.trim());
+ for(var key in duplicati_installers)
+    if (duplicati_installers[key].url)
+        $('#link-' + key).attr('href', duplicati_installers[key].url);
+ $('.version-number').css('display', 'inline');
+});
+</script>
+

js/plugins/jquery.client.js

@@ -0,0 +1,123 @@
+(function() {
+	
+	var BrowserDetect = {
+		init: function () {
+			this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
+			this.version = this.searchVersion(navigator.userAgent)
+				|| this.searchVersion(navigator.appVersion)
+				|| "an unknown version";
+			this.OS = this.searchString(this.dataOS) || "an unknown OS";
+		},
+		searchString: function (data) {
+			for (var i=0;i<data.length;i++)	{
+				var dataString = data[i].string;
+				var dataProp = data[i].prop;
+				this.versionSearchString = data[i].versionSearch || data[i].identity;
+				if (dataString) {
+					if (dataString.indexOf(data[i].subString) != -1)
+						return data[i].identity;
+				}
+				else if (dataProp)
+					return data[i].identity;
+			}
+		},
+		searchVersion: function (dataString) {
+			var index = dataString.indexOf(this.versionSearchString);
+			if (index == -1) return;
+			return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
+		},
+		dataBrowser: [
+			{
+				string: navigator.userAgent,
+				subString: "Chrome",
+				identity: "Chrome"
+			},
+			{ 	string: navigator.userAgent,
+				subString: "OmniWeb",
+				versionSearch: "OmniWeb/",
+				identity: "OmniWeb"
+			},
+			{
+				string: navigator.vendor,
+				subString: "Apple",
+				identity: "Safari",
+				versionSearch: "Version"
+			},
+			{
+				prop: window.opera,
+				identity: "Opera"
+			},
+			{
+				string: navigator.vendor,
+				subString: "iCab",
+				identity: "iCab"
+			},
+			{
+				string: navigator.vendor,
+				subString: "KDE",
+				identity: "Konqueror"
+			},
+			{
+				string: navigator.userAgent,
+				subString: "Firefox",
+				identity: "Firefox"
+			},
+			{
+				string: navigator.vendor,
+				subString: "Camino",
+				identity: "Camino"
+			},
+			{		// for newer Netscapes (6+)
+				string: navigator.userAgent,
+				subString: "Netscape",
+				identity: "Netscape"
+			},
+			{
+				string: navigator.userAgent,
+				subString: "MSIE",
+				identity: "Explorer",
+				versionSearch: "MSIE"
+			},
+			{
+				string: navigator.userAgent,
+				subString: "Gecko",
+				identity: "Mozilla",
+				versionSearch: "rv"
+			},
+			{ 		// for older Netscapes (4-)
+				string: navigator.userAgent,
+				subString: "Mozilla",
+				identity: "Netscape",
+				versionSearch: "Mozilla"
+			}
+		],
+		dataOS : [
+			{
+				string: navigator.platform,
+				subString: "Win",
+				identity: "Windows"
+			},
+			{
+				string: navigator.platform,
+				subString: "Mac",
+				identity: "Mac"
+			},
+			{
+				string: navigator.userAgent,
+				subString: "iPhone",
+				identity: "iPhone/iPod"
+		    },
+			{
+				string: navigator.platform,
+				subString: "Linux",
+				identity: "Linux"
+			}
+		]
+	
+	};
+	
+	BrowserDetect.init();
+	
+	window.$.client = { os : BrowserDetect.OS, browser : BrowserDetect.browser };
+	
+})();