optimize: changed theme icons and removed fontawesome from most pages

.eleventy.js

@@ -26,6 +26,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addGlobalData('layout', 'base');
   eleventyConfig.addGlobalData('topbar', true);
   eleventyConfig.addGlobalData('include_prism', false);
+  eleventyConfig.addGlobalData('include_fontawesome', false);
   eleventyConfig.addGlobalData('fallbackcover', '/assets/images/fallback-cover.webp');
   eleventyConfig.addGlobalData('sitemap', {
     'priority': 0.5
@@ -38,6 +39,7 @@ module.exports = (eleventyConfig) => {
 
   // Passthrough copies
   eleventyConfig.addPassthroughCopy(config.dir.input + '/assets/stylesheets/application.min.css');
+  eleventyConfig.addPassthroughCopy(config.dir.input + '/assets/stylesheets/fontawesome.min.css');
   eleventyConfig.addPassthroughCopy(config.dir.input + '/assets/images');
   eleventyConfig.addPassthroughCopy(config.dir.input + '/assets/fonts');
   eleventyConfig.addPassthroughCopy(config.dir.input + '/assets/javascripts');

README.md

@@ -2,7 +2,7 @@
 
 Personal website of Maximilian Boll. Feel free to look around.
 
-![](https://img.shields.io/badge/version-v1.1.8-brightgreen?style=for-the-badge)
+![](https://img.shields.io/badge/version-v1.1.9-brightgreen?style=for-the-badge)
 ![](https://img.shields.io/github/last-commit/MyXoToD/makkusu.dev?style=for-the-badge)
 ![](https://img.shields.io/github/actions/workflow/status/MyXoToD/makkusu.dev/deploy.yml?style=for-the-badge)
 
@@ -30,3 +30,4 @@ Personal website of Maximilian Boll. Feel free to look around.
   - [Hobbies / Lock Picking @Nikhiel CS](https://www.pexels.com/de-de/foto/graustufenfotografie-des-zahlenschlosses-411227/)
   - [Hobbies / Neural Networks @Tara Winstead](https://www.pexels.com/de-de/foto/hand-finger-zukunft-roboter-8386440/)
   - [Fallback Cover for Blog Posts @Nick Kwan](https://www.pexels.com/de-de/foto/beleuchteter-turm-2614818/)
+  - [Light / Dark Mode Icons](https://www.svgrepo.com/)

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "watch:sass": "sass --style=compressed --watch src/assets/stylesheets/application.scss:src/assets/stylesheets/application.min.css",
     "build:sass": "sass --style=compressed src/assets/stylesheets/application.scss:src/assets/stylesheets/application.min.css",
+    "build:sass:fontawesome": "sass --style=compressed src/assets/stylesheets/fontawesome.scss:src/assets/stylesheets/fontawesome.min.css",
     "watch:eleventy": "npx @11ty/eleventy --serve",
     "build:eleventy": "npx @11ty/eleventy",
     "start": "npm-run-all build:sass --parallel watch:*",

src/_includes/theme-toggle.njk

@@ -1,4 +1,8 @@
 <div class="theme-toggle">
-  <i class="fa-solid fa-sun"></i>
-  <i class="fa-solid fa-moon"></i>
+  <i class="icon-sun">
+    {% include '../assets/images/mode-light.svg' %}
+  </i>
+  <i class="icon-moon">
+    {% include '../assets/images/mode-dark.svg' %}
+  </i>
 </div>

src/_layouts/base.njk

@@ -78,5 +78,8 @@
       <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     {% endif %}
+    {% if include_fontawesome %}
+      <link rel="stylesheet" href="{{ '/assets/stylesheets/fontawesome.min.css' | url }}?v={{ site.builtAt }}" media="screen">
+    {% endif %}
   </body>
 </html>

src/assets/stylesheets/_theme.scss

@@ -19,12 +19,27 @@
   cursor: pointer;
 
   i {
+    display: block;
+    width: 24px;
+    height: 24px;
     transition: all .5s linear;
 
-    &.fa-sun {
+    svg {
+      width: 100%;
+      height: auto;
+      display: block;
+
+      * {
+        fill: var(--c-copy);
+        stroke: var(--c-copy);
+        transition: all .5s linear;
+      }
+    }
+
+    &.icon-sun {
       display: block;
     }
-    &.fa-moon {
+    &.icon-moon {
       display: none;
     }
   }
@@ -48,9 +63,17 @@
   }
 
   &:hover {
-    color: var(--c-elevation-0);
     opacity: 1;
 
+    i {
+      svg {
+        * {
+          fill: var(--c-elevation-0);
+          stroke: var(--c-elevation-0);
+        }
+      }
+    }
+
     &:after {
       scale: 1.5;
     }
@@ -66,10 +89,10 @@
     }
   }
   .theme-toggle {
-    .fa-sun {
+    .icon-sun {
       display: none;
     }
-    .fa-moon {
+    .icon-moon {
       display: block;
     }
   }

src/assets/stylesheets/application.scss

@@ -2,9 +2,6 @@
 @import 'variables';
 @import 'reset';
 @import 'fonts';
-@import 'fontawesome/fontawesome.scss';
-@import 'fontawesome/brands.scss';
-@import 'fontawesome/solid.scss';
 @import 'base';
 
 /* Components */

src/assets/stylesheets/fontawesome.scss

@@ -0,0 +1,3 @@
+@import 'fontawesome/fontawesome.scss';
+@import 'fontawesome/brands.scss';
+@import 'fontawesome/solid.scss';

src/beacons.njk

@@ -1,6 +1,7 @@
 ---
 title: Beacons
 topbar: false
+include_fontawesome: true
 ---
 
 <div class="beacons">