From 601bc9d2e10f9fd8438829789535d9933cdde34e Mon Sep 17 00:00:00 2001 From: Zach Date: Sun, 15 Oct 2023 15:32:26 -0400 Subject: [PATCH 1/2] Add particles.js config --- assets/particlesjs-config.json | 110 +++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 assets/particlesjs-config.json diff --git a/assets/particlesjs-config.json b/assets/particlesjs-config.json new file mode 100644 index 0000000..d7f82bc --- /dev/null +++ b/assets/particlesjs-config.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 50, + "density": { + "enable": true, + "value_area": 500 + } + }, + "color": { + "value": "#fed936" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 1, + "random": true, + "anim": { + "enable": true, + "speed": 1, + "opacity_min": 0.1, + "sync": true + } + }, + "size": { + "value": 8, + "random": true, + "anim": { + "enable": true, + "speed": 4.794898228285104, + "size_min": 0.1, + "sync": true + } + }, + "line_linked": { + "enable": false, + "distance": 150, + "color": "#ffffff", + "opacity": 0.4, + "width": 1 + }, + "move": { + "enable": true, + "speed": 3, + "direction": "none", + "random": true, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": true, + "mode": "repulse" + }, + "onclick": { + "enable": false, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +} \ No newline at end of file From b6d7df7c3bbc3fdec3c2e99d13d1f9717f8214da Mon Sep 17 00:00:00 2001 From: Zach Date: Sun, 15 Oct 2023 15:33:00 -0400 Subject: [PATCH 2/2] Integrate particles.js into the FAQ and sponsoring sections --- index.html | 5 +++-- main.css | 16 ++++++++++++++-- script.js | 4 ++++ styles.css | 53 +++++++++++++++++++++-------------------------------- 4 files changed, 42 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index c8ed4f5..e2c88cb 100644 --- a/index.html +++ b/index.html @@ -73,10 +73,10 @@

What is DandyHacks?

-
+

FAQS

-
+
What is a hackathon? @@ -213,6 +213,7 @@

Why sponsor?

© 2023 DandyHacks
+ diff --git a/main.css b/main.css index 42c166b..ba43545 100644 --- 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 index 7ca6628..2628ff8 100644 --- 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 index 033a706..b5db146 100644 --- 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; }