Implement Sass (#568)

* Move all images to assets/img

* Move all scripts to assets/js

* Move all webfonts to assets/webfonts

* Move all files to assets/files

* Move css to assets/css and add imports

* Adjust all references to assets folder

* Fix tor icon path

* Rewrite custom css to sass and add variables

* Change ?v on style.css to 5.

* Enable Sass minification

* Remove CryptoPaper-full.7z

_config.yml

@@ -18,6 +18,8 @@ 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
+sass:
+  style: compressed
 
 # Build settings
 # markdown: kramdown

_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 %}
@@ -43,4 +43,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

_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="57x57" href="assets/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="60x60" href="assets/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="72x72" href="assets/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="76x76" href="assets/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="114x114" href="assets/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="120x120" href="assets/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="144x144" href="assets/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="152x152" href="assets/img/favicons/apple-touch-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="assets/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="assets/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="assets/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="assets/img/favicons/favicon-96x96.png" sizes="96x96">
-	<link rel="icon" type="image/png" href="img/favicons/favicon-16x16.png" sizes="16x16">
+	<link rel="icon" type="image/png" href="assets/img/favicons/favicon-16x16.png" sizes="16x16">
-	<link rel="manifest" href="img/favicons/manifest.json">
+	<link rel="manifest" href="assets/img/favicons/manifest.json">
-	<link rel="shortcut icon" href="img/favicons/favicon.ico">
+	<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-TileImage" content="assets/img/favicons/mstile-144x144.png">
-	<meta name="msapplication-config" content="img/favicons/browserconfig.xml">
+	<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="assets/css/style.css?v=5" 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">
 
 	<!--[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" />
@@ -74,7 +70,7 @@
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
-    
+
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto">
         {% if page.active_page %}
@@ -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="assets/js/jquery-3.3.1.min.js?v=4"></script>
-<script src="js/popper.min.js?v=4"></script>
+<script src="assets/js/popper.min.js?v=4"></script>
-<script src="js/bootstrap.min.js?v=4"></script>
+<script src="assets/js/bootstrap.min.js?v=4"></script>
-<script src="js/sortable.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; }
+