Skip to content

Commit

Permalink
Merge pull request #29 from UR-dandyhacks/dev
Browse files Browse the repository at this point in the history 
Responsiveness, and other fixes
  • Loading branch information
@cszach
cszach authored Oct 15, 2023
2 parents 122ecc8 + e8dd37b commit a854a93
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 79 deletions.
24 changes: 13 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@
</head>

<body class="font-sans text-lavender bg-deep-purple">
<nav class="fixed z-10 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform ease-in-out lg:px-12 bg-deep-purple translate-y-0">
<h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
<nav class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform md:px-12 bg-deep-purple translate-y-0">
<h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
<div>
<input class="absolute z-20 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
<img class="lg:hidden" src="img/icons/hamburger.png" />
<ul class="fixed top-0 right-0 z-10 flex flex-col h-screen pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
<input class="absolute w-8 h-8 opacity-0 peer md:hidden" type="checkbox" />
<div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 md:hidden"></div>
<img class="md:hidden" src="img/icons/hamburger.png" />
<ul class="fixed top-0 right-0 z-30 flex flex-col justify-end h-screen py-16 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
<li class="text-right"><a href="#about">About</a></li>
<li class="text-right"><a href="#faq">FAQ</a></li>
<li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
Expand All @@ -28,22 +29,23 @@ <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
right: 50px;
top: 100%;
width: 10%;
z-index: 20;
"
href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2024-season&utm_content=white"
target="_blank"><img
src="https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-white.svg"
alt="Major League Hacking 2024 Hackathon Season" style="width: 100%" /></a>
</nav>
<div class="flex flex-col items-center justify-center h-screen bg-no-repeat bg-cover bg-enchanted-forest bg-center-bottom">
<div class="flex flex-col gap-6 lg:gap-0">
<div class="flex flex-col lg:flex-row items-center gap-6 lg:gap-2.5">
<img src="img/logo.png" alt="The logo of DandyHacks 2023" />
<div class="flex flex-col items-center lg:items-start gap-4">
<div id="hero" class="flex flex-col items-center justify-center h-screen bg-no-repeat bg-cover bg-enchanted-forest bg-center-bottom">
<div class="flex flex-col gap-6 md:gap-0">
<div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-2.5">
<img class="md:max-lg:h-1/2" src="img/logo.png" alt="The logo of DandyHacks 2023" />
<div class="flex flex-col items-center md:items-start gap-4">
<h1 class="text-4xl lg:text-6xl">DandyHacks &OpenCurlyQuote;23</h1>
<h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
</div>
</div>
<div class="flex flex-col items-center justify-center font-bold lg:flex-row gap-7">
<div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
</div>
Expand Down
20 changes: 18 additions & 2 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});

Expand Down Expand Up @@ -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');
Expand Down
189 changes: 134 additions & 55 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
/* 2 */
border-style: solid;
/* 2 */
border-color: currentColor;
border-color: #e5e7eb;
/* 2 */
}

Expand Down Expand Up @@ -647,6 +647,10 @@ h1, h2, h3, h4, h5, h6 {
inset-inline-end: 0.25rem;
}

.left-0 {
left: 0px;
}

.right-0 {
right: 0px;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -842,6 +842,10 @@ h1, h2, h3, h4, h5, h6 {
width: 100%;
}

.w-screen {
width: 100vw;
}

.flex-none {
flex: none;
}
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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;
Expand All @@ -2043,10 +2057,6 @@ h1, h2, h3, h4, h5, h6 {
padding-bottom: 1.75rem;
}

.pt-16 {
padding-top: 4rem;
}

.text-left {
text-align: left;
}
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -2892,10 +2975,6 @@ canvas {
font-size: 1.25rem;
line-height: 1.75rem;
}

.lg\:transition-none {
transition-property: none;
}
}

@media (prefers-color-scheme: dark) {
Expand Down
Loading

0 comments on commit a854a93

Please sign in to comment.