Browse Source

Updated various layout parts and added a download page

master
Kenneth Skovhede 8 years ago
parent
commit
c95d2e154b
  1. 46
      _data/footer.yml
  2. 4
      _data/navigation.yml
  3. 17
      _includes/favicon.html
  4. 43
      _includes/footer.html
  5. 4
      _includes/gitter-sidecar.html
  6. 38
      _layouts/default.html
  7. 5
      _layouts/home.html
  8. 1
      _layouts/media.html
  9. 288
      _sass/_base.scss
  10. 35
      _sass/_download.scss
  11. 11
      _sass/_layout.scss
  12. 1
      _sass/_variables.scss
  13. 1
      css/main.scss
  14. 70
      download/index.md
  15. BIN
      images/bitcoin.png
  16. BIN
      images/download/debian.png
  17. BIN
      images/download/fedora.png
  18. BIN
      images/download/github.png
  19. BIN
      images/download/linux.png
  20. BIN
      images/download/mac.png
  21. BIN
      images/download/older.png
  22. BIN
      images/download/redhat.png
  23. BIN
      images/download/synology.png
  24. BIN
      images/download/ubuntu.png
  25. BIN
      images/download/windows.png
  26. BIN
      images/download/zip.png
  27. BIN
      images/facebook.png
  28. BIN
      images/github.png
  29. BIN
      images/gitter.png
  30. BIN
      images/googlegroups.png
  31. BIN
      images/googleplus.png
  32. BIN
      images/paypal.png
  33. 123
      js/plugins/jquery.client.js

46
_data/footer.yml

@ -1,16 +1,34 @@
# Footer navigation links # Footer navigation links
- title: Donate via PayPal
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
url: bitcoin:1LSRaoUMHe6W7SZaPwdW5KffRKmyqGrDWN
- title: Visit us on Facebook
url: http://www.facebook.com/pages/Duplicati/105118456272281
- title: Visit us On Google+
url: https://plus.google.com/105271984558189185842
- title: Visit us On Gitter - title: Visit us on
url: https://gitter.im/duplicati/Lobby items:
- 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

4
_data/navigation.yml

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

17
_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">

43
_includes/footer.html

@ -1,17 +1,30 @@
<footer role="contentinfo" id="site-footer"> <footer role="contentinfo" id="site-footer">
<nav role="navigation" class="menu bottom-menu"> <nav role="navigation" class="menu bottom-menu">
<ul class="menu-item"> <div class="inner-float">
{% for link in site.data.footer %} {%if site.owner.gitterroom %}
{% if link.url contains 'http' %} <ul class="menu-item">
{% assign domain = '' %} <li class="first btn" id="sidecar-target">Open chat</li>
{% else %} </ul>
{% assign domain = site.url %} {% endif %}
{% endif %}
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li> {% for group in site.data.footer %}
{% endfor %} <ul class="menu-item">
</ul> <li class="first">{{ group.title }}:</li>
</nav><!-- /.bottom-menu --> {% for link in group.items %}
<!-- {% if link.url contains 'http' %}
<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> {% assign domain = '' %}
--> {% else %}
{% assign domain = site.url %}
{% endif %}
<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>
-->
</footer> </footer>

4
_includes/gitter-sidecar.html

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

38
_layouts/default.html

@ -11,35 +11,22 @@
{% include open-graph.html %} {% include open-graph.html %}
{% include analytics.html %} {% include analytics.html %}
{% include gitter-sidecar.html %} {% include gitter-sidecar.html %}
{% include favicon.html %}
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}"> <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 }}/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"> <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="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on"> <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 rel="stylesheet" href="{{ site.url }}/css/main.css">
<link type="text/css" rel="stylesheet" href="{{ site.url }}/css/lightgallery.min.css" /> <link type="text/css" rel="stylesheet" href="{{ site.url }}/css/lightgallery.min.css" />
<!-- HTML5 Shiv and Media Query Support for IE --> <!-- HTML5 Shiv and Media Query Support for IE -->
@ -55,14 +42,19 @@
{% include header.html %} {% include header.html %}
{% include navigation-sliding.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"> <div id="page-wrapper">
{{ content }} {{ content }}
{% include footer.html %}
</div> </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> </body>

5
_layouts/home.html

@ -11,6 +11,7 @@
{% include open-graph.html %} {% include open-graph.html %}
{% include analytics.html %} {% include analytics.html %}
{% include gitter-sidecar.html %} {% include gitter-sidecar.html %}
{% include favicon.html %}
{% if author.google.plus %}<link rel="author" href="https://plus.google.com/{{ author.google.plus }}"/>{% endif %} {% 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 }}"> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
@ -40,7 +41,7 @@
<div class="wrap page-lead-content"> <div class="wrap page-lead-content">
<h1>Duplicati 2.0</h1> <h1>Duplicati 2.0</h1>
<h2>Store securely encrypted backups on cloud storage services!<br />Free for Windows, macOS and Linux</h2> <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> 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-content -->
</div><!-- /.page-lead --> </div><!-- /.page-lead -->
@ -64,7 +65,7 @@ https://sites.google.com/a/duplicati.com/duplicati/home" class="btn-inverse">Hav
</div><!-- /#main --> </div><!-- /#main -->
</div> </div>
{% include footer.html %} {% include footer.html %}
<script src="{{ site.url }}/js/vendor/jquery-1.9.1.min.js"></script> <script src="{{ site.url }}/js/vendor/jquery-1.9.1.min.js"></script>

1
_layouts/media.html

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

288
_sass/_base.scss

@ -7,67 +7,67 @@
========================================================================== */ ========================================================================== */
body { body {
font-family: $base-font; font-family: $base-font;
color: $text-color; color: $text-color;
@include font-size(16); @include font-size(16);
margin: 0px; margin: 0px;
} }
p { p {
@include font-size(18,yes,28); @include font-size(18,yes,28);
} }
li { li {
@include font-size(16,12,24); @include font-size(16,12,24);
} }
/* Headings */ /* Headings */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: $heading-font; font-family: $heading-font;
text-rendering: optimizeLegibility; // Fix the character spacing for headings text-rendering: optimizeLegibility; // Fix the character spacing for headings
} }
h1 { h1 {
@include font-size(36); @include font-size(36);
} }
h2 { h2 {
@include font-size(32); @include font-size(32);
} }
h3 { h3 {
@include font-size(28); @include font-size(28);
} }
h4 { h4 {
@include font-size(24); @include font-size(24);
} }
h5 { h5 {
@include font-size(20); @include font-size(20);
} }
h6 { h6 {
@include font-size(18); @include font-size(18);
} }
/* Underlined text */ /* Underlined text */
u, u,
ins { ins {
text-decoration: none; text-decoration: none;
border-bottom: 1px solid $text-color; border-bottom: 1px solid $text-color;
} }
/* Links */ /* Links */
a { a {
color: $link-color; color: $link-color;
&:hover { &:hover {
color: darken($link-color, 20); color: darken($link-color, 20);
} }
&:focus { &:focus {
@extend %tab-focus; @extend %tab-focus;
} }
&:hover, &:hover,
&:active { &:active {
outline: 0; outline: 0;
} }
} }
/* Quoted text */ /* Quoted text */
@ -90,21 +90,21 @@ blockquote {
// Code // Code
tt, code, kbd, samp, pre { tt, code, kbd, samp, pre {
font-family: $code-font; font-family: $code-font;
} }
pre { pre {
overflow-x: auto; // add scrollbars to wide code blocks overflow-x: auto; // add scrollbars to wide code blocks
} }
p code, p code,
li code { li code {
@include font-size(16,no); @include font-size(16,no);
color: $text-color; color: $text-color;
white-space: nowrap; white-space: nowrap;
margin: 0 2px; margin: 0 2px;
padding: 0 5px; padding: 0 5px;
border: 1px solid $border-color; border: 1px solid $border-color;
background-color: lighten($primary-color, 95); background-color: lighten($primary-color, 95);
border-radius: $border-radius; border-radius: $border-radius;
} }
/* /*
@ -207,37 +207,37 @@ svg:not(:root) {
========================================================================== */ ========================================================================== */
table { table {
border-collapse: collapse; border-collapse: collapse;
margin: ((0px + $doc-line-height) / 2) 0; margin: ((0px + $doc-line-height) / 2) 0;
margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0; margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
width: 100%; width: 100%;
} }
tbody { tbody {
tr:hover > td, tr:hover > th { tr:hover > td, tr:hover > th {
background-color: $table-hover-color; background-color: $table-hover-color;
} }
} }
thead { thead {
tr:first-child td { tr:first-child td {
border-bottom: 2px solid $table-border-color; border-bottom: 2px solid $table-border-color;
} }
} }
th { th {
padding: (0px + $doc-line-height) / 2; padding: (0px + $doc-line-height) / 2;
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
font-family: $alt-font; font-family: $alt-font;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
background-color: $table-header-color; background-color: $table-header-color;
border-bottom: 1px solid darken($border-color, 15%); border-bottom: 1px solid darken($border-color, 15%);
} }
td { td {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
padding: (0px + $doc-line-height) / 2; padding: (0px + $doc-line-height) / 2;
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
} }
tr, td, th { tr, td, th {
vertical-align: middle; vertical-align: middle;
} }
/* /*
@ -245,22 +245,22 @@ tr, td, th {
========================================================================== */ ========================================================================== */
hr { hr {
display: block; display: block;
position: relative; position: relative;
margin: 0px + (2 * $doc-line-height) 0; margin: 0px + (2 * $doc-line-height) 0;
margin: 0rem + ((2 * $doc-line-height) / $doc-font-size) 0; margin: 0rem + ((2 * $doc-line-height) / $doc-font-size) 0;
padding: 0; padding: 0;
height: 5px; height: 5px;
border: 0; border: 0;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 2 * $column; width: 2 * $column;
height: 1px; height: 1px;
background: $border-color; background: $border-color;
} }
} }
/* /*
@ -268,94 +268,94 @@ hr {
========================================================================== */ ========================================================================== */
fieldset { fieldset {
background: lighten($border-color, 10); background: lighten($border-color, 10);
border: 1px solid $border-color; border: 1px solid $border-color;
margin-bottom: 0px + $doc-line-height; margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size); margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
padding: $gutter; padding: $gutter;
border-radius: $border-radius; border-radius: $border-radius;
} }
input, input,
label, label,
select { select {
display: block; display: block;
@include font-size($form-font-size,no); @include font-size($form-font-size,no);
} }
label { label {
font-weight: bold; font-weight: bold;
font-family: $alt-font; font-family: $alt-font;
margin-bottom: (0px + $doc-line-height) / 4; margin-bottom: (0px + $doc-line-height) / 4;
margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 4; margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 4;
&.required:after { &.required:after {
content: "*"; content: "*";
} }
abbr { abbr {
display: none; display: none;
} }
} }
textarea, textarea,
#{$all-text-inputs}, #{$all-text-inputs},
select, select,
select[multiple=multiple] { select[multiple=multiple] {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(border-color); @include transition(border-color);
background-color: white; background-color: white;
border-radius: $form-border-radius; border-radius: $form-border-radius;
border: 1px solid $form-border-color; border: 1px solid $form-border-color;
box-shadow: $form-box-shadow; box-shadow: $form-box-shadow;
font-family: $form-font-family; font-family: $form-font-family;
font-size: $form-font-size; font-size: $form-font-size;
margin-bottom: (0px + $doc-line-height) / 2; margin-bottom: (0px + $doc-line-height) / 2;
margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2; margin-bottom: (0rem + ($doc-line-height / $doc-font-size)) / 2;
padding: ((0px + $doc-line-height) / 3) ((0px + $doc-line-height) / 3); padding: ((0px + $doc-line-height) / 3) ((0px + $doc-line-height) / 3);
padding: ((0rem + ($doc-line-height / $doc-font-size)) / 3) ((0rem + ($doc-line-height / $doc-font-size)) / 3); padding: ((0rem + ($doc-line-height / $doc-font-size)) / 3) ((0rem + ($doc-line-height / $doc-font-size)) / 3);
width: 100%; width: 100%;
&:hover { &:hover {
border-color: $form-border-color-hover; border-color: $form-border-color-hover;
} }
&:focus { &:focus {
border-color: $form-border-color-focus; border-color: $form-border-color-focus;
box-shadow: $form-box-shadow-focus; box-shadow: $form-box-shadow-focus;
outline: none; outline: none;
} }
} }
textarea { textarea {
resize: vertical; resize: vertical;
} }
input[type="search"] { input[type="search"] {
@include appearance(none); @include appearance(none);
} }
input[type="checkbox"], input[type="radio"] { input[type="checkbox"], input[type="radio"] {
display: inline; display: inline;
margin-right: (0px + $doc-line-height) / 4; margin-right: (0px + $doc-line-height) / 4;
margin-right: (0rem + ($doc-line-height / $doc-font-size)) / 4; margin-right: (0rem + ($doc-line-height / $doc-font-size)) / 4;
} }
input[type="file"] { input[type="file"] {
width: 100%; width: 100%;
} }
select { select {
width: auto; width: auto;
max-width: 100%; max-width: 100%;
margin-bottom: 0px + $doc-line-height; margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size); margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
} }
form button, form button,
input[type="submit"] { input[type="submit"] {
@extend .btn; @extend .btn;
@include appearance(none); @include appearance(none);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
} }
/* /*
@ -378,7 +378,7 @@ input[type="submit"] {
nav { nav {
ul { ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li { li {
list-style: none; list-style: none;
@ -388,10 +388,36 @@ 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 Global animation transition
========================================================================== */ ========================================================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, .highlight { 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); @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;
} }

35
_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;
}
}

11
_sass/_layout.scss

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

1
_sass/_variables.scss

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

1
css/main.scss

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

70
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>

BIN
images/bitcoin.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
images/download/debian.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 B

BIN
images/download/fedora.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/download/github.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 997 B

BIN
images/download/linux.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/download/mac.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/download/older.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 575 B

BIN
images/download/redhat.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 B

BIN
images/download/synology.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
images/download/ubuntu.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
images/download/windows.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/download/zip.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 903 B

BIN
images/facebook.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 555 B

BIN
images/github.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 980 B

BIN
images/gitter.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 559 B

BIN
images/googlegroups.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/googleplus.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 B

BIN
images/paypal.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 942 B

123
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 };
})();
Loading…
Cancel
Save