From eee9735cb05435e7a11c5811e464bed72d5a1f7a Mon Sep 17 00:00:00 2001
From: Jonah Aragon <jonah@triplebit.net>
Date: Mon, 13 Sep 2021 09:55:26 -0500
Subject: [PATCH] Re-enable dark mode

---
 _includes/head.html  |  4 ++--
 _includes/nav.html   |  2 +-
 _layouts/post.html   |  2 +-
 assets/css/app.scss  | 39 +++++++++++++++++++++++++++++++
 assets/css/dark.scss | 55 +++++++++++++++++++++++++++++++++++++-------
 index.html           |  2 +-
 6 files changed, 91 insertions(+), 13 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index becfc161..395c9967 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -12,7 +12,7 @@
   <title>{{ page.title }} | {{ site.title }}</title>
   <meta property="og:title" content="{{ page.title | escape }} | {{ site.title | escape }}" />
   {% else %}
-  <title>{{ site.title }}</title>
+  <title>{{ site.title }}{%if page.url == "/" %} — Your Central Privacy and Security Resource{% endif %}</title>
   <meta property="og:title" content="{{ site.title | escape }}" />
   {% endif %}
   <meta property="og:type" content="website" />
@@ -36,5 +36,5 @@
   <!-- CSS stylesheets -->
   <link href="/assets/css/app.css?v=20210506" rel="stylesheet">
   <link href="/assets/fonts/vendor/fontawesome/css/all.min.css?v=6.0.0-beta1" rel="stylesheet">
-  <!--<link id="dark-css" href="/assets/css/dark.css?v=20210506" rel="stylesheet" media="(prefers-color-scheme: dark)">-->
+  <link id="dark-css" href="/assets/css/dark.css?v=20210506" rel="stylesheet" media="(prefers-color-scheme: dark)">
 </head>
diff --git a/_includes/nav.html b/_includes/nav.html
index 2ac8e223..2d019c38 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -2,7 +2,7 @@
   <div class="container">
     <a class="navbar-brand" href="/">
       <picture>
-        <source srcset="/assets/img/layout/privacy-guides-logo-dark.svg" media="(prefers-color-scheme: dark)">
+        <!--<source srcset="/assets/img/layout/privacy-guides-logo-dark.svg" media="(prefers-color-scheme: dark)">-->
         <img src="/assets/img/layout/privacy-guides-logo-light.svg" alt="Privacy Guides Logo" width="300" height="39">
       </picture>
     </a>
diff --git a/_layouts/post.html b/_layouts/post.html
index 65534213..746d7323 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<div class="p-5 mb-3 text-light bg-dark"{% if page.cover %} style="background-image: {{ page.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ page.cover }}); background-size: cover; background-position: center;"{% endif %}>
+<div class="p-5 mb-3 text-light bg-700"{% if page.cover %} style="background-image: {{ page.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ page.cover }}); background-size: cover; background-position: center;"{% endif %}>
   <div class="container">
     <div class="post-cover">
       <div class="inner d-flex flex-column align-self-end" style="min-height: 300px;">
diff --git a/assets/css/app.scss b/assets/css/app.scss
index ce805f9d..60427e17 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -5,6 +5,45 @@
 @import "./node_modules/bootstrap/scss/variables";
 @import "variables";
 
+@import "./node_modules/bootstrap/scss/mixins";
+@import "./node_modules/bootstrap/scss/utilities";
+
+$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans, $grays);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "background-color": map-merge(
+      map-get($utilities, "background-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "background-color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
 .container-fullwidth {
   margin: 0 auto;
   width: 100%;
diff --git a/assets/css/dark.scss b/assets/css/dark.scss
index 7ea8d4fa..d14a324b 100644
--- a/assets/css/dark.scss
+++ b/assets/css/dark.scss
@@ -3,8 +3,8 @@
 @import "./node_modules/bootstrap/scss/functions";
 @import "brand";
 
-$primary: darken( $primary, 50% );
-$secondary: lighten( $secondary, 10% );
+$primary: #EAB448;
+//$secondary: lighten( $secondary, 10% );
 $success: darken( $success, 10% );
 $info: darken( $info, 5% );
 $danger: lighten( $warning, 20% );
@@ -14,7 +14,7 @@ $body-bg: $dark;
 $card-bg: lighten( $dark, 5% );
 $body-color: $light;
 $link-color: lighten( $secondary, 30% );
-$mark-bg: darken( $primary, 10% );
+$mark-bg: darken( $primary, 60% );
 $breadcrumb-bg: lighten( $dark, 5% );
 $hr-border-color: $body-color;
 
@@ -33,15 +33,15 @@ $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-color:                 ;
+$navbar-light-hover-color:           ;
 $navbar-light-active-color:          $white;
 $navbar-light-disabled-color:        rgba($white, .25);
 $navbar-light-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
-$navbar-light-toggler-border-color:  rgba($white, .1);
+$navbar-light-toggler-border-color:  rgba($white, .1);*/
 $dropdown-bg: $card-bg;
-$dropdown-link-color: $navbar-light-color;
-$dropdown-link-hover-color: $navbar-light-active-color;
+$dropdown-link-color: rgba($white, .5);
+$dropdown-link-hover-color: rgba($white, .75);
 $dropdown-link-hover-bg: lighten( $dropdown-bg, 10% );
 
 .container-fullwidth {
@@ -49,6 +49,45 @@ $dropdown-link-hover-bg: lighten( $dropdown-bg, 10% );
   width: 100%;
 }
 
+@import "./node_modules/bootstrap/scss/mixins";
+@import "./node_modules/bootstrap/scss/utilities";
+
+$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans, $grays);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "background-color": map-merge(
+      map-get($utilities, "background-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "background-color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
 // import /_sass/bootstrap.scss
 @import "./node_modules/bootstrap/scss/bootstrap";
 @import "ptio-font";
diff --git a/index.html b/index.html
index 594fff0e..104295f8 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@ layout: default
 
 <div class="p-5 mb-3 bg-primary">
   <div class="container">
-    <div class="row">
+    <div class="row text-800">
       <div class="col-lg-8 col-12 mt-4">
         <h1 class="display-3 pt-3 mt-5">The guide to restoring your online privacy.</h1>
         <h5 class="mt-5">Massive organizations are monitoring your online activities. Privacy Guides is your central privacy and security resource to protect yourself online.</h5>