fgixes to CSS and home page.

docs/src/js/faces-intro.js

@@ -0,0 +1,16 @@
+// ---------------------
+// This script does the animations for the faces
+// on the home page.
+// ---------------------
+
+document.addEventListener('DOMContentLoaded', function () {
+     const imageContainers = document.querySelectorAll('.face');
+
+     setTimeout(() => {
+          imageContainers.forEach((container, index) => {
+               setTimeout(() => {
+                    container.classList.add('active');
+               }, (index + 1) * 1000); // Adjust delay between images
+          });
+     }, 4800);
+});

docs/src/js/hover-text.js

@@ -0,0 +1,22 @@
+// ---------------------
+// This script changes the text when hovering over faces on the home page.
+// ---------------------
+
+function setHoverText(elementId, text) {
+     const hoverTextElement = document.getElementById('hover-text');
+
+     document.getElementById(elementId).onmouseover = function () {
+          hoverTextElement.innerHTML = text;
+          hoverTextElement.classList.remove('leave');
+          hoverTextElement.classList.add('fade-in');
+     };
+
+     document.getElementById(elementId).onmouseout = function () {
+          hoverTextElement.classList.remove('fade-in');
+          hoverTextElement.classList.add('leave');
+     };
+}
+
+setHoverText('visual-hover', 'a thousand words at a time');
+setHoverText('technical-hover', 'in zeroes, ones, and other numbers');
+setHoverText('writing-hover', 'letter by letter, word by word');

docs/src/js/index-text.js

@@ -1,11 +0,0 @@
-document.getElementById('visual-hover').onmouseover = function () {
-     document.getElementById('hover-text').innerHTML = "a thousand words at a time";
-};
-
-document.getElementById('technical-hover').onmouseover = function () {
-     document.getElementById('hover-text').innerHTML = "in zeroes, ones, and other numbers";
-};
-
-document.getElementById('writing-hover').onmouseover = function () {
-     document.getElementById('hover-text').innerHTML = "letter by letter, word by word";
-};

docs/src/js/page-loader.js

@@ -1,3 +1,7 @@
+// ---------------------
+// This script loads the page loading animation.
+// ---------------------
+
 document.getElementById('loader').style.display = 'block';
 
 function fadeOutLoader() {