[#30][#31] fix dark mode and include font awesome

Author: bitbrain

_includes/head.html

@@ -9,5 +9,4 @@
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
-  <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
 </head>

_includes/theme-toggle.html

@@ -16,53 +16,50 @@
 </div>
 <script type="text/javascript">
 const theme = localStorage.getItem('theme');
+if (theme === 'undefined') {
+   theme = "dark";
+}
 if (theme === "dark") {
 	document.documentElement.setAttribute('data-theme', 'dark');
+} else {
+    document.documentElement.setAttribute('data-theme', 'light');
 }
 const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
 
-if (theme === "dark") {
+function activateDarkTheme() {
     document.getElementById('theme-toggle').checked = true;
     document.documentElement.setAttribute('data-theme', 'dark');
     document.documentElement.classList.add('theme--dark');
     document.documentElement.classList.remove('theme--light');
 	document.getElementById("theme-toggle").className = 'light';
-} else if (theme === "light") {
+	window.localStorage.setItem('theme', 'dark');
+}
+
+function activateLightTheme() {
     document.getElementById('theme-toggle').checked = false;
     document.documentElement.setAttribute('data-theme', 'light');
     document.documentElement.classList.add('theme--light');
     document.documentElement.classList.remove('theme--dark');
 	document.getElementById("theme-toggle").className = 'dark';
-} else if  (userPrefers === "dark") {
-    document.getElementById('theme-toggle').checked = false;
-    document.documentElement.setAttribute('data-theme', 'dark');
-	document.documentElement.classList.add('theme--dark');
-    document.documentElement.classList.remove('theme--light');
-	window.localStorage.setItem('theme', 'dark');
-	document.getElementById("theme-toggle").className = 'light';
-} else {
-    document.getElementById('theme-toggle').checked = true;
-    document.documentElement.setAttribute('data-theme', 'light');
-	document.documentElement.classList.add('theme--light');
-    document.documentElement.classList.remove('theme--dark');
 	window.localStorage.setItem('theme', 'light');
-	document.getElementById("theme-toggle").className = 'dark';
+}
+
+if (theme === "dark") {
+    activateDarkTheme();
+} else if (theme === "light") {
+    activateLightTheme();
+} else if  (userPrefers === "light") {
+    activateDarkTheme();
+} else {
+    activateDarkTheme();
 }
 
 function modeSwitcher() {
 	let currentMode = document.documentElement.getAttribute('data-theme');
 	if (currentMode === "dark") {
-	    document.documentElement.setAttribute('data-theme', 'light');
-		document.documentElement.classList.add('theme--light');
-        document.documentElement.classList.remove('theme--dark');
-		window.localStorage.setItem('theme', 'light');
-	    document.getElementById("theme-toggle").className = 'dark';
+	    activateLightTheme();
 	} else {
-	    document.documentElement.setAttribute('data-theme', 'dark');
-		document.documentElement.classList.add('theme--dark');
-        document.documentElement.classList.remove('theme--light');
-		window.localStorage.setItem('theme', 'dark');
-	    document.getElementById("theme-toggle").className = 'light';
+	    activateDarkTheme();
 	}
 }
 </script>

_sass/dash.scss

@@ -34,6 +34,9 @@ $spacing-unit: 30px !default;
 
 // Import partials.
 @import
+  "fa/fontawesome",
+  "fa/solid",
+  "fa/brands",
   "dash/fonts",
   "dash/icons",
   "dash/colors",

_sass/dash/_fonts.scss

@@ -11,5 +11,6 @@
   }
 }
 
+
 @include font('Varela Round', '/assets/fonts/VarelaRound-Regular');
-@include font('Roboto Mono', '/assets/fonts/RobotoMono-Medium');
+@include font('Roboto Mono', '/assets/fonts/RobotoMono-Medium');

_sass/fa/_animated.scss

@@ -0,0 +1,20 @@
+// Animated Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  animation: fa-spin 1s infinite steps(8);
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

_sass/fa/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+  padding: .2em .25em .15em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fab {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}

_sass/fa/_core.scss

@@ -0,0 +1,21 @@
+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fad,
+.fab {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+%fa-icon {
+  @include fa-icon;
+}

_sass/fa/_fixed-width.scss

@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  text-align: center;
+  width: $fa-fw-width;
+}