+
diff --git a/script.js b/script.js
index 2628ff8..103ac97 100644
--- a/script.js
+++ b/script.js
@@ -3,12 +3,15 @@ document.addEventListener('DOMContentLoaded', () => {
const navigationLinks = navBar.querySelectorAll('li');
const hamburgerCheckbox = navBar.querySelector('.peer');
+ if (hamburgerCheckbox.checked) {
+ document.body.classList.add('overflow-hidden');
+ }
+
// Hamburger navigation
navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', () => {
- document.body.classList.remove('overflow-hidden');
- hamburgerCheckbox.checked = false;
+ closeNavigationMenu();
});
});
@@ -39,6 +42,19 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
+ // Close navigation menu when the dark overlay is clicked on
+
+ const darkOverlay = navBar.querySelector('.bg-black');
+
+ darkOverlay.addEventListener('click', () => {
+ closeNavigationMenu();
+ });
+
+ function closeNavigationMenu() {
+ document.body.classList.remove('overflow-hidden');
+ hamburgerCheckbox.checked = false;
+ }
+
// particles.js
particlesJS.load('faq', 'assets/particlesjs-config.json');
diff --git a/styles.css b/styles.css
index b5db146..d161b02 100644
--- a/styles.css
+++ b/styles.css
@@ -16,7 +16,7 @@
/* 2 */
border-style: solid;
/* 2 */
- border-color: currentColor;
+ border-color: #e5e7eb;
/* 2 */
}
@@ -647,6 +647,10 @@ h1, h2, h3, h4, h5, h6 {
inset-inline-end: 0.25rem;
}
+.left-0 {
+ left: 0px;
+}
+
.right-0 {
right: 0px;
}
@@ -663,12 +667,8 @@ h1, h2, h3, h4, h5, h6 {
isolation: auto;
}
-.z-10 {
- z-index: 10;
-}
-
-.z-20 {
- z-index: 20;
+.z-30 {
+ z-index: 30;
}
.float-right {
@@ -842,6 +842,10 @@ h1, h2, h3, h4, h5, h6 {
width: 100%;
}
+.w-screen {
+ width: 100vw;
+}
+
.flex-none {
flex: none;
}
@@ -1858,6 +1862,11 @@ h1, h2, h3, h4, h5, h6 {
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
}
+.bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
.bg-deep-purple {
--tw-bg-opacity: 1;
background-color: rgb(27 0 44 / var(--tw-bg-opacity));
@@ -2024,6 +2033,11 @@ h1, h2, h3, h4, h5, h6 {
padding-right: 2.25rem;
}
+.py-16 {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+}
+
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
@@ -2043,10 +2057,6 @@ h1, h2, h3, h4, h5, h6 {
padding-bottom: 1.75rem;
}
-.pt-16 {
- padding-top: 4rem;
-}
-
.text-left {
text-align: left;
}
@@ -2217,6 +2227,11 @@ h1, h2, h3, h4, h5, h6 {
color: rgb(51 102 153 / .35);
}
+.text-blue-500 {
+ --tw-text-opacity: 1;
+ color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
.text-deep-purple {
--tw-text-opacity: 1;
color: rgb(27 0 44 / var(--tw-text-opacity));
@@ -2536,6 +2551,12 @@ h1, h2, h3, h4, h5, h6 {
transition-duration: 150ms;
}
+.transition-opacity {
+ transition-property: opacity;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2709,17 +2730,115 @@ canvas {
text-align: center;
}
+.peer:checked ~ .peer-checked\:pointer-events-auto {
+ pointer-events: auto;
+}
+
.peer:checked ~ .peer-checked\:translate-x-0 {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
+.peer:checked ~ .peer-checked\:opacity-50 {
+ opacity: 0.5;
+}
+
@media (min-width: 640px) {
.sm\:underline {
text-decoration-line: underline;
}
}
+@media (min-width: 768px) {
+ .md\:relative {
+ position: relative;
+ }
+
+ .md\:hidden {
+ display: none;
+ }
+
+ .md\:h-fit {
+ height: -moz-fit-content;
+ height: fit-content;
+ }
+
+ .md\:w-fit {
+ width: -moz-fit-content;
+ width: fit-content;
+ }
+
+ .md\:translate-x-0 {
+ --tw-translate-x: 0px;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+
+ .md\:flex-row {
+ flex-direction: row;
+ }
+
+ .md\:items-start {
+ align-items: flex-start;
+ }
+
+ .md\:gap-0 {
+ gap: 0px;
+ }
+
+ .md\:gap-16 {
+ gap: 4rem;
+ }
+
+ .md\:gap-2 {
+ gap: 0.5rem;
+ }
+
+ .md\:gap-2\.5 {
+ gap: 0.625rem;
+ }
+
+ .md\:bg-deep-purple {
+ --tw-bg-opacity: 1;
+ background-color: rgb(27 0 44 / var(--tw-bg-opacity));
+ }
+
+ .md\:p-0 {
+ padding: 0px;
+ }
+
+ .md\:px-12 {
+ padding-left: 3rem;
+ padding-right: 3rem;
+ }
+
+ .md\:text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+
+ .md\:transition-none {
+ transition-property: none;
+ }
+
+ @media not all and (min-width: 1024px) {
+ .md\:max-lg\:relative {
+ position: relative;
+ }
+
+ .md\:max-lg\:bottom-14 {
+ bottom: 3.5rem;
+ }
+
+ .md\:max-lg\:h-1\/2 {
+ height: 50%;
+ }
+
+ .md\:max-lg\:gap-8 {
+ gap: 2rem;
+ }
+ }
+}
+
@media (min-width: 1024px) {
.lg\:relative {
position: relative;
@@ -2749,37 +2868,14 @@ canvas {
display: flex;
}
- .lg\:hidden {
- display: none;
- }
-
- .lg\:h-fit {
- height: -moz-fit-content;
- height: fit-content;
- }
-
- .lg\:w-fit {
- width: -moz-fit-content;
- width: fit-content;
- }
-
.lg\:flex-\[0_0_454px\] {
flex: 0 0 454px;
}
- .lg\:translate-x-0 {
- --tw-translate-x: 0px;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- }
-
.lg\:flex-row {
flex-direction: row;
}
- .lg\:items-start {
- align-items: flex-start;
- }
-
.lg\:gap-0 {
gap: 0px;
}
@@ -2788,29 +2884,16 @@ canvas {
gap: 3.5rem;
}
- .lg\:gap-16 {
- gap: 4rem;
- }
-
- .lg\:gap-2 {
- gap: 0.5rem;
- }
-
- .lg\:gap-2\.5 {
- gap: 0.625rem;
- }
-
.lg\:gap-20 {
gap: 5rem;
}
- .lg\:self-start {
- align-self: flex-start;
+ .lg\:gap-16 {
+ gap: 4rem;
}
- .lg\:bg-deep-purple {
- --tw-bg-opacity: 1;
- background-color: rgb(27 0 44 / var(--tw-bg-opacity));
+ .lg\:self-start {
+ align-self: flex-start;
}
.lg\:bg-groundboi {
@@ -2892,10 +2975,6 @@ canvas {
font-size: 1.25rem;
line-height: 1.75rem;
}
-
- .lg\:transition-none {
- transition-property: none;
- }
}
@media (prefers-color-scheme: dark) {
diff --git a/tailwind.config.js b/tailwind.config.js
index 4df4899..9000550 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,13 +2,6 @@
module.exports = {
content: ["./**/*.{html,js}"],
theme: {
- colors: {
- 'lavender': '#e5ccff',
- 'purple': '#b673eb',
- 'deep-purple': '#1b002c',
- 'violet': '#5e38be',
- 'indigo': '#241d63'
- },
fontFamily: {
'sans': ['"Fivo Sans"', 'sans-serif'],
'display': ['"Katahdin Round"', 'sans-serif'],
@@ -20,11 +13,19 @@ module.exports = {
'plus-icon': "url('img/icons/plus.png')",
'groundboi': "url('img/sticker2-no_border.png')",
},
- backgroundPosition: {
- 'center-top': 'center top',
- 'center-bottom': 'center bottom',
+ extend: {
+ backgroundPosition: {
+ 'center-top': 'center top',
+ 'center-bottom': 'center bottom',
+ },
+ colors: {
+ 'lavender': '#e5ccff',
+ 'purple': '#b673eb',
+ 'deep-purple': '#1b002c',
+ 'violet': '#5e38be',
+ 'indigo': '#241d63'
+ },
},
- extend: {},
},
plugins: [],
};