Fix color sliders on chrome and other small tweaks

.gitignore

@@ -41,7 +41,7 @@
 .Trashes
 .VolumeIcon.icns
 .vscode-test
-.vscode/
+.vscode/settings.json
 .vuepress/dist
 .yarn-integrity
 .yarn/build-state.yml

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "rust-lang.rust-analyzer"
+  ]
+}

client/css/styles.scss

@@ -145,11 +145,6 @@ datalist {
 
   > input[type="range"] {
     width: 100px;
-
-    &::-webkit-slider-runnable-track {
-      background: #007aff;
-      border-radius: 48px;
-    }
   }
 
   > select.fullWidth {
@@ -366,7 +361,7 @@ input {
 // Blog styles below
 
 .blogPostRoot {
-  background: #1a022e url("https://mandelbrot.site/static/blog-background.png")
+  background: #1e0a30 url("https://mandelbrot.site/static/blog-background.png")
     center / cover fixed !important;
 
   .blogPost {
@@ -378,11 +373,16 @@ input {
 
     a {
       color: white;
+
+      &.active {
+        font-style: italic;
+        text-decoration: none;
+      }
     }
 
     nav {
       border-right: 1px solid #777;
-      background-color: #00000099;
+      background-color: rgba(0, 0, 0, 0.25);
       padding: 16px 24px;
 
       ul {

client/html/blog-template.html

@@ -74,27 +74,42 @@ <h2 class="siteName">Mandelbrot.site</h2>
           <strong>Topics</strong>
           <ul>
             <li>
-              <a href="/how-mandelbrot-site-was-built">
+              <a
+                href="/how-mandelbrot-site-was-built"
+                class="{{howMandelbrotSiteWasBuiltClass}}"
+              >
                 How Mandelbrot.site Was Built
               </a>
             </li>
             <li>
-              <a href="/what-is-mandelbrot-set">
+              <a
+                href="/what-is-mandelbrot-set"
+                class="{{whatIsMandelbrotSetClass}}"
+              >
                 What Is the Mandelbrot Set?
               </a>
             </li>
             <li>
-              <a href="/history-of-mandelbrot-set">
+              <a
+                href="/history-of-mandelbrot-set"
+                class="{{historyOfMandelbrotSetClass}}"
+              >
                 History of the Mandelbrot Set
               </a>
             </li>
             <li>
-              <a href="/who-was-benoit-mandelbrot">
+              <a
+                href="/who-was-benoit-mandelbrot"
+                class="{{whoWasBenoitMandelbrotClass}}"
+              >
                 Who Was Benoit Mandelbrot?
               </a>
             </li>
             <li>
-              <a href="/why-mandelbrot-set-important">
+              <a
+                href="/why-mandelbrot-set-important"
+                class="{{whyMandelbrotSetImportantClass}}"
+              >
                 Why the Mandelbrot Set Is Important
               </a>
             </li>

client/html/index.html

@@ -142,7 +142,7 @@ <h1 class="navHeading">
       </div>
       <div class="inputSeparator mobileHidden"></div>
       <label class="colorSchemeLabel mobileHidden" for="colorScheme">
-        Base color scheme
+        Color scheme
       </label>
       <div class="inputWrapper mobileHidden">
         <select id="colorScheme" name="colorScheme" required class="fullWidth">

client/webpack.config.js

@@ -7,6 +7,8 @@ const { marked } = require("marked");
 const frontMatter = require("front-matter");
 const fs = require("fs");
 const template = require("lodash/template");
+const camelCase = require("lodash/camelCase");
+const fromPairs = require("lodash/fromPairs");
 const Dotenv = require("dotenv-webpack");
 
 const blogDir = "./blog";
@@ -18,13 +20,29 @@ for (const file of fs.readdirSync(blogDir)) {
     const htmlFile = file.replace(".md", ".html");
     const blogTemplate = fs.readFileSync("./html/blog-template.html", "utf8");
 
+    const slug = htmlFile.replace(/\.html$/, "");
+    const slugCamel = camelCase(slug);
+
+    const linkClasses = fromPairs(
+      [
+        "howMandelbrotSiteWasBuiltClass",
+        "whatIsMandelbrotSetClass",
+        "historyOfMandelbrotSetClass",
+        "whoWasBenoitMandelbrotClass",
+        "whyMandelbrotSetImportantClass",
+      ].map((c) => {
+        return [c, slugCamel === c.split("Class")[0] ? "active" : ""];
+      }),
+    );
+
     const result = template(blogTemplate, {
       interpolate: /{{([\s\S]+?)}}/g,
     })({
       title: metadata.title,
       description: metadata.excerpt,
       content: html,
-      slug: htmlFile.replace(/\.html$/, ""),
+      slug,
+      ...linkClasses,
     });
 
     if (!fs.existsSync("./dist")) {