convert home to alpine

assets/script.js

@@ -1,45 +1,31 @@
-function toggleTab(event, tabName) {
-  hideAllTabs(event)
-
-  const button =
-    event.target.tagName === "BUTTON"
-      ? event.target
-      : event.target.closest("button")
-  // const buttonTop = button.offsetTop
-  const icon = button.querySelector(".more-less-icon")
-  const article = document.querySelector("#" + tabName)
-
-  icon.textContent = icon.textContent === "+" ? "-" : "+"
-  button.classList.toggle("open")
-  article.classList.toggle("hidden")
+function openTab(data, tab) {
+  data.activeTab === tab ? (data.activeTab = "") : (data.activeTab = tab);
 }
 
-function hideAllTabs(event) {
-  const tabContainer = event.target.closest("toggle")
-  const buttons = document.querySelectorAll(".toggle-btn")
-  const articles = document.querySelectorAll(".tab")
-
-  buttons.forEach((btn) => {
-    btn.classList.remove("open")
-    btn.querySelector(".more-less-icon").textContent = "+"
-  })
-  articles.forEach((article) => {
-    article.classList.add("hidden")
-  })
+function scrollToElem(selector) {
+  setTimeout(() => {
+    const yOffset = -185;
+    const elem = document.querySelector(selector);
+    const top = elem.getBoundingClientRect().top;
+    window.scrollTo({
+      top: top + window.scrollY + yOffset,
+      behavior: "smooth",
+    });
+  }, 100);
 }
 
 document.addEventListener("DOMContentLoaded", () => {
   function toggleLogoState() {
-    const scrollY = window.scrollY || window.pageYOffset
+    const scrollY = window.scrollY || window.pageYOffset;
 
     if (scrollY > 10) {
-      document.querySelector("#header").classList.add("minimized")
+      document.querySelector("#header").classList.add("minimized");
     } else {
-      document.querySelector("#header").classList.remove("minimized")
+      document.querySelector("#header").classList.remove("minimized");
     }
   }
 
   window.addEventListener("scroll", () => {
-    toggleLogoState()
-  })
-})
+    toggleLogoState();
+  });
+});

assets/style.css

@@ -10,6 +10,11 @@
 }
 
 /* ================= RESET ================= */
+body,
+html {
+  scroll-behavior: smooth;
+}
+
 html,
 body,
 h1,
@@ -166,6 +171,10 @@ button {
   align-items: center;
 }
 
+article p {
+  margin-bottom: var(--unit--vertical);
+}
+
 /* ================= HEADER ================= */
 #header {
   position: fixed;
@@ -351,17 +360,33 @@ h2.left.open::before {
   justify-content: space-between;
 }
 
-#content {
-  margin-top: calc(var(--unit--vertical) * 2);
+button.toggle.open {
+  font-weight: bold;
 }
 
-.toggle-btn--left .more-less-icon {
+button.toggle.left::after {
   margin-left: var(--unit--horizontal);
 }
+button.toggle.left.close::after {
+  content: "+";
+}
+button.toggle.left.open::after {
+  content: "-";
+}
 
-.toggle-btn--right .more-less-icon {
+button.toggle.right::before {
   margin-right: var(--unit--horizontal);
 }
+button.toggle.right.close::before {
+  content: "+";
+}
+button.toggle.right.open::before {
+  content: "-";
+}
+
+.content {
+  margin-top: calc(var(--unit--vertical) * 2);
+}
 
 /* ================= ARTICLES LIST ================= */
 #articles {