diff --git a/_includes/legacy/sections/dns.html b/_includes/legacy/sections/dns.html
index 31b1e7d3..9487183d 100644
--- a/_includes/legacy/sections/dns.html
+++ b/_includes/legacy/sections/dns.html
@@ -36,7 +36,7 @@
@@ -55,7 +55,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -94,7 +94,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -107,7 +107,7 @@ We also log how many times this or that tracker has been blocked. We need this i
DoH,
- DoT
DNSCrypt
@@ -127,7 +127,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -154,7 +154,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -185,12 +185,11 @@ We also log how many times this or that tracker has been blocked. We need this i
Association No
@@ -214,7 +213,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -225,7 +224,7 @@ We also log how many times this or that tracker has been blocked. We need this i
DoH,
- DoT
@@ -252,7 +251,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -273,7 +272,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -297,7 +296,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -339,7 +338,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -360,7 +359,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -384,7 +383,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -397,7 +396,7 @@ We also log how many times this or that tracker has been blocked. We need this i
No
@@ -421,7 +420,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -457,7 +456,7 @@ We also log how many times this or that tracker has been blocked. We need this i
@@ -506,7 +505,7 @@ We also log how many times this or that tracker has been blocked. We need this i
diff --git a/_includes/legacy/sections/email-warning.html b/_includes/legacy/sections/email-warning.html
index ac524a13..35b10a1b 100644
--- a/_includes/legacy/sections/email-warning.html
+++ b/_includes/legacy/sections/email-warning.html
@@ -4,7 +4,7 @@
When using end-to-end encryption (E2EE) technology like OpenPGP , email will still have some metadata that is not encrypted in the header of the email. Read more about email metadata.
OpenPGP also does not support Forward secrecy , which means if either your or the recipient's private key is ever stolen, all previous messages encrypted with it will be exposed. How do I protect my private keys?
-
Rather than use email for prolonged conversations, consider using a medium that does support Forward secrecy.
-
Recommended Instant Messengers
+
Rather than use email for prolonged conversations, consider using a medium that does support Forward secrecy.
+
Recommended Instant Messengers
+
- {% include privacy-guides-logo.svg %}
+ {% include svg/privacy-guides-logo.svg %}
-
diff --git a/_includes/svg/surveillance-eye.svg b/_includes/svg/surveillance-eye.svg
new file mode 100644
index 00000000..60730ff1
--- /dev/null
+++ b/_includes/svg/surveillance-eye.svg
@@ -0,0 +1 @@
+
diff --git a/_sass/custom.scss b/_sass/custom.scss
index 87fd4fa9..5d8ccd3a 100644
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@@ -185,7 +185,6 @@ h2, h3:not(.h5), h4, h5 {
vertical-align: middle;
}
-
.btn-icon {
display: flex;
justify-content: center;
@@ -217,4 +216,15 @@ h2, h3:not(.h5), h4, h5 {
display: flow-root;
}
+// SVG Color Inversion
+.svg-primary {
+ fill: $svg-primary;
+}
+.svg-dark {
+ fill: $svg-dark;
+}
+.svg-light {
+ fill: $svg-light;
+}
+
@import "sortable";
diff --git a/_sass/sortable.scss b/_sass/sortable.scss
index 7d816681..e21b59cc 100644
--- a/_sass/sortable.scss
+++ b/_sass/sortable.scss
@@ -59,32 +59,32 @@ table[data-sortable].sortable-theme-bootstrap {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
- color: #333333;
- background: white;
+ color: $table-color;
+ background: $table-bg;
}
/* line 12, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap thead th {
- border-bottom: 2px solid #e0e0e0;
+ border-bottom: 2px solid $table-border-color;
}
/* line 15, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap tbody td {
- border-top: 1px solid #e0e0e0;
+ border-top: 1px solid $table-border-color;
}
/* line 18, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
- color: #3a87ad;
- background: #d9edf7;
- border-bottom-color: #bce8f1;
+ color: $table-head-color;
+ background: $table-active-bg;
+ border-bottom-color: $table-border-color;
}
/* line 23, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="descending"]:after {
- border-top-color: #3a87ad;
+ border-top-color: $table-border-color;
}
/* line 26, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]:after {
- border-bottom-color: #3a87ad;
+ border-bottom-color: $table-head-color;
}
/* line 31, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap.sortable-theme-bootstrap-striped tbody > tr:nth-child(odd) > td {
- background-color: #f9f9f9;
+ background-color: $table-active-bg;
}
diff --git a/_sass/variables.scss b/_sass/variables.scss
index ba33d70d..3ba4d3bf 100644
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@@ -1,15 +1,46 @@
/* Variables */
-$theme-colors: (
- "primary": #FFD06F,
- "secondary": #3913B8,
- "warning": #ffab6f,
- "info": #C5B6FF,
- "success": #b6ffb8
-);
+// Default Bootstrap Colors for Now
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black: #000;
+
+// Default Bootstrap Colors for Now
+$blue: #007bff;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$red: #dc3545;
+$orange: #fd7e14;
+$yellow: #ffc107;
+$green: #28a745;
+$teal: #20c997;
+$cyan: #17a2b8;
+
+// Fancy new Privacy Guides Color Scheme
+$primary: #FFD06F;
+$secondary: #3913B8;
+$success: #03CEA4;
+$info: #AA78A6;
+$warning: #FB4D3D;
+$danger: #CA1551;
+$light: #FFF6EB;
+$dark: #101619;
$body-color: #28323F;
$link-color: #3913B8;
+$navbar-light-color: rgba($black, .7);
+$dropdown-link-color: $navbar-light-color;
+$navbar-light-active-color: $dark;
+$dropdown-link-hover-color: $navbar-light-active-color;
/* Cards */
$card-shadow: 0 3px 10px 0 rgba(150, 150, 150, .2);
@@ -36,3 +67,8 @@ $linkedin: #FFD06F;
$email: #FFD06F;
$diaspora: #FFD06F;
$tor: #7d4698;
+
+/* SVG Colors */
+$svg-primary: $primary !default;
+$svg-dark: $body-color;
+$svg-light: $light !default;
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 44808958..d894911e 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -22,7 +22,10 @@ h1, h2, h3:not(.h5), h4 {
@import "flag-icon";
.textColor {
- fill: rgb(40,50,63);
+ fill: $dark;
+}
+.logoColor { // Navbar logo text
+ fill: $primary;
}
.post-info, .post-title {
diff --git a/assets/css/dark.scss b/assets/css/dark.scss
index 96d3fe7e..6e165358 100644
--- a/assets/css/dark.scss
+++ b/assets/css/dark.scss
@@ -2,23 +2,43 @@
---
@import "variables";
-$theme-colors: (
- "primary": #FFD06F,
- "secondary": #3913B8,
- "warning": #943E00,
- "info": #C5B6FF,
- "success": #b6ffb8
-);
+$primary: darken( $primary, 48% );
+$secondary: lighten( $secondary, 15% );
+$success: darken( $success, 10% );
+$info: darken( $info, 5% );
+$danger: lighten( $warning, 20% );
+$warning: darken( $warning, 30% );
-$body-bg: #181b21;
-$card-bg: #212529;
-$body-color: #d8d8d8;
-$link-color: #C5B6FF;
-$mark-bg: #343a40;
-$breadcrumb-bg: #212529;
+$body-bg: $dark;
+$card-bg: lighten( $dark, 5% );
+$body-color: $light;
+$link-color: lighten( $secondary, 30% );
+$mark-bg: darken( $primary, 10% );
+$breadcrumb-bg: lighten( $dark, 5% );
$hr-border-color: $body-color;
-$card-shadow: 0 3px 10px 0 rgba(50, 50, 50, .2);
+$card-shadow: 0 3px 10px 0 $dark;
+$list-group-color: $body-color;
+$list-group-bg: $card-bg;
+
+$alert-bg-level: 4;
+$alert-border-level: 3;
+$alert-color-level: -10;
+
+$table-border-color: lighten( $dark, 20% );
+$table-active-bg: rgba($white, .075);
+$table-head-color: $white;
+
+$navbar-light-color: rgba($white, .5);
+$navbar-light-hover-color: rgba($white, .75);
+$navbar-light-active-color: $white;
+$navbar-light-disabled-color: rgba($white, .25);
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,