some work on the cards

This commit is contained in:
Samuel Shifterovich 2018-10-23 20:07:59 +02:00
parent fe7dcc41a5
commit 45e7ffbc01
5 changed files with 81 additions and 54 deletions

View File

@ -20,8 +20,8 @@ baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
# Build settings
markdown: kramdown
theme: minima
# markdown: kramdown
# theme: minima
# plugins:
# - jekyll-feed

View File

@ -1,14 +1,25 @@
<div class="card">
<div class="card-header card-{{include.color}}">
<h3 class="card-title">{{include.title}}</h3>
<div class="col-xl-4 col-lg-6 col-md-12 mb-2">
<div class="card card-{{include.color}}">
{% if include.color == "warning" %}
<div class="card-header text-dark bg-{{include.color}}">
{% else %}
<div class="card-header text-white bg-{{include.color}}">
{% endif %}
<h3 class="h5">{{include.title}}</h3>
</div>
<div class="card-body">
<p><img src="{{include.image}}" alt="Nextcloud" class="panel-item">{{include.description}}</p>
<p>
<a class="btn btn-{{include.color}}" href="{{include.url}}">
<p><img src="{{include.image}}" alt="{{include.title}}" class="panel-item">{{include.description}}</p>
<div class="card-bottom">
<p><a class="btn btn-{{include.color}}" href="{{include.url}}">
{% if include.website %}
{{include.website}}
{% else %}
Website: {{ include.url | remove: "https://" | remove: "http://" | remove: "www." | remove: "/" }}
{% endif %}
</a>
</p>
<p>{{include.footer}}</p>
</div>
</div>
</div>
</div>

View File

@ -8,7 +8,7 @@
<!-- tags for Search Engine Optimization -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="privacy, anonymity, privacy tools, surveillance, encryption, edward snowden, nsa, tor">
<meta name="description" content="{{ site.description }}">
@ -66,6 +66,13 @@
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="privacytools.io" />
<script>
function extractDomain(data) {
var a = document.createElement('a');
a.href = data;
return a.hostname;
}
</script>
</head>
<body>

View File

@ -1,7 +1,23 @@
/* BS4 */
.card-success {
background-color: rgba(40, 167, 69, 0.5)!important;
.card {
box-shadow: 0 3px 10px 0 rgba(150,150,150,0.2) !important;
}
.card-bottom {
/* todo */
}
.card-success, .card-success .card-header {
border-color: rgba(40, 167, 69, 0.5) !important;
}
.card-primary, .card-primary .card-header {
border-color: rgba(0, 123, 255, 0.5) !important;
}
.card-warning, .card-warning .card-header {
border-color: rgba(255, 193, 7, 0.5) !important;
}

View File

@ -1634,46 +1634,39 @@ layout: default
<strong>If you are currently using Cloud Storage Services like Dropbox, Google Drive, Microsoft OneDrive or Apple iCloud you should pick an alternative here.</strong>
</div>
<div class="row">
<div class="row mb-4">
<div class="col-sm-4">
{% include card.html color="success" title="Nextcloud - Choose your hoster" image="img/provider/Nextcloud.png" description="Similar functionally to the widely used Dropbox, with the difference being that Nextcloud is free and open-source, and thereby allowing anyone to install and operate it without charge on a private server, with no limits on storage space or the number of connected clients." url="https://nextcloud.com/" website="Website: nextcloud.com" footer="Client OS: Windows, macOS, Linux, BSD, Unix, iOS, Android, Fire OS. Server: Linux." %}
</div>
{% include card.html color="success"
title="Nextcloud - Choose your hoster"
image="img/provider/Nextcloud.png"
<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Least Authority S4 - For Experts</h3>
</div>
<div class="panel-body">
<p><img src="img/provider/S4.jpg" alt="S4" class="panel-item">S4 (Simple Secure Storage Service) is Least Authority's verifiably secure off-site backup system for individuals and businesses. 100% client-side encryption and open
source transparency. 250GB for $9.95/month or 5TB for $25.95/month. Servers are hosted with Amazon S3 in the US.</p>
<p>
<a class="btn btn-info" href="https://leastauthority.com/">
Website: leastauthority.com
</a>
</p>
<p>OS: <a href="https://tahoe-lafs.org/trac/tahoe-lafs/wiki/Installation">Linux</a>, <a href="https://tahoe-lafs.org/trac/tahoe-lafs/browser/trunk/docs/quickstart.rst"> Windows, macOS, OpenSolaris, BSD.</a> (Installation for advanced users)</p>
</div>
</div>
</div>
description="Similar functionally to the widely used Dropbox, with the difference being that Nextcloud is free and open-source, and thereby allowing anyone to install and operate it without charge on a private server, with no limits on storage space or the number of connected clients."
<div class="col-sm-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Muonium</h3>
</div>
<div class="panel-body">
<p><img src="img/provider/Muonium.jpg" alt="Muonium" class="panel-item">Free encrypted cloud storage for your files.</p>
<p>
<a class="btn btn-warning" href="https://muonium.io/">
Website: muonium.io
</a>
</p>
<p>Client: Webclient. Server: Linux</p>
</div>
</div>
</div>
url="https://nextcloud.com/"
website="Website: nextcloud.com"
footer="Client OS: Windows, macOS, Linux, BSD, Unix, iOS, Android, Fire OS. Server: Linux." %}
{% include card.html color="primary"
title="Least Authority S4 - For Experts"
image="img/provider/S4.jpg"
description="S4 (Simple Secure Storage Service) is Least Authority's verifiably secure off-site backup system for individuals and businesses. 100% client-side encryption and open source transparency. 250GB for $9.95/month or 5TB for $25.95/month. Servers are hosted with Amazon S3 in the US."
url="https://leastauthority.com/"
footer='OS: <a href="https://tahoe-lafs.org/trac/tahoe-lafs/wiki/Installation">Linux</a>, <a href="https://tahoe-lafs.org/trac/tahoe-lafs/browser/trunk/docs/quickstart.rst"> Windows, macOS, OpenSolaris, BSD.</a> (Installation for advanced users)'
%}
{% include card.html color="warning"
title="Muonium"
image="img/provider/Muonium.jpg"
description="Free encrypted cloud storage for your files."
url="https://muonium.io/"
footer="Client: Webclient. Server: Linux"
%}
</div>