Browse Source

Work on a new layout for the landing page

master
Kenneth Skovhede 8 years ago
parent
commit
7defcc2542
  1. 2
      _includes/footer.html
  2. 5
      _layouts/home.html
  3. 3
      _sass/_base.scss
  4. 1
      _sass/_buttons.scss
  5. 4
      _sass/_helpers.scss
  6. 20
      _sass/_layout.scss
  7. 11
      _sass/_twotiles.scss
  8. 3
      _sass/_variables.scss
  9. BIN
      images/background-1600x800.jpg
  10. BIN
      images/home/backends-ico.png
  11. BIN
      images/home/cloud-ico.png
  12. BIN
      images/home/feature-ico.png
  13. BIN
      images/home/lgpl-ico.png
  14. BIN
      images/home/secure-ico.png
  15. BIN
      images/home/webui-ico.png
  16. 70
      index.md

2
_includes/footer.html

@ -11,5 +11,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
</nav><!-- /.bottom-menu --> </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> <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>

5
_layouts/home.html

@ -40,7 +40,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-inverse">Download 2.0 (experimental)</a> &nbsp; or &nbsp; <a href=" <a href="https://github.com/duplicati/duplicati/releases" 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 -->
@ -63,9 +63,10 @@ https://sites.google.com/a/duplicati.com/duplicati/home" class="btn-inverse">Hav
</div><!-- /.wrap --> </div><!-- /.wrap -->
</div><!-- /#main --> </div><!-- /#main -->
{% 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/vendor/jquery-1.9.1.min.js"></script>
<script src="{{ site.url }}/js/main.js"></script> <script src="{{ site.url }}/js/main.js"></script>

3
_sass/_base.scss

@ -10,6 +10,7 @@ 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;
} }
p { p {
@ -133,7 +134,7 @@ figure {
/* Image hover animation */ /* Image hover animation */
@include transition(box-shadow 0.3s); @include transition(box-shadow 0.3s);
&:hover { &:hover {
box-shadow: 0 0 10px rgba($black, .20); box-shadow: 0 0 10px rgba($primary-color, .20);
} }
} }
} }

1
_sass/_buttons.scss

@ -15,7 +15,6 @@
color: $white; color: $white;
text-decoration: none; text-decoration: none;
border: 0 !important; border: 0 !important;
border-radius: 10 * $border-radius;
@include transition(background 0.2s, border 0.2s); @include transition(background 0.2s, border 0.2s);
&:hover { &:hover {
color: $white; color: $white;

4
_sass/_helpers.scss

@ -100,7 +100,7 @@
// Image hover animation // Image hover animation
&:hover { &:hover {
@include animation(pop .3s 0 linear); @include animation(pop .3s 0 linear);
box-shadow: 0 0 10px rgba($black, .20); box-shadow: 0 0 10px rgba($primary-color, .20);
} }
} }
} }
@ -146,7 +146,7 @@
// Image hover animation // Image hover animation
&:hover { &:hover {
@include animation(pop .3s 0 linear); @include animation(pop .3s 0 linear);
box-shadow: 0 0 10px rgba($black, .20); box-shadow: 0 0 10px rgba($primary-color, .20);
} }
} }
} }

20
_sass/_layout.scss

@ -52,15 +52,16 @@
position: relative; position: relative;
display: block; display: block;
margin-right: $gutter; margin-right: $gutter;
padding: (.25 * $masthead-height) 0 (.25 * $masthead-height) ; padding: 0;
height: $masthead-height; height: $masthead-height;
font-family: $alt-font; font-family: $alt-font;
&:before, &:before,
&:after { &:after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: $masthead-height * .45;
left: 0; left: 0;
height: 2px; height: 2px;
@include transition(width 0.3s); @include transition(width 0.3s);
@ -71,7 +72,11 @@
} }
&:after { &:after {
width: 0; width: 0;
background: $black; background: $primary-color;
}
&:active,
&:hover {
color: $primary-color;
} }
&:active:after, &:active:after,
&:hover:after { &:hover:after {
@ -106,7 +111,6 @@
@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: $black;
text-transform: uppercase;
} }
} }
} }
@ -115,7 +119,10 @@
.bottom-menu { .bottom-menu {
@include clearfix; @include clearfix;
padding-left: $gutter;;
padding-right: $gutter;
font-weight: 700; font-weight: 700;
background-color: $bottom-menu-color;
a { a {
color: lighten($black,60); color: lighten($black,60);
} }
@ -258,10 +265,13 @@
@include font-size(20); @include font-size(20);
@include media($medium) { @include media($medium) {
@include font-size(24); @include font-size(24);
line-height: em(25);
} }
@include media($large) { @include media($large) {
@include font-size(32); @include font-size(32);
line-height: em(25);
} }
line-height: em(25);
} }
} }
// page header // page header
@ -337,7 +347,7 @@
@include outer-container; @include outer-container;
margin-top: (3 * (0px + $doc-line-height)); margin-top: (3 * (0px + $doc-line-height));
margin-top: (3 * (0rem + ($doc-line-height / $doc-font-size))); margin-top: (3 * (0rem + ($doc-line-height / $doc-font-size)));
padding-bottom: $gutter; padding-bottom: 0px;
font-family: $alt-font; font-family: $alt-font;
/* Copyright text */ /* Copyright text */
.copyright { .copyright {

11
_sass/_twotiles.scss

@ -18,9 +18,20 @@
} }
.post-title { .post-title {
@include font-size(18,no); @include font-size(18,no);
margin-left: em(60);
} }
.post-excerpt { .post-excerpt {
@include font-size(16); @include font-size(16);
margin-left: em(70);
margin-top: em(4);
color: lighten($text-color,40);
}
.post-icon {
float: left;
vertical-align: top;
@include media($micro) {
margin-top: em(0);
}
} }
.post-teaser { .post-teaser {
position: relative; position: relative;

3
_sass/_variables.scss

@ -25,6 +25,7 @@ $white : #fff;
$black : #000; $black : #000;
$body-color : #ebebeb; $body-color : #ebebeb;
$bottom-menu-color : #e9e9e9;
$text-color : #313130; $text-color : #313130;
$caption-color : mix($white, $text-color, 25%); $caption-color : mix($white, $text-color, 25%);
@ -34,7 +35,7 @@ $comp-color : complement($base-color);
$border-color : #ddd; $border-color : #ddd;
$link-color : #222; $link-color : #222;
$primary-color : $black; $primary-color : #3e9ff0;
$success-color : #2ecc71; $success-color : #2ecc71;
$warning-color : #f1c40f; $warning-color : #f1c40f;
$danger-color : #e74c3c; $danger-color : #e74c3c;

BIN
images/background-1600x800.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 467 KiB

After

Width:  |  Height:  |  Size: 360 KiB

BIN
images/home/backends-ico.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
images/home/cloud-ico.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
images/home/feature-ico.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 995 B

BIN
images/home/lgpl-ico.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
images/home/secure-ico.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
images/home/webui-ico.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

70
index.md

@ -6,66 +6,42 @@ image:
--- ---
<div class="twotiles">
<div class="tiles"> <div class="twotile">
<p class="post-icon"><img src="images/home/backends-ico.png" /></p>
<h2 class="post-title">Many Backends</h2>
<p class="post-excerpt">Duplicati works with standard protocols like FTP, SSH, WebDAV as well as popular services like Microsoft OneDrive, Amazon Cloud Drive &quot; S3, Google Drive, box.com, Mega, hubiC and many others.</p>
</div>
<div class="tile"> <div class="twotile">
<p class="post-icon"><img src="images/home/feature-ico.png" /></p>
<h2 class="post-title">Features</h2> <h2 class="post-title">Features</h2>
<p class="post-excerpt">Backup files and folders with strong AES-256 encryption. Save space with incremental backups and data deduplication. Run backups on any machine through the web-based interface or via command line interface. Duplicati has a built-in scheduler and auto-updater. <a alt="Duplicati Fact Sheet" href="http://duplicati.github.io/articles/FactSheet/">Learn more</a></p> <p class="post-excerpt">Backup files and folders with strong AES-256 encryption. Save space with incremental backups and data deduplication. Run backups on any machine through the web-based interface or via command line interface. Duplicati has a built-in scheduler and auto-updater.</p>
</div> </div>
<div class="tile">
<h2 class="post-title">Backends</h2>
<p class="post-excerpt">Duplicati works with standard protocols like FTP, SSH, WebDAV as well as popular services like Microsoft OneDrive, Amazon Cloud Drive & S3, Google Drive, box.com, Mega, hubiC and many others.</p>
</div>
<div class="tile"> <div class="twotile">
<p class="post-icon"><img src="images/home/lgpl-ico.png" /></p>
<h2 class="post-title">Free software</h2> <h2 class="post-title">Free software</h2>
<p class="post-excerpt">Duplicati is free software and open source. You can use Duplicati for free even for commercial purposes. Source code is licensed under LGPL. Duplicati runs under Windows, Linux, MacOS. It requires .NET 4.5 or Mono.</p> <p class="post-excerpt">Duplicati is free software and open source. You can use Duplicati for free even for commercial purposes. Source code is licensed under LGPL. Duplicati runs under Windows, Linux, MacOS. It requires .NET 4.5 or Mono.</p>
</div>
</div>
<div class="twotiles">
<div class="twotile">
<h2 class="post-title">Small backup size</h2>
<p class="post-excerpt">Duplicati compresses all data and it performs incremental backups to minimize the amount of data that is transferred and stored remotely. Duplicati even has built-in deduplication. It detects similar and identical files and stores the same pieces of data only once.</p>
</div>
<div class="twotile">
<h2 class="post-title">Built for online</h2>
<p class="post-excerpt">Duplicati was designed for online backups from scratch. It is not only data efficient but also handles network issues nicely. E.g. interrupted backups can be resumed and Duplicati tests the content of backups regularly. That way broken backups on corrupt storage systems can be detected before it’s too late.</p>
</div>
<div class="twotile">
<h2 class="post-title">Meta data</h2>
<p class="post-excerpt">Duplicati stores the meta data of files and folders on different platforms. This includes dates “last modified, created” as well as attributes like “hidden, archive”. Also access permissions (ACL, POSIX) are stored.</p>
</div> </div>
<div class="twotile"> <div class="twotile">
<p class="post-icon"><img src="images/home/secure-ico.png" /></p>
<h2 class="post-title">Strong encryption</h2> <h2 class="post-title">Strong encryption</h2>
<p class="post-excerpt">Duplicati uses strong AES-256 encryption to protect your privacy. You can also use GPG to encrypt your backup.</p> <p class="post-excerpt">Duplicati uses strong AES-256 encryption to protect your privacy. You can also use GPG to encrypt your backup.</p>
</div> </div>
<div class="twotile">
<h2 class="post-title">Trust No One design</h2>
<p class="post-excerpt">Duplicati was developed following the trust-no-one principle. With Duplicati your backup password never leaves your computer. The backup itself does not contain any unencrypted data. And Duplicati’s source code is public so that everyone can review and improve it.</p>
</div>
<div class="twotile"> <div class="twotile">
<h2 class="post-title">Many backends</h2> <p class="post-icon"><img src="images/home/cloud-ico.png" /></p>
<p class="post-excerpt">Duplicati works with standard Internet protocols like FTP, SSH, WebDAV as well as popular services like Microsoft OneDrive, Amazon Cloud Drive & S3, Google Drive, box.com, Mega, hubiC and many others.</p> <h2 class="post-title">Built for online</h2>
</div> <p class="post-excerpt">Duplicati was designed for online backups from scratch. It is not only data efficient but also handles network issues nicely. E.g. interrupted backups can be resumed and Duplicati tests the content of backups regularly. That way broken backups on corrupt storage systems can be detected before it’s too late.</p>
</div>
<div class="twotile"> <div class="twotile">
<p class="post-icon"><img src="images/home/webui-ico.png" /></p>
<h2 class="post-title">Web-based user interface</h2> <h2 class="post-title">Web-based user interface</h2>
<p class="post-excerpt">Duplicati is configured by a web interface that runs in any browser (even mobile) and can be accessed - if you like - from anywhere. This also allows to run Duplicati on headless machines like a NAS (network attached storage).</p> <p class="post-excerpt">Duplicati is configured by a web interface that runs in any browser (even mobile) and can be accessed - if you like - from anywhere. This also allows to run Duplicati on headless machines like a NAS (network attached storage).</p>
</div> </div>
<div class="twotile">
<h2 class="post-title">Multi-core and performance</h2>
<p class="post-excerpt">To restore your data as fast as possible, Duplicati uses multi-core, hardware decryption and on-the-fly decompression.</p>
</div>
</div> </div>

Loading…
Cancel
Save