Integrate particles.js into the FAQ and sponsoring sections

UR-dandyhacks · Oct 15, 2023 · b6d7df7 · b6d7df7
1 parent 601bc9d
commit b6d7df7
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -73,10 +73,10 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
     </div>
     <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
   </div>
-  <div id="faq" class="px-5 lg:bg-repeat-y lg:bg-center-top lg:bg-fireflies lg:px-0">
+  <div id="faq" class="relative px-5">
     <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
       <h2 class="text-5xl">FAQS</h2>
-      <div class="flex flex-col px-10 py-4 lg:py-0 gap-5 lg:px-0">
+      <div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
         <details>
           <summary>
             What is a hackathon?
@@ -213,6 +213,7 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
       <span>© 2023 DandyHacks</span>
     </div>
   </footer>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
   <script src="script.js"></script>
 </body>
 

diff --git a/main.css b/main.css
@@ -27,14 +27,26 @@
 
 @layer utilities {
   details {
-    @apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4;
+    @apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4 pointer-events-auto;
   }
 
   details summary {
-    @apply flex items-center justify-between text-2xl font-bold after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
+    @apply flex items-center justify-between text-2xl font-bold hover:cursor-pointer after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
   }
 
   details p {
     @apply text-2xl;
   }
+
+  canvas {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #faq > div > * {
+    position: relative;
+    z-index: 10;
+  }
 }
diff --git a/script.js b/script.js
@@ -38,4 +38,8 @@ document.addEventListener('DOMContentLoaded', () => {
             document.body.classList.add('overflow-hidden');
         }
     });
+
+    // particles.js
+
+    particlesJS.load('faq', 'assets/particlesjs-config.json');
 });
diff --git a/styles.css b/styles.css
@@ -639,6 +639,10 @@ h1, h2, h3, h4, h5, h6 {
   inset: -0.25rem;
 }
 
+.bottom-16 {
+  bottom: 4rem;
+}
+
 .end-1 {
   inset-inline-end: 0.25rem;
 }
@@ -651,30 +655,6 @@ h1, h2, h3, h4, h5, h6 {
   top: 0px;
 }
 
-.-top-\[150px\] {
-  top: -150px;
-}
-
-.-top-\[10px\] {
-  top: -10px;
-}
-
-.bottom-\[150px\] {
-  bottom: 150px;
-}
-
-.bottom-full {
-  bottom: 100%;
-}
-
-.bottom-0 {
-  bottom: 0px;
-}
-
-.bottom-16 {
-  bottom: 4rem;
-}
-
 .isolate {
   isolation: isolate;
 }
@@ -2580,6 +2560,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 details {
+  pointer-events: auto;
   border-radius: 30px;
   --tw-bg-opacity: 1;
   background-color: rgb(182 115 235 / var(--tw-bg-opacity));
@@ -2627,11 +2608,27 @@ details summary::after {
   content: var(--tw-content);
 }
 
+details summary:hover {
+  cursor: pointer;
+}
+
 details p {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
+canvas {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#faq > div > * {
+  position: relative;
+  z-index: 10;
+}
+
 @font-face {
   font-family: "Katahdin Round";
 
@@ -2816,10 +2813,6 @@ details p {
     background-color: rgb(27 0 44 / var(--tw-bg-opacity));
   }
 
-  .lg\:bg-fireflies {
-    background-image: url('img/website-bg2.png');
-  }
-
   .lg\:bg-groundboi {
     background-image: url('img/sticker2-no_border.png');
   }
@@ -2836,10 +2829,6 @@ details p {
     background-repeat: no-repeat;
   }
 
-  .lg\:bg-repeat-y {
-    background-repeat: repeat-y;
-  }
-
   .lg\:p-0 {
     padding: 0px;
   }