+
diff --git a/script.js b/script.js
index edaa3c7..103ac97 100644
--- a/script.js
+++ b/script.js
@@ -11,8 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', () => {
- document.body.classList.remove('overflow-hidden');
- hamburgerCheckbox.checked = false;
+ closeNavigationMenu();
});
});
@@ -43,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 d3ab597..d161b02 100644
--- a/styles.css
+++ b/styles.css
@@ -2730,6 +2730,10 @@ 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));
@@ -2745,6 +2749,96 @@ canvas {
}
}
+@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;
@@ -2774,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;
}
@@ -2813,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 {
@@ -2917,10 +2975,6 @@ canvas {
font-size: 1.25rem;
line-height: 1.75rem;
}
-
- .lg\:transition-none {
- transition-property: none;
- }
}
@media (prefers-color-scheme: dark) {