Finalize structure of exploration page

js/custom.js

@@ -1,5 +1,3 @@
-// Some quick scripting to select a random background on page load
-
 const BACKGROUND_IMAGES = [
   {
     url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
@@ -78,6 +76,26 @@ function selectBackground() {
 }
 
 
+function togglePrimaryText() {
+  let items = document.getElementsByClassName("article");
+
+  for (index = 0; index < items.length; index++) {
+    if (items[index].classList.contains("primary-text")) {
+      items[index].classList.remove("primary-text");
+    } else {
+      items[index].classList.add("primary-text");
+    }
+  }
+
+  let button = document.getElementById("toggle-description");
+
+  if (button.classList.contains("active")) {
+    button.classList.remove("active");
+  } else {
+    button.classList.add("active");
+  }
+};
+
 window.addEventListener("DOMContentLoaded", function () {
   let selected = selectBackground()
 
@@ -88,6 +106,7 @@ window.addEventListener("DOMContentLoaded", function () {
 
 
 window.addEventListener("load", async function () {
+  document.getElementById("toggle-description").addEventListener("click", togglePrimaryText);
   document.getElementById("preloader").classList.add("fadeout");
   //  I don't actually know how promises or async works
   //  ¯\_(ツ)_/¯