Merge branch 'master' into Riot

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,9 +1,11 @@
-### Description
+<!-- PLEASE READ OUR [CONTRIBUTING GUIDELINES](https://github.com/privacytoolsIO/privacytools.io#contributing-guidelines) BEFORE SUBMITTING -->
 
+## Description
 
+Issue: #none
 
-### HTML Preview
+<!--
+## Screenshots
 
-*Replace [GITHUB_USERNAME] with your GitHub username and [BRANCH] with the branch name.*
-
-https://htmlpreview.github.io/?https://github.com/[GITHUB_USERNAME]/privacytools.io/blob/[BRANCH]/index.html
+Please add screenshots if applicable
+-->

Gemfile

@@ -1,25 +1,11 @@
 source "https://rubygems.org"
 
-# Hello! This is where you manage which Jekyll version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-#     bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# Happy Jekylling!
-gem "jekyll", "~> 3.8.4"
+# Install github-pages gem (https://jekyllrb.com/docs/github-pages/)
+gem "github-pages", group: :jekyll_plugins
 
-# This is the default theme for new Jekyll sites. You may change this to anything you like.
-# gem "minima", "~> 2.0"
-
-# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
-# uncomment the line below. To upgrade, run `bundle update github-pages`.
-# gem "github-pages", group: :jekyll_plugins
-
-# If you have any plugins, put them here!
+# Plugins
 group :jekyll_plugins do
-  # gem "jekyll-feed", "~> 0.6"
+  # example: gem "jekyll-feed", "~> 0.6"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

README.md

@@ -1,4 +1,4 @@
-[![privacytools](https://privacytoolsio.github.io/privacytools.io/img/layout/logo.png)](https://www.privacytools.io/)
+[![privacytools](https://privacytools.io/assets/img/layout/logo.png)](https://www.privacytools.io/)
 
 _Encryption Against Global Mass Surveillance._
 
@@ -35,8 +35,8 @@ There can be exceptions if no software is available that meet the criteria.
 
 ## Images
 
-- Provider logos should be exactly 200 x 70 ([example](https://privacytoolsio.github.io/privacytools.io/img/provider/AirVPN.gif))
-- Tool logos should be exactly 120 x 120 ([example](https://privacytoolsio.github.io/privacytools.io/img/tools/ChatSecure.png))
+- Provider logos should be exactly 200 x 70 ([example](https://www.privacytools.io/assets/img/provider/AirVPN.gif))
+- Tool logos should be exactly 120 x 120 ([example](https://www.privacytools.io/assets/img/tools/ChatSecure.png))
 
 # Support privacytools.io
 
@@ -46,10 +46,10 @@ There can be exceptions if no software is available that meet the criteria.
 - View and edit our website source code here on GitHub.
 
 # Community Translations
-- [繁体中文 / Chinese](https://github.com/twngo/privacytools-zh) - [GitHub](https://github.com/twngo/privacytools-zh)
+- [繁体中文 / Chinese](https://privacytools.twngo.xyz/) - [GitHub](https://github.com/twngo/privacytools-zh)
 - [Español / Spanish](https://victorhck.gitlab.io/privacytools-es/) - [GitLab](https://gitlab.com/victorhck/privacytools-es)
 - [Deutsch / German](https://privacytools.it-sec.rocks/) - [GitHub](https://github.com/Anon215/privacytools.it-sec.rocks)
-- [Italiano / Italian](https://strappazzon.github.io/privacytools-it/) - [GitHub](https://github.com/Strappazzon/privacytools-it)
+- [Italiano / Italian](https://privacytools-it.github.io/) - [GitHub](https://github.com/privacytools-it/privacytools-it.github.io)
 - [Русский / Russian](https://privacytools.ru) - [GitHub](https://github.com/c0rdis/privacytools.ru)
 
 # License

_config.yml

@@ -1,38 +1,6 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
 title: Privacy Tools - Encryption Against Global Mass Surveillance
-description: >- # this means to ignore newlines until "baseurl:"
-  You are being watched! Knowledge, encryption and privacy tools to protect you against global mass surveillance.
-baseurl: "" # the subpath of your site, e.g. /blog
-url: "" # the base hostname & protocol for your site, e.g. http://example.com
+description: You are being watched! Knowledge, encryption and privacy tools to protect you against global mass surveillance.
+url: "https://privacytools.io"
+sass:
+  style: compressed
 
-# Build settings
-# markdown: kramdown
-# theme: minima
-# plugins:
-#   - jekyll-feed
-
-# Exclude from processing.
-# The following items will not be processed, by default. Create a custom list
-# to override the default setting.
-# exclude:
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/

_includes/card.html

@@ -30,7 +30,7 @@
                     {% endif %}
                 </a>
                 {% if include.tor %}
-                <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="{{include.tor}} Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="img/layout/tor.png" width="35"></a>
+                <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="{{include.tor}} Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="assets/img/layout/tor.png" width="35"></a>
                 {% endif %}
 
                 {% if include.extra_button %}

_layouts/default.html

@@ -23,32 +23,28 @@
     {% endif %}
 
 	<!-- icons -->
-	<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-touch-icon-57x57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-touch-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-touch-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-touch-icon-76x76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-touch-icon-114x114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-touch-icon-120x120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-touch-icon-144x144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-touch-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png">
-	<link rel="icon" type="image/png" href="img/favicons/favicon-32x32.png" sizes="32x32">
-	<link rel="icon" type="image/png" href="img/favicons/android-chrome-192x192.png" sizes="192x192">
-	<link rel="icon" type="image/png" href="img/favicons/favicon-96x96.png" sizes="96x96">
-	<link rel="icon" type="image/png" href="img/favicons/favicon-16x16.png" sizes="16x16">
-	<link rel="manifest" href="img/favicons/manifest.json">
-	<link rel="shortcut icon" href="img/favicons/favicon.ico">
+	<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-touch-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-touch-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-touch-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-touch-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-touch-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-touch-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-touch-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-touch-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon-180x180.png">
+	<link rel="icon" type="image/png" href="assets/img/favicons/favicon-32x32.png" sizes="32x32">
+	<link rel="icon" type="image/png" href="assets/img/favicons/android-chrome-192x192.png" sizes="192x192">
+	<link rel="icon" type="image/png" href="assets/img/favicons/favicon-96x96.png" sizes="96x96">
+	<link rel="icon" type="image/png" href="assets/img/favicons/favicon-16x16.png" sizes="16x16">
+	<link rel="manifest" href="assets/img/favicons/manifest.json">
+	<link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
 	<meta name="msapplication-TileColor" content="#da532c">
-	<meta name="msapplication-TileImage" content="img/favicons/mstile-144x144.png">
-	<meta name="msapplication-config" content="img/favicons/browserconfig.xml">
+	<meta name="msapplication-TileImage" content="assets/img/favicons/mstile-144x144.png">
+	<meta name="msapplication-config" content="assets/img/favicons/browserconfig.xml">
 	<meta name="theme-color" content="#ffffff">
 
 	<!-- CSS stylesheets -->
-	<link href="css/bootstrap.min.css?v=4" rel="stylesheet">
-	<link href="css/flag-icon.min.css?v=4" rel="stylesheet">
-	<link href="css/fontawesome-all.min.css?v=4" rel="stylesheet">
-	<link href="css/sortable-theme-bootstrap.css?v=4" rel="stylesheet" />
-	<link href="css/custom.css?v=4" rel="stylesheet">
+	<link href="assets/css/style.css?v=5" rel="stylesheet">
 
 	<!--[if lt IE 9]>
       <script src="js/html5shiv.min.js"></script>
@@ -59,7 +55,7 @@
 	<meta property="og:title" content="Privacy Tools | Encryption against global mass surveillance" />
 	<meta property="og:type" content="website" />
 	<meta property="og:url" content="https://www.privacytools.io/" />
-	<meta property="og:image" content="https://www.privacytools.io/img/layout/ogimage.jpg" />
+	<meta property="og:image" content="https://www.privacytools.io/assets/img/layout/ogimage.jpg" />
 	<meta property="og:description" content="You are being watched! Knowledge, encryption and privacy tools to protect you against global mass surveillance."
 	/>
 	<meta property="og:locale" content="en_US" />
@@ -193,10 +189,10 @@
 </div>
 
 <!-- add jQuery, Popper, Bootstrap, Sortable, and tooltip libraries  -->
-<script src="js/jquery-3.3.1.min.js?v=4"></script>
-<script src="js/popper.min.js?v=4"></script>
-<script src="js/bootstrap.min.js?v=4"></script>
-<script src="js/sortable.min.js?v=4"></script>
+<script src="assets/js/jquery-3.3.1.min.js?v=4"></script>
+<script src="assets/js/popper.min.js?v=4"></script>
+<script src="assets/js/bootstrap.min.js?v=4"></script>
+<script src="assets/js/sortable.min.js?v=4"></script>
 <script>
 	$(function() {
 		$("[data-toggle='tooltip']").tooltip();

_sass/_vars.scss

@@ -0,0 +1,26 @@
+/* Variables */
+
+/* Cards */
+$card-shadow:         0 3px 10px 0 rgba(150, 150, 150, .2);
+$card-succes-border:  rgba(40, 167, 69, .5);
+$card-primary-border: rgba(0, 123, 255, .5);
+$card-warning-border: rgba(255, 193, 7, .5);
+
+/* Blockquote */
+$blockquote-border:   #eee;
+
+/* Share button */
+$share-btn:           #fff;
+$share-btn-shadow:    0 2px 0 0 rgba(0, 0, 0, .2);
+$share-btn-hover:     #eee;
+$share-btn-active:    #e2e2e2;
+
+/* Social */
+$twitter:             #55acee;
+$google:              #dd4b39;
+$facebook:            #3b5998;
+$stumbleupon:         #eb4823;
+$reddit:              #ff5700;
+$linkedin:            #4875b4;
+$email:               #444;
+$diaspora:            #2f3537;

assets/css/style.scss

@@ -0,0 +1,121 @@
+---
+---
+
+@import '_vars';
+@import 'bootstrap';
+@import 'flag-icon';
+@import 'fontawesome';
+@import 'sortable-theme-bootstrap';
+
+/* BS4 */
+
+.card {
+  box-shadow: $card-shadow !important;
+}
+
+/* Make links and long strings responsive */
+a,
+.long-string-list {
+  li {
+    word-wrap: break-word;
+  }
+}
+
+/*.card-success, */
+.card-success {
+  .card-header {
+    border-color: $card-succes-border !important;
+  }
+}
+
+/*.card-primary, */
+.card-primary {
+  .card-header {
+    border-color: $card-primary-border !important;
+  }
+}
+
+/*.card-warning, */
+.card-warning  {
+  .card-header {
+    border-color: $card-warning-border !important;
+  }
+}
+
+.blockquote {
+  border-left: 5px solid $blockquote-border;
+  font-size: 1.2rem;
+  line-height: 1.35;
+  padding: 10px 20px;
+}
+
+.theme-dropdown {
+  .dropdown-menu {
+    display: block;
+    margin-bottom: 20px;
+    position: static;
+  }
+}
+
+.theme-showcase {
+  p > .btn {
+    margin: 5px 0;
+  }
+
+  .navbar {
+    .container {
+      width: auto;
+    }
+  }
+}
+
+
+.anchor {
+  &:target {
+    margin-top: -4rem;
+    padding-top: 4rem;
+  }
+}
+
+.anchor-icon {
+  font-size: .8em;
+}
+
+.panel-item {
+  float: right;
+  margin-left: 5px;
+}
+
+.share-btn {
+  border: 0;
+  box-shadow: $share-btn-shadow;
+  color: $share-btn;
+  display: inline-block;
+  opacity: .9;
+  outline: none;
+  padding: 1em;
+  text-align: center;
+  width: 8em;
+
+  &:hover {
+    color: $share-btn-hover;
+  }
+
+  &:active {
+    box-shadow: none;
+    color: $share-btn-active;
+    outline: none;
+    position: relative;
+    top: 2px;
+  }
+}
+
+.twitter { background: $twitter; }
+.google-plus { background: $google; }
+.facebook { background: $facebook; }
+.stumbleupon { background: $stumbleupon; }
+.reddit { background: $reddit; }
+.linkedin    { background: $linkedin; }
+.email { background: $email; }
+.diaspora { background: $diaspora; }
+