Tails best, dark mode js, toc js, csp js

content/posts/tails/index.md

@@ -248,7 +248,9 @@ The Onion Circuits application shows which Tor circuit a connection to a server
 
 ![safest](safest.png)
 
-Like any software, Tor Browser has vulnerabilities that can be exploited. To limit this, it's important to keep Tails up to date, and it's also recommended to increase the security settings of the Tor browser: you click on the shield icon and then **Change**. By default it's set to Standard, which is a browsing quality that hardly changes from a normal browser. We recommend that you set the most restrictive setting before starting any browsing: **Safest**. The layout of some sites may be modified, and sometimes some content will not be downloaded anymore (images, videos, etc.). Some sites will not work at all; if you have reason to trust them, you can view them on a less restrictive setting on a site by site basis. Note that both of the less restrictive setting allow scripts to function, which can [break your anonymity](https://arstechnica.com/information-technology/2013/08/attackers-wield-firefox-exploit-to-uncloak-anonymous-tor-users/) in a worst-case scenario.
+Like any software, Tor Browser has vulnerabilities that can be exploited. To limit this, it's important to keep Tails up to date, and it's also recommended to increase the security settings of the Tor browser: you click on the shield icon and then **Change**. By default it's set to Standard, which is a browsing quality that hardly changes from a normal browser. We recommend that you set the most restrictive setting before starting any browsing: **Safest**. 
+
+The layout of some sites may be modified, and some types of content will be disabled (SVG images, videos are click-to-play, etc.). For example, this website has two things which will be blocked on Safest mode because they rely on Javascript: dark mode, and the Table of Contents. Some sites will not work at all with these restrictions; if you have reason to trust them, you can view them on a less restrictive setting on a site by site basis. Note that both of the less restrictive setting allow scripts to function, which can [break your anonymity](https://arstechnica.com/information-technology/2013/08/attackers-wield-firefox-exploit-to-uncloak-anonymous-tor-users/) in a worst-case scenario.
 
 ***Downloading/uploading and the Tor Browser folder***
 

themes/DeepThought/sass/deep-thought.sass

@@ -532,10 +532,6 @@ video[theme="dark"],
 pre[theme="dark"]
     filter: invert(1) hue-rotate(180deg)
 
-.menu
-  position: relative!important
-  top: 0!important
-
 #image-gay
   width: auto
   height: auto

themes/DeepThought/static/js/site.js

+"use strict";
 
+  const menuBarHeight = document.querySelector("nav.navbar").clientHeight;
+  const tocItems = document.querySelectorAll(".toc");
+  const navSections = new Array(tocItems.length);
+
+  tocItems.forEach((el, i) => {
+    let id = el.getAttribute("id").substring(5);
+    navSections[i] = document.getElementById(id);
+  })
+
+  function isVisible(tocIndex) {
+    const current = navSections[tocIndex];
+    const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1]
+      : document.querySelectorAll("section.section").item(1);
+
+    const c = current.getBoundingClientRect();
+    const n = next.getBoundingClientRect();
+    const h = (window.innerHeight || document.documentElement.clientHeight);
+
+    return (c.top <= h) && (n.top - menuBarHeight >= 0);
+  }
+
+  function activateIfVisible() {
+    for (b = true, i = 0; i < tocItems.length; i++) {
+      if (b && isVisible(i)) {
+        tocItems[i].classList.add('is-active');
+        b = false;
+      } else
+        tocItems[i].classList.remove('is-active');
+    }
+  }
+
+  var isTicking = null;
+  window.addEventListener('scroll', () => {
+    if (!isTicking) {
+      window.requestAnimationFrame(() => {
+        activateIfVisible();
+        isTicking = false;
+      });
+      isTicking = true;
+    }
+  }, false);
+
+function documentReadyCallback() {
+
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.setAttribute("theme", "dark");
+    document.querySelectorAll("img, picture, video, pre").forEach(img => img.setAttribute("theme", "dark"));
+    document.querySelectorAll(".vimeo, .youtube, .chart").forEach(video => video.setAttribute("theme", "dark"));
+    document.getElementById("dark-mode").setAttribute("title", "Switch to light theme");
+  }
+
+  document.getElementById("dark-mode").addEventListener("click", () => {
+    if (
+      localStorage.getItem("theme") == null ||
+      localStorage.getItem("theme") == "light"
+    ) {
+      localStorage.setItem("theme", "dark");
+      document.body.setAttribute("theme", "dark");
+      document.querySelectorAll("img, picture, video, pre").forEach(img => img.setAttribute("theme", "dark"));
+      document.querySelectorAll(".vimeo, .youtube, .chart").forEach(video => video.setAttribute("theme", "dark"));
+
+      document.getElementById("dark-mode").setAttribute("title", "Switch to light theme");
+    } else {
+      localStorage.setItem("theme", "light");
+      document.body.removeAttribute("theme", "dark");
+      document.querySelectorAll("img, picture, video, pre").forEach(img => img.removeAttribute("theme", "dark"))
+      document.querySelectorAll(".vimeo, .youtube, .chart").forEach(video => video.removeAttribute("theme", "dark"));
+
+      document.getElementById("dark-mode").setAttribute("title", "Switch to dark theme");
+    }
+  });
+}
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', documentReadyCallback);
+} else {
+  documentReadyCallback();
+}

themes/DeepThought/templates/base.html

@@ -5,7 +5,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src 'self'; img-src 'self'; media-src 'self'; style-src 'self';" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src 'self'; img-src 'self'; script-src 'self'; media-src 'self'; style-src 'self';" />
   <meta content="width=device-width, initial-scale=1" name="viewport" />
   <meta content="#ffffff" name="theme-color" />
   <meta content="#da532c" name="msapplication-TileColor" />
@@ -67,6 +67,11 @@
               <i class="fas fa-search"></i>
             </span>
           </a>
+          <a class="navbar-item" id="dark-mode" title="Switch to dark theme">
+            <span class="icon">
+              <i class="fas fa-adjust"></i>
+            </span>
+          </a>
         </div>
       </div>
     </div>
@@ -134,7 +139,7 @@
   </footer>
   {% endblock %}
 
-  <script src="{{ get_url(path='js/site.js') }}"></script>
+  <script src="/js/site.js" defer></script>
 
 </body>
 

themes/DeepThought/templates/page.html

@@ -126,4 +126,3 @@
 {% endif %}
 {% endblock %}
 
-