Move to custom dark mode

content/linux-flavour.md

@@ -0,0 +1,104 @@
+Title: Choosing a Linux Flavour
+Date: 2020-10-31
+Category: Writing
+Summary: A recommendation on which flavour of Linux to run.
+
+[TOC]
+
+People often ask me which flavour of Linux they should install. In summary,
+choose Ubuntu if it's your first time. Once you are comfortable, install Debian
+the next time you need to install Linux.
+
+I run Debian on my computers and servers.
+
+## Linux Distributions
+
+When people refer to the "flavour of Linux" they are talking about a Linux
+distribution (distro). It mostly describes what software is distributed in its
+software repository.
+
+"A typical Linux distribution comprises a Linux kernel, GNU tools and
+libraries, additional software, documentation, a window system, a window
+manager, and a desktop environment." [Wikipedia]
+
+The major Linux distros are practically all the same. If you master one it's
+easy to pick up the others. The main differences you'll run into are which
+tools you use to install new software, and the desktop environment, which is
+what all the windows and buttons look like.
+
+I recommend two Linux distros, Debian and Ubuntu. Ubuntu is based off of
+Debian, so they are very similar. 
+
+## Pros of Debian
+
+Debian is one of the oldest distros and many other distros are based off it.
+You can see a timeline visualization of all its derivatives here:
+
+<https://upload.wikimedia.org/wikipedia/commons/1/1b/Linux_Distribution_Timeline.svg>
+
+This image is what originally convinced me to use Debian. Scroll down until you
+see it and zoom out so you grasp how many derivatives it has.
+
+Debian is also non-commercial and requires that all software in its main
+repository is free and open source. This is important because that grants you
+the right to study, change, and distribute the software and source code to
+anyone and for any purpose. They also follow a strong social contract you can
+see here:
+
+<https://www.debian.org/social_contract>
+
+It's also a very stable Linux distro since they freeze all software features on
+each release. This makes it great for servers because nothing will break when
+it updates.
+
+The main Raspberry Pi distro is nearly identical to Debian, so you'll also gain
+familiarity with it.
+
+## Cons of Debian
+
+Since Debian requires all its software to be free and open source, proprietary
+hardware drivers aren't included in its main repo. This can make installing
+Debian difficult if your hardware requires non-free drivers. You'll need to use
+a non-free installation image found here:
+
+<https://cdimage.debian.org/cdimage/unofficial/non-free/cd-including-firmware/>
+
+The fact that Debian freezes software features can also mean that your software
+gets old until the next Debian release. If you want versions that are bleeding
+edge, you'll need to use Debian Unstable as described here:
+
+<https://wiki.debian.org/DebianUnstable#Installation>
+
+Don't be fooled by the name "unstable". I use it for my personal computers and
+it runs fine.
+
+## Pros of Ubuntu
+
+Ubuntu is incredibly easy to install. You can also try it out before deciding
+to install it. The distro pretty much just works on what ever hardware you
+have.
+
+It's very beginner friendly because it's so popular. Any problem you search for
+will reveal dozens of threads with people solving the same problem.
+
+## Cons of Ubuntu
+
+Unfortunately Ubuntu is developed by a commercial company, Canonical. The
+company's interests come first, before the users' and they have a track record
+of betraying their users' trust and privacy. 
+
+Years ago Ubuntu had a feature enabled by default that would send your desktop
+searches to Amazon so they could suggest products for you to buy:
+
+<https://www.pcworld.com/article/2840401/ubuntus-unity-8-desktop-removes-the-amazon-search-spyware.html>
+
+Currently whenever you remote login to your Ubuntu machine, it phones home to
+Canonical and they collect info about your system:
+
+<https://ubuntu.com/legal/motd>
+
+While these reasons are fairly minor, they are quite frowned upon in the Linux
+community and are reason enough to switch to Debian once you are comfortable
+with using Linux.
+
+[Wikipedia]: https://en.wikipedia.org/wiki/Linux_distribution

pelicanconf.py

@@ -2,7 +2,7 @@
 # -*- coding: utf-8 -*- #
 from __future__ import unicode_literals
 
-AUTHOR = 'Tanner'
+AUTHOR = 'Tanner Collin'
 SITENAME = 'Tanner Collin'
 SITEURL = ''
 
@@ -38,3 +38,14 @@ MARKDOWN = {
 #RELATIVE_URLS = True
 
 THEME = 'themes/theme'
+
+# turn off useless outputs
+TAG_SAVE_AS = ''
+CATEGORY_SAVE_AS = ''
+AUTHOR_SAVE_AS = ''
+ARCHIVES_SAVE_AS = ''
+AUTHORS_SAVE_AS = ''
+CATEGORIES_SAVE_AS = ''
+TAGS_SAVE_AS = ''
+
+PROD = False

publishconf.py

@@ -2,24 +2,56 @@
 # -*- coding: utf-8 -*- #
 from __future__ import unicode_literals
 
-# This file is only used if you use `make publish` or
+AUTHOR = 'Tanner Collin'
-# explicitly specify it as your config file.
+SITENAME = 'Tanner Collin'
-
-import os
-import sys
-sys.path.append(os.curdir)
-from pelicanconf import *
-
-# If your site is available via HTTPS, make sure SITEURL begins with https://
 SITEURL = ''
-RELATIVE_URLS = False
 
-FEED_ALL_ATOM = 'feeds/all.atom.xml'
+PATH = 'content'
-CATEGORY_FEED_ATOM = 'feeds/{slug}.atom.xml'
 
-DELETE_OUTPUT_DIRECTORY = True
+TIMEZONE = 'Canada/Mountain'
 
-# Following items are often useful when publishing
+DEFAULT_LANG = 'en'
 
-#DISQUS_SITENAME = ""
+# Feed generation is usually not desired when developing
-#GOOGLE_ANALYTICS = ""
+FEED_ALL_ATOM = None
+CATEGORY_FEED_ATOM = None
+TRANSLATION_FEED_ATOM = None
+AUTHOR_FEED_ATOM = None
+AUTHOR_FEED_RSS = None
+
+DEFAULT_PAGINATION = False
+
+MARKDOWN = {
+    'extension_configs': {
+        'markdown.extensions.codehilite': {'css_class': 'highlight'},
+        'markdown.extensions.extra': {},
+        'markdown.extensions.meta': {},
+        'markdown.extensions.toc': {
+            'toc_depth': '2-3',
+            'anchorlink': True,
+        },
+    },
+    'output_format': 'html5',
+}
+
+# Uncomment following line if you want document-relative URLs when developing
+#RELATIVE_URLS = True
+
+THEME = 'themes/theme'
+
+# turn off useless outputs
+TAG_SAVE_AS = ''
+CATEGORY_SAVE_AS = ''
+AUTHOR_SAVE_AS = ''
+ARCHIVES_SAVE_AS = ''
+AUTHORS_SAVE_AS = ''
+CATEGORIES_SAVE_AS = ''
+TAGS_SAVE_AS = ''
+
+INDEX_SAVE_AS = 'index.php'
+ARTICLE_URL = '{slug}/'
+ARTICLE_SAVE_AS = '{slug}/index.php'
+PAGE_URL = '{slug}/'
+PAGE_SAVE_AS = '{slug}/index.php'
+
+PROD = True

themes/theme/static/instant-page.js

@@ -0,0 +1,2 @@
+/*! instant.page v5.1.0 - (C) 2019-2020 Alexandre Dieulot - https://instant.page/license */
+let t,e;const n=new Set,o=document.createElement("link"),i=o.relList&&o.relList.supports&&o.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype,s="instantAllowQueryString"in document.body.dataset,a="instantAllowExternalLinks"in document.body.dataset,r="instantWhitelist"in document.body.dataset,c="instantMousedownShortcut"in document.body.dataset,d=1111;let l=65,u=!1,f=!1,m=!1;if("instantIntensity"in document.body.dataset){const t=document.body.dataset.instantIntensity;if("mousedown"==t.substr(0,"mousedown".length))u=!0,"mousedown-only"==t&&(f=!0);else if("viewport"==t.substr(0,"viewport".length))navigator.connection&&(navigator.connection.saveData||navigator.connection.effectiveType&&navigator.connection.effectiveType.includes("2g"))||("viewport"==t?document.documentElement.clientWidth*document.documentElement.clientHeight<45e4&&(m=!0):"viewport-all"==t&&(m=!0));else{const e=parseInt(t);isNaN(e)||(l=e)}}if(i){const n={capture:!0,passive:!0};if(f||document.addEventListener("touchstart",function(t){e=performance.now();const n=t.target.closest("a");if(!h(n))return;v(n.href)},n),u?c||document.addEventListener("mousedown",function(t){const e=t.target.closest("a");if(!h(e))return;v(e.href)},n):document.addEventListener("mouseover",function(n){if(performance.now()-e<d)return;const o=n.target.closest("a");if(!h(o))return;o.addEventListener("mouseout",p,{passive:!0}),t=setTimeout(()=>{v(o.href),t=void 0},l)},n),c&&document.addEventListener("mousedown",function(t){if(performance.now()-e<d)return;const n=t.target.closest("a");if(t.which>1||t.metaKey||t.ctrlKey)return;if(!n)return;n.addEventListener("click",function(t){1337!=t.detail&&t.preventDefault()},{capture:!0,passive:!1,once:!0});const o=new MouseEvent("click",{view:window,bubbles:!0,cancelable:!1,detail:1337});n.dispatchEvent(o)},n),m){let t;(t=window.requestIdleCallback?t=>{requestIdleCallback(t,{timeout:1500})}:t=>{t()})(()=>{const t=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){const n=e.target;t.unobserve(n),v(n.href)}})});document.querySelectorAll("a").forEach(e=>{h(e)&&t.observe(e)})})}}function p(e){e.relatedTarget&&e.target.closest("a")==e.relatedTarget.closest("a")||t&&(clearTimeout(t),t=void 0)}function h(t){if(t&&t.href&&(!r||"instant"in t.dataset)&&(a||t.origin==location.origin||"instant"in t.dataset)&&["http:","https:"].includes(t.protocol)&&("http:"!=t.protocol||"https:"!=location.protocol)&&(s||!t.search||"instant"in t.dataset)&&!(t.hash&&t.pathname+t.search==location.pathname+location.search||"noInstant"in t.dataset))return!0}function v(t){if(n.has(t))return;const e=document.createElement("link");e.rel="prefetch",e.href=t,document.head.appendChild(e),n.add(t)}

themes/theme/templates/article.html

@@ -1,5 +1,29 @@
 {% extends "base.html" %}
 
+{% block title %}{{ SITENAME }} - {{ article.title|striptags  }}{% endblock %}
+
+{% block head %}
+	{{ super() }}
+
+	{% if article.date %}
+		<meta name="date" content="{{article.date}}" />
+	{% endif %}
+
+	{% if article.summary %}
+		<meta name="description" content="{{article.summary|striptags}}" />
+		<meta name="summary" content="{{article.summary|striptags}}" />
+	{% endif %}
+
+	{% if article.category %}
+		<meta name="category" content="{{article.category}}" />
+	{% endif %}
+
+	{% for tag in article.tags %}
+		<meta name="tags" content="{{tag}}" />
+	{% endfor %}
+
+{% endblock %}
+
 {% block content %}
 <p><a href="/">← Return to Home</a></p>
 <header>

themes/theme/templates/base.html

@@ -1,19 +1,54 @@
+{% if PROD %}
+<?php
+	$themeClass = '';
+	if (!empty($_COOKIE['theme'])) {
+		$themeClass = $_COOKIE['theme'];
+	}
+?>
+{% endif %}
+
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		{% block head %}
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<meta charset="utf-8"/>
 
+		<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+		<meta name="author" content="{{ AUTHOR }}" />
+		{% endblock head %}
+
+		<link rel="preload" href="/theme/fonts/AppSILB.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/AppSILBI.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/AppSILI.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/AppSILR.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+
+		<link rel="preload" href="/theme/fonts/Lato-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/Lato-BoldItalic.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/Lato-Italic.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+		<link rel="preload" href="/theme/fonts/Lato-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+
 		<style>
 		{% include 'style.css' %}
+		{% include 'fonts.css' %}
 		</style>
 
-		<link rel="stylesheet" type="text/css" href="/theme/fonts/fonts.css" />
+		<script defer src="/theme/instant-page.js"></script>
 
-		<title>Tanner Collin</title>
+		<noscript>
+			<style type="text/css">
+				.theme-select {
+					display: none !important;
+				}
+			</style>
+		</noscript>
 	</head>
 
+{% if PROD %}
+	<body class="<?php echo $themeClass; ?>">
+{% else %}
 	<body>
+{% endif %}
 		<div class="container">
 			<div class="sidebar">
 				<img src="/theme/me.jpg" class="me" alt="A picture of me smiling" />
@@ -22,9 +57,12 @@
 						Tanner Collin
 					</p>
 					<p class="contact-icons">
-						<a href="mailto:site@tannercollin.com"><img src="/theme/mail.svg" /></a>
+						<a href="mailto:site@tannercollin.com" rel="noreferrer noopener"><img alt="email icon" src="/theme/mail.svg" /></a>
-						<a href="https://t.me/tannercollin" target="_blank"><img src="/theme/telegram.svg" /></a>
+						<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
-						<a href="https://github.com/tannercollin" target="_blank"><img src="/theme/github.svg" /></a>
+						<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
+					</p>
+					<p class='theme-select'>
+						<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
 					</p>
 				</div>
 			</div>
@@ -34,9 +72,12 @@
 					<div class="info">
 						Tanner Collin
 						<p class="contact-icons">
-							<a href="mailto:site@tannercollin.com"><img src="/theme/mail.svg" /></a>
+							<a href="mailto:site@tannercollin.com" rel="noreferrer noopener"><img alt="email icon" src="/theme/mail.svg" /></a>
-							<a href="https://t.me/tannercollin" target="_blank"><img src="/theme/telegram.svg" /></a>
+							<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
-							<a href="https://github.com/tannercollin" target="_blank"><img src="/theme/github.svg" /></a>
+							<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
+						</p>
+						<p class='theme-select'>
+							<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
 						</p>
 					</div>
 				</div>
@@ -45,17 +86,22 @@
 			</div>
 		</div>
 
-		<script src="/theme/darkmode-js.min.js"></script>
+	<script>
-		<script>
+		function setTheme(theme) {
-			const options = {
+			console.log('Setting theme to', theme);
-				bottom: '16px',
+
-				right: '16px',
+			if (theme == 'dark') {
-				buttonColorDark: '#666',
+				document.body.classList.add('dark');
-				buttonColorLight: '#aaa',
+				document.body.classList.remove('light');
-				label: '🌙',
+			} else if (theme == 'light') {
-			};
+				document.body.classList.add('light');
-			new Darkmode(options).showWidget();
+				document.body.classList.remove('dark');
-		</script>
+			}
+
+			document.cookie = 'theme=' + theme + '; Max-Age=31536000; Path=/; SameSite=Lax';
+		}
+	</script>
+
 	</body>
 </html>
 		

themes/theme/templates/fonts.css

@@ -1,20 +1,20 @@
 @font-face {
 	font-family: 'Apparatus SIL';
-	src: url('AppSILR.ttf') format('truetype');
+	src: url('/theme/fonts/AppSILR.ttf') format('truetype');
 	font-display: swap;
 }
 
 @font-face {
 	font-family: 'Apparatus SIL';
 	font-style: italic;
-	src: url('AppSILI.ttf') format('truetype');
+	src: url('/theme/fonts/AppSILI.ttf') format('truetype');
 	font-display: swap;
 }
 
 @font-face {
 	font-family: 'Apparatus SIL';
 	font-weight: bold;
-	src: url('AppSILB.ttf') format('truetype');
+	src: url('/theme/fonts/AppSILB.ttf') format('truetype');
 	font-display: swap;
 }
 
@@ -22,7 +22,7 @@
 	font-family: 'Apparatus SIL';
 	font-weight: bold;
 	font-style: italic;
-	src: url('AppSILBI.ttf') format('truetype');
+	src: url('/theme/fonts/AppSILBI.ttf') format('truetype');
 	font-display: swap;
 }
 
@@ -30,7 +30,7 @@
 	font-family: 'Lato';
 	font-style: italic;
 	font-weight: 400;
-	src: local('Lato Italic'), local('Lato-Italic'), url('Lato-Italic.ttf') format('truetype');
+	src: local('Lato Italic'), local('Lato-Italic'), url('/theme/fonts/Lato-Italic.ttf') format('truetype');
 	font-display: swap;
 }
 
@@ -38,7 +38,7 @@
 	font-family: 'Lato';
 	font-style: italic;
 	font-weight: 700;
-	src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('Lato-BoldItalic.ttf') format('truetype');
+	src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('/theme/fonts/Lato-BoldItalic.ttf') format('truetype');
 	font-display: swap;
 }
 
@@ -46,7 +46,7 @@
 	font-family: 'Lato';
 	font-style: normal;
 	font-weight: 400;
-	src: local('Lato Regular'), local('Lato-Regular'), url('Lato-Regular.ttf') format('truetype');
+	src: local('Lato Regular'), local('Lato-Regular'), url('/theme/fonts/Lato-Regular.ttf') format('truetype');
 	font-display: swap;
 }
 
@@ -54,6 +54,6 @@
 	font-family: 'Lato';
 	font-style: normal;
 	font-weight: 700;
-	src: local('Lato Bold'), local('Lato-Bold'), url('Lato-Bold.ttf') format('truetype');
+	src: local('Lato Bold'), local('Lato-Bold'), url('/theme/fonts/Lato-Bold.ttf') format('truetype');
 	font-display: swap;
 }

themes/theme/templates/index.html

@@ -1,24 +1,31 @@
 {% extends "base.html" %}
 
+{% block head %}
+	{{ super() }}
+
+	<meta name="description" content="The personal website of Tanner Collin." />
+	<meta name="summary" content="The personal website of Tanner Collin." />
+{% endblock %}
+
 {% block content %}
 <p>
-	Hi, I'm Tanner! I do firmware design and web development.
+	Hi, I'm Tanner! I do firmware and web development in Calgary.
 </p>
 
 <h2>Contact Info</h2>
 
 <p>
 	Email: <a href="mailto:site@tannercollin.com">site@tannercollin.com</a> <br />
-	Telegram: <a href="https://t.me/tannercollin" target="_blank">@tannercollin</a>
+	Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
 </p>
 
 <h2>Resume</h2>
 
 <ul>
-	<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank">Cabana Blockchain</a>, 2018–</li>
+	<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li>
-	<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank">Critical Control</a>, 2016–2018</li>
+	<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li>
-	<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank">Opener Aero</a>, 2016–2016</li>
+	<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li>
-	<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank">Pason Systems</a>, 2014–2015</li>
+	<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li>
 	<li>BSc. Electrical Engineering from University of Calgary</li>
 </ul>
 
@@ -30,10 +37,10 @@
 </p>
 
 <p>
-	You can find my code on <a href="https://github.com/tannercollin" target="_blank">GitHub</a>.
+	You can find my code on <a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener">GitHub</a>.
 </p>
 
-{% for article in articles_page.object_list %}
+{% for article in articles_page.object_list if article.category.name == 'Projects' %}
 <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
 <div class="summary">
 	{{ article.summary }}

themes/theme/templates/style.css

@@ -5,20 +5,15 @@ html {
 body {
 	text-rendering: optimizeLegibility;
 	font: 1.2rem/1.0 Lato,sans-serif;
-	background-color: rgb(245, 245, 245);
-	background-color: white;
 }
 
 a {
-	color: #000000;
 	text-decoration: none;
 	outline: none;
-	border-bottom: 1px solid #000;
 }
 
 pre {
 	font-size: 1rem;
-	background-color: #eee;
 	padding: 1rem;
 }
 
@@ -27,6 +22,12 @@ pre {
 	margin: 2rem auto 0 auto;
 }
 
+.theme-select {
+	font-size: 1rem;
+	margin-bottom: 0;
+	cursor: pointer;
+}
+
 .sidebar {
 	margin-top: 2px;
 	float: left;
@@ -63,7 +64,7 @@ pre {
 
 .topbar .me {
 	float: left;
-	height: 6rem;
+	height: 6.5rem;
 	width: auto;
 }
 
@@ -74,7 +75,6 @@ pre {
 }
 
 .topbar .contact-icons {
-	margin-top: 1.5rem;
 	margin-left: 0.25rem;
 	margin-bottom: 0;
 }
@@ -89,11 +89,15 @@ pre {
 	margin-right: 1rem;
 }
 
+.topbar .theme-select {
+	margin-top: 0.5rem;
+}
+
 .toc {
 	float: right;
-	background-color: #eee;
 	padding: 0.75rem;
 	padding-top: 0;
+	margin-left: 0.75rem;
 }
 
 .toc ul {
@@ -106,7 +110,6 @@ pre {
 }
 
 .content p.metadata {
-	color: #555;
 	font: 1rem/1.0 Apparatus SIL,serif;
 	font-style: italic;
 }
@@ -163,18 +166,118 @@ pre {
 	}
 }
 
-.darkmode-toggle {
+
-	z-index: 500;
+
+body {
+	background-color: #fff;
+	color: #000;
 }
 
-.darkmode--activated .content img {
+a {
+	color: #000;
+	border-bottom: 1px solid #000;
+}
+
+pre {
+	background-color: #eee;
+}
+
+.toc {
+	background-color: #eee;
+}
+
+.content p.metadata {
+	color: #555;
+}
+
+body.dark {
+	background-color: #000;
+	color: #fff;
+}
+
+body.dark a {
+	color: #fff;
+	border-bottom: 1px solid #fff;
+}
+
+body.dark pre {
+	background-color: #222;
+}
+
+body.dark .toc {
+	background-color: #222;
+}
+
+body.dark .content p.metadata {
+	color: #aaa;
+}
+
+body.dark .content img {
 	filter: brightness(75%);
 }
 
-.darkmode--activated video {
+body.dark .contact-icons img {
-	mix-blend-mode: difference;
-}
-
-.darkmode--activated .contact-icons img {
 	filter: invert(1);
 }
+
+@media (prefers-color-scheme: dark) {
+	body.light {
+		background-color: #fff;
+		color: #000;
+	}
+
+	body.light a {
+		color: #000;
+		border-bottom: 1px solid #000;
+	}
+
+	body.light pre {
+		background-color: #eee;
+	}
+
+	body.light .toc {
+		background-color: #eee;
+	}
+
+	body.light .content p.metadata {
+		color: #555;
+	}
+
+	body.light .contact-icons img {
+		filter: none;
+	}
+
+	body.light .content img {
+		filter: none;
+	}
+
+	body {
+		background-color: #000;
+		color: #fff;
+	}
+
+	a {
+		color: #fff;
+		border-bottom: 1px solid #fff;
+	}
+
+	pre {
+		background-color: #222;
+	}
+
+	.toc {
+		background-color: #222;
+	}
+
+	.content p.metadata {
+		color: #aaa;
+	}
+
+	.content img {
+		filter: brightness(75%);
+	}
+
+	.contact-icons img {
+		filter: invert(1);
+	}
+}