home launch logic

assets/css/index.css

@@ -3,12 +3,34 @@
   src: url("/assets/font/Work_Sans/WorkSans-VariableFont_wght.ttf")
     format("truetype");
 }
-
+@font-face {
+  font-family: "Herbik";
+  src: url("/assets/font/Herbik/Herbik1.3Dev-Regular.otf") format("truetype");
+}
 :root {
   --cc-primary: olive;
   --cc-secondary: #ff3b00;
 
+  --cc-olive: #8d8200;
+  --cc-olive-light: #bfb326;
+  --cc-olive-highlight: #fff600;
+
+  --cc-orange: #dd5800;
+  --cc-orange-light: #ff7200;
+  --cc-orange-highlight: #ff9d00;
+
+  --cc-purple: #2c2546;
+  --cc-purple-light: #8a7eb5;
+  --cc-purple-highlight: #c3b2ff;
+
+  --cc-blue: #194641;
+  --cc-blue-light: #d1dcda;
+  --cc-blue-highlight: #f0faf7;
+
+  --cc-bg: #f5f5f5;
+
   --ff-primary: "Work Sans", sans-serif;
+  --ff-serif: "Herbik", serif;
 
   --fs-fluid-title: clamp(
     3.5rem,
@@ -45,6 +67,7 @@ html {
 body {
   color: var(--cc-primary);
   font-size: var(--fs-med);
+  background-color: var(--cc-bg);
 }
 
 h1,
@@ -96,6 +119,10 @@ li {
   display: none;
 }
 
+.serif {
+  font-family: var(--ff-serif);
+}
+
 /* 
 ============
 dot2dot
@@ -121,16 +148,42 @@ path {
   }
 }
 
+/* 
+============
+menu overlay 
+- cover viewport, overlap main content but not header
+============
+*/
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--cc-bg);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.5s, visibility 0.5s;
+  z-index: 10;
+  display: none;
+}
+
 /* 
 ============
 header desktop 
 ============
 */
 @media (min-width: 769px) {
+  .overlay {
+    display: block;
+  }
+
   .header-container {
     display: grid;
     grid-template-rows: auto auto; /* two rows */
     grid-template-columns: 1fr;
+    z-index: 11;
+    position: relative;
   }
 
   .header {
@@ -240,7 +293,7 @@ main content sections
   width: 100%;
 }
 
-section p:first-child {
+section:first-child {
   margin-top: 0;
 }
 
@@ -326,17 +379,29 @@ button.toggle {
 }
 
 /* ------------------ 
-items 
+audio items 
 --------------- */
-.tag {
-  padding: 0.05rem 0.5rem;
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
-  display: inline-block;
-  border: var(--cc-primary) 1px solid;
-  border-radius: 4px;
+
+.audio-button {
+  position: absolute;
+  z-index: 10;
+  border-radius: 50%;
+}
+.circle-button {
+  border: 2px solid var(--cc-primary);
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+  /* background-color: transparent; */
+  background-color: var(--cc-bg);
+}
+.circle-button:hover {
+  background-color: #efefef;
 }
 
+.circle-button.clicked {
+  background-color: var(--cc-primary);
+}
 /* ------------------ 
 ! temp test 
 --------------- */

assets/css/templates/artist.css

@@ -1,18 +1,3 @@
-.circle-button {
-  border: 2px solid var(--cc-primary);
-  border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
-  background-color: transparent;
-}
-.circle-button:hover {
-  background-color: #efefef;
-}
-
-.circle-button.clicked {
-  background-color: var(--cc-primary);
-}
-
 .audio-sample {
   display: none;
 }

assets/js/save-the-date.js

@@ -0,0 +1,80 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const audioButtons = document.querySelectorAll(".audio-button");
+  const logos = document.querySelectorAll(".logo");
+  let currentLogoIndex = 0;
+
+  const changeLogo = () => {
+    // hide logos
+    logos.forEach((logo) => {
+      logo.style.display = "none";
+    });
+
+    // show next logo
+    currentLogoIndex = (currentLogoIndex + 1) % logos.length;
+    logos[currentLogoIndex].style.display = "block";
+  };
+
+  audioButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      // stop all audio
+      document.querySelectorAll("audio").forEach((audio) => {
+        audio.pause();
+        audio.currentTime = 0;
+      });
+
+      // play
+      const audioElement = this.querySelector("audio");
+      if (audioElement) {
+        audioElement.play().catch((e) => {
+          console.error("Error playing audio:", e);
+          alert(
+            "whoops - no sounds today. Please try again later or contact us for help."
+          );
+        });
+      }
+
+      changeLogo();
+    });
+  });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  var svg = d3.select("svg");
+  // get all dots (and numbers, currently)
+  var circles = svg.selectAll(".cls-3").nodes();
+  console.log(circles);
+
+  // get container's offset
+  var containerRect = document
+    .querySelector("#svg-container")
+    .getBoundingClientRect();
+
+  // select all audio buttons
+  var audioButtons = d3.selectAll(".audio-button").nodes();
+
+  audioButtons.forEach((button, i) => {
+    if (i < circles.length) {
+      // only if a circle exists
+      var circle = d3.select(circles[i]);
+      var cx = +circle.attr("cx");
+      var cy = +circle.attr("cy");
+
+      // move button
+      d3.select(button)
+        .style("position", "absolute")
+        .style("left", containerRect.left + cx + "px")
+        .style("top", containerRect.top + cy + "px");
+    }
+  });
+
+  // play audio
+  d3.selectAll(".audio-button").on("click", function () {
+    var audioID = d3.select(this).select("audio").attr("id");
+    var audioElement = document.getElementById(audioID);
+    if (audioElement) {
+      audioElement
+        .play()
+        .catch((e) => console.error("Error playing audio:", e));
+    }
+  });
+});

assets/js/script.js

@@ -9,14 +9,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const sectionId = button.getAttribute("aria-controls");
     const sectionItems = document.getElementById(sectionId);
 
-    // display flex for non-homepage menu-items, block for others
-    if (sectionId === "menu-items") {
-      if (sectionItems.classList.contains("flex")) {
-        sectionItems.style.display = isExpanded ? "none" : "flex";
-      }
-    } else {
-      sectionItems.style.display = isExpanded ? "none" : "block";
-    }
+    // toggle block display
+    sectionItems.style.display = isExpanded ? "none" : "block";
+
     // update parent li class
     var parent = button.closest("li.first-item");
     if (parent) {

content/040-e.wav.txt

@@ -0,0 +1,17 @@
+Audio-category: e
+
+----
+
+Description: 
+
+----
+
+Sort: 3
+
+----
+
+Uuid: HzDKjlqI2dxvMKKF
+
+----
+
+Template: audio_custom