Merge branch 'master' into dig-qname

_includes/head.html

@@ -44,4 +44,5 @@
 
   <!-- CSS stylesheets -->
   <link href="/assets/css/style.css?v=5" rel="stylesheet">
+  <link id="dark-css" href="/assets/css/dark.css?v=1" rel="stylesheet" media="(prefers-color-scheme: dark)">
 </head>

_includes/nav.html

@@ -143,6 +143,9 @@
         <a href="/donate/" class="nav-anchor">
           Donate <span class="fas fa-heart text-danger"></span>
         </a>
+        <a id="nav-switch-theme" class="nav-anchor" href="javascript:void(0)" onClick="changeColorScheme()">
+          Theme <span class="nav-theme-icon fas"></span>
+        </a>
       </div>
     </div>
   </nav>

_includes/sections/dns.html

@@ -403,18 +403,19 @@ github="https://github.com/jedisct1/dnscrypt-proxy"
       </tr>
     </tbody>
   </table>
+</div>
 
-  <h4>Terms</h4>
+<h4>Terms</h4>
 
-  <ul>
+<ul>
   <li>DNS-over-TLS (DoT) - A security protocol for encrypted DNS on a dedicated port 853. Some providers support port 443 which generally works everywhere while port 853 is often blocked by restrictive firewalls.</li>
   <li>DNS-over-HTTPS (DoH) - Similar to DoT, but uses HTTPS instead, being indistinguishable from "normal" HTTPS traffic on port 443. <span class="badge badge-warning" data-toggle="tooltip" data-original-title="DoH contains metadata such as user-agent (which may include system information) that is sent to the DNS server."><a href="https://tools.ietf.org/html/rfc8484#section-8.2"><i class="fas fa-exclamation-triangle"></i></a></span></li>
   <li>DNSCrypt - An older yet robust method of encrypting DNS.</li>
-  </ul>
+</ul>
 
-  <h4>How to verify DNS is encrypted</h4>
+<h4>How to verify DNS is encrypted</h4>
 
-  <ul>
+<ul>
   <li>DoH / DoT
     <ul>
       <li>Check <a href="https://www.dnsleaktest.com/">DNSLeakTest.com</a>. <span class="badge badge-warning" data-toggle="tooltip" data-placement="bottom" data-original-title="Your DNS provider may not appear with their own name, so compare the responses to what you know or can find about your DNS provider. Just ensure you don't see your ISP or old unencrypted DNS provider."><i class="fas fa-exclamation-triangle"></i></span></li>
@@ -422,15 +423,14 @@ github="https://github.com/jedisct1/dnscrypt-proxy"
       <li>If using Firefox's trusted recursive resolver (TRR), navigate to <code>about:networking#dns</code>. If the TRR column says "true" for some fields, you are using DoH. <span class="badge badge-warning" data-toggle="tooltip" data-placement="bottom" data-original-title='Some fields will say "false" depending on the the value of network.trr.mode in about:config'><a href="https://wiki.mozilla.org/Trusted_Recursive_Resolver"><i class="fas fa-exclamation-triangle"></i></a></span></li>
     </ul>
   </li>
-    <li>dnscrypt-proxy - Check <a href="https://github.com/jedisct1/dnscrypt-proxy/wiki/Checking">dnscrypt-proxy's wiki on how to verify that your DNS is encrypted</a>.
+  <li>dnscrypt-proxy - Check <a href="https://github.com/jedisct1/dnscrypt-proxy/wiki/Checking">dnscrypt-proxy's wiki on how to verify that your DNS is encrypted</a>.</li>
-    </li>
   <li>DNSSEC - Check <a href="https://dnssec.vs.uni-due.de/">DNSSEC Resolver Test by Matthäus Wander</a>.</li>
   <li>QNAME Minimization - Run <code>dig +short txt qnamemintest.internet.nl</code> from the command-line (taken from <a href="https://nlnetlabs.nl/downloads/presentations/unbound_qnamemin_oarc24.pdf">this NLnet Labs presentation</a>). If you are on Windows 10, run <code>Resolve-DnsName -Type TXT -Name qnamemintest.internet.nl</code> from the PowerShell. You should see this display: <code>"HOORAY - QNAME minimisation is enabled on your resolver :)!"</code></li>
-  </ul>
+</ul>
 
-  <h3>Worth Mentioning and Additional Information</h3>
+<h3>Worth Mentioning and Additional Information</h3>
 
-  <ul>
+<ul>
   <li><strong>Encrypted DNS clients for desktop:</strong>
     <ul>
       <li><em>Firefox</em> comes with built-in DoH support with Cloudflare set as the default resolver, but can be configured to use any DoH resolver. <span class="badge badge-warning" data-toggle="tooltip" data-placement="bottom" data-original-title='"Cloudflare has agreed to collect only a limited amount of data about the DNS requests that are sent to the Cloudflare Resolver for Firefox via the Firefox browser."'><a href="https://developers.cloudflare.com/1.1.1.1/commitment-to-privacy/privacy-policy/firefox/"><i class="fas fa-exclamation-triangle"></i></a></span> Currently Mozilla is <a href="https://blog.mozilla.org/futurereleases/2019/07/31/dns-over-https-doh-update-detecting-managed-networks-and-user-choice/">conducting studies</a> before enabling DoH by default for all US-based Firefox users.</li>
@@ -472,5 +472,4 @@ github="https://github.com/jedisct1/dnscrypt-proxy"
       <li><a href="https://www.isc.org/dnssec/">DNSSEC and BIND 9</a> by the ISC</li>
     </ul>
   </li>
-  </ul>
+</ul>
-</div>

assets/css/dark.scss

@@ -0,0 +1,174 @@
+---
+---
+$dark-400: #181b21;
+$dark-300: #22262e;
+$dark-200: #343a46;
+$dark-100: #464f60;
+$light: #d8d8d8;
+$primary: #345e8e;
+$danger: #b63f4a;
+$secondary: $dark-100;
+$success: #2c7f40;
+$warning: #c6a339;
+$info: #218899;
+
+
+/*
+ * HTML
+ */
+
+body {
+  background: $dark-400;
+  color: $light;
+}
+a {
+  color: lighten($primary, 25%);
+}
+a:hover {
+  color: lighten($primary, 10%);
+}
+img {
+  filter: saturate(80%);
+}
+
+
+/*
+ * Bootstrap
+ */
+
+.alert a {
+  color: #214D97;
+}
+
+.bg-secondary, .btn-secondary, .badge-secondary { background-color: $secondary !important; }
+.btn-secondary, .card-secondary .card-header { border-color: $secondary !important; }
+.text-secondary { color: $secondary !important; }
+.alert-secondary, .btn-secondary:hover {
+  color: $light;
+  background-color: darken($secondary, 10%);
+  border-color: darken($secondary, 10%);
+}
+
+.bg-primary, .btn-primary, .badge-primary { background-color: $primary !important; }
+.btn-primary, .card-primary .card-header { border-color: $primary !important; }
+.text-primary { color: $primary !important; }
+.alert-primary, .btn-primary:hover {
+  color: $light;
+  background-color: darken($primary, 10%);
+  border-color: darken($primary, 10%);
+}
+
+.bg-warning, .btn-warning, .badge-warning { background-color: $warning !important; }
+.btn-warning, .card-warning .card-header { border-color: $warning !important; }
+.text-warning { color: $warning !important; }
+.card-warning > .text-dark { color: $dark-400 !important; }
+.alert-warning, .btn-warning:hover {
+  color: $light;
+  background-color: darken($warning, 10%);
+  border-color: darken($warning, 10%);
+}
+
+.bg-info, .btn-info, .badge-info { background-color: $info !important; }
+.btn-info, .card-info .card-header { border-color: $info !important; }
+.text-info { color: $info !important; }
+.alert-info, .btn-info:hover {
+  color: $light;
+  background-color: darken($info, 10%);
+  border-color: darken($info, 10%);
+}
+
+.bg-success, .btn-success, .badge-success { background-color: $success !important; }
+.btn-success, .card-success .card-header { border-color: $success !important; }
+.text-success { color: $success !important; }
+.alert-success, .btn-success {
+  color: $light;
+  background-color: darken($success, 10%);
+  border-color: darken($success, 10%);
+}
+
+.bg-danger, .btn-danger, .badge-danger { background-color: $danger !important; }
+.btn-danger, .card-danger .card-header { border-color: $danger !important; }
+.text-danger { color: $danger !important; }
+.alert-danger, .btn-danger:hover {
+  color: $light;
+  background-color: darken($danger, 10%);
+  border-color: darken($danger, 10%);
+}
+
+.card {
+  box-shadow: none !important;
+}
+
+.dropdown-item:hover {
+  color: $light;
+  background-color: $dark-300;
+}
+
+.form-control,
+.form-control:focus {
+  color: $light;
+  background: $dark-300;
+  border-color: $dark-300;
+}
+
+.card,
+.jumbotron,
+.list-group-item {
+  background: $dark-300;
+}
+
+.blockquote {
+  border-color: $dark-300;
+}
+
+.bg-dark {
+  background-color: $dark-300 !important;
+}
+
+.dropdown-item {
+  color: $light;
+}
+
+.list-group-item {
+  border-color: $dark-200;
+}
+
+.text-dark {
+  color: $light !important;
+}
+
+table[data-sortable].sortable-theme-bootstrap {
+  color: $light;
+  background-color: $dark-300;
+}
+table[data-sortable].sortable-theme-bootstrap th,
+table[data-sortable].sortable-theme-bootstrap td {
+  border-color: $dark-100 !important;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
+  color: $light;
+  background: $dark-200;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]::after, {
+  border-bottom-color: $light;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="descending"]::after {
+  border-top-color: $light;
+}
+
+
+/*
+ * Other
+ */
+
+.nav-dropdown {
+  color: $light;
+  background-color: $dark-400;
+  border-color: $dark-300;
+}
+
+.nav-theme-icon:before {
+  color: $warning;
+  font-size: 1em;
+  content: "\f185";
+}

assets/css/style.scss

@@ -177,6 +177,10 @@ h2, h3:not(.h5), h4, h5 {
   text-align: justify;
 }
 
+.no-text-wrap {
+  white-space: nowrap;
+}
+
 footer {
   img,
   i {
@@ -184,6 +188,7 @@ footer {
   }
 }
 
+
 /*
  * Navbar
  */
@@ -272,8 +277,15 @@ input#nav-toggle,
   display: none;
 }
 
+#nav-switch-theme {
+  /* We will make it visible with JavaScript
+   * as it does not work without it */
+  display: none;
+}
 
-/* Mobile hamburger menu */
+/*
+ * Mobile hamburger menu
+ */
 
 @media only screen and (max-width: 992px) {
   .menu,
@@ -336,6 +348,13 @@ input#nav-toggle,
   }
 }
 
-.no-text-wrap {
+.nav-theme-icon:before {
-  white-space: nowrap;
+  color: var(--warning);
+  font-size: 0.875em;
+  content: "\f186";
 }
+
+.table td, .table th {
+  vertical-align: middle;
+}
+

assets/js/main.js

@@ -27,6 +27,47 @@ function navSectionsClose(event) {
   });
 }
 
+
+// Dark/Light color scheme switch button
+document.querySelector("#nav-switch-theme").style.display = "inline"
+
+if (localStorage.getItem("colorScheme") === "dark") {
+  document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
+}
+else if (localStorage.getItem("colorScheme") === "light") {
+  document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
+}
+
+function changeColorScheme() {
+
+  // Use whatever users want
+  if (localStorage.getItem("colorScheme") === "dark") {
+    // Change to light theme
+    // by setting invalid media it will just not apply CSS for anyone
+    document.querySelector("#dark-css").setAttribute("media", "invalid");
+    localStorage.setItem("colorScheme", "light");
+  }
+  else if (localStorage.getItem("colorScheme") === "light") {
+    // Change to dark theme
+    // media was set to prefers-color-scheme: dark
+    document.querySelector("#dark-css").removeAttribute("media");
+    localStorage.setItem("colorScheme", "dark");;
+  }
+
+  // Just use whatever browsers want
+  else if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
+    // Change to light Theme
+    document.querySelector("#dark-css").setAttribute("media", "invalid");
+    localStorage.setItem("colorScheme", "light");
+  }
+  else {
+    // Change to dark theme
+    document.querySelector("#dark-css").removeAttribute("media");
+    localStorage.setItem("colorScheme", "dark");;
+  }
+}
+
+
 // Matomo
 var _paq = window._paq || [];
 /* tracker methods like "setCustomDimension" should be called before "trackPageView" */