ACM/hack-wpi-static
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: ACM:eb9d15a12b78a0093c976ecc52fb1957278b1d89
Branches Tags
ACM:master
ACM:update-timer
ACM:2025
ACM:2024-dev
ACM:2023-dev
ACM:mobirise-postproc
...
compare: ACM:957b5550263bce198acf5cbeb2fb4aa9e2a88292
Branches Tags
ACM:master
ACM:update-timer
ACM:2025
ACM:2024-dev
ACM:2023-dev
ACM:mobirise-postproc

3 commits
eb9d15a12b ... 957b555026

Author SHA1 Message Date
Nikita Ostapenko
957b555026 💄 fix(ui): improve responsive layout
Some checks are pending
Add MLH Banner / Add-MLH-Banner (push) Waiting to run
Details 
Adjust responsive grid and padding classes to improve mobile layout.
Add md:grid-cols-2 and mobile-first grid-cols-1, tweak gaps and
padding to align images and text across breakpoints. Center the
hero date heading, add md visibility where needed, and reorder
columns so content stacks in the intended order on small screens.
 2025-11-24 20:57:56 -05:00
Nikita Ostapenko
5d8ffb51fe ✨ feat(header): add responsive navigation 
Add a responsive header with a mobile hamburger menu and desktop
inline links. Adds an accessible toggle button (aria-label and
aria-expanded), a mobile dropdown hidden by default, and a small
script to toggle the menu and auto-close when resizing to desktop
widths. Uses Tailwind responsive utilities (md:hidden/hidden) to
preserve existing link targets and improve navigation on small
screens.
 2025-11-24 20:12:18 -05:00
Nikita Ostapenko
7e6d8ac2fc ✨ feat(nav): responsive header & mobile menu 
Add responsive header layout with a hamburger button for mobile and an
accessible dropdown menu for small screens. Desktop navigation links are
kept inline and hidden on mobile. Include JS to toggle the menu and to
close it on resize. Adjust countdown layout to stack on small screens
and display inline on medium+ screens.
 2025-11-24 20:11:58 -05:00
1 changed files with 74 additions and 45 deletions
Show stats Expand all files Collapse all files

119
index.html
View file

@ -90,41 +90,69 @@
<body onload="init()">
<script type="text/javascript" src="assets/countdown/script.js"></script>
<div class="flex text-3xl border-zinc-700 fixed w-screen border-b z-50 text-white game-font items-center justify-center flex-row py-3 pl-2 pr-40" style="background-color: #171717">
<a href="https://hack.wpi.edu" class="ml-4 ">
<div class="flex text-3xl border-zinc-700 fixed w-screen border-b z-50 text-white game-font items-center justify-center flex-row py-3 pl-2 pr-40" style="background-color: #171717">
<a href="https://hack.wpi.edu" class="ml-4">
<img
src="assets/images/goathacks2024goat3-96x106.png"
alt="Hack@WPI 2021"
style="height: 3.2rem"
/>
</a>
<div class="ml-auto mr-5">
<a
href="index.html#header12-2"
class="hover:text-red-500 duration-100"
>REGISTER</a>
</div>
<div class="mr-5">
<a
href="index.html#gallery6-1g"
class="hover:text-red-500 duration-100"
>SPONSORS</a>
</div>
<div class="mr-5">
<a
href="index.html#content17-y"
class="hover:text-red-500 duration-100"
>FAQ</a>
</div>
<div class="mr-5">
<a
href="index.html#contacts2-13"
class="hover:text-red-500 duration-100"
>CONTACT</a
>
</div>
</div>
<!-- MOBILE: hamburger button -->
<button id="hamburger" aria-label="Menu" aria-expanded="false" class="ml-auto mr-4 md:hidden inline-flex items-center p-2 rounded hover:bg-zinc-800 focus:outline-none">
<!-- simple hamburger icon -->
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<!-- DESKTOP: inline links (hidden on small screens) -->
<div class="hidden md:flex md:visible ml-auto mr-5 items-center">
<div class="mr-5">
<a href="index.html#header12-2" class="hover:text-red-500 duration-100">REGISTER</a>
</div>
<div class="mr-5">
<a href="index.html#gallery6-1g" class="hover:text-red-500 duration-100">SPONSORS</a>
</div>
<div class="mr-5">
<a href="index.html#content17-y" class="hover:text-red-500 duration-100">FAQ</a>
</div>
<div class="mr-5">
<a href="index.html#contacts2-13" class="hover:text-red-500 duration-100">CONTACT</a>
</div>
</div>
<!-- MOBILE: dropdown menu (hidden by default) -->
<div id="mobile-menu" class="md:hidden hidden absolute top-full left-0 right-0 bg-[#171717] border-b border-zinc-700 z-40">
<nav class="flex flex-col py-2">
<a href="index.html#header12-2" class="block px-4 py-3 hover:bg-zinc-900 hover:text-red-500">REGISTER</a>
<a href="index.html#gallery6-1g" class="block px-4 py-3 hover:bg-zinc-900 hover:text-red-500">SPONSORS</a>
<a href="index.html#content17-y" class="block px-4 py-3 hover:bg-zinc-900 hover:text-red-500">FAQ</a>
<a href="index.html#contacts2-13" class="block px-4 py-3 hover:bg-zinc-900 hover:text-red-500">CONTACT</a>
</nav>
</div>
<script>
(function () {
var btn = document.getElementById('hamburger');
var menu = document.getElementById('mobile-menu');
if (!btn || !menu) return;
btn.addEventListener('click', function () {
var isHidden = menu.classList.contains('hidden');
menu.classList.toggle('hidden', !isHidden ? true : false);
btn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
});
// close menu on resize to desktop
window.addEventListener('resize', function () {
if (window.innerWidth >= 768) {
menu.classList.add('hidden');
btn.setAttribute('aria-expanded', 'false');
}
});
})();
</script>
</div>
<section data-bs-version="5.1" class="" id="image3-1">
<div
class="h-screen px-20 align-items-center flex flex-row items-center justify-center"
@ -137,7 +165,7 @@
<div
class="mbr-section-btn mt-3 d-flex flex-column align-items-center"
>
<h2 class="text-white mt-4 game-font text-6xl">JAN 16th - 18th</h2>
<h2 class="text-white mt-4 game-font text-6xl text-center">JAN 16th - 18th</h2>
<a
class="btn btn-secondary display-4"
href="https://docs.google.com/forms/d/e/1FAIpQLSfD0vpWA2FSYyPD__L9QzhuSpbVGjQFsxIK0A-MBse4ZZPv2Q/viewform?usp=header"
@ -151,23 +179,23 @@
</section>
<section>
<div class="countdown has-animation fadeInUp text-white bg-[#171717] mb-20 game-font flex flex-row justify-center items-center" data-date="Jan 16 2026 18:00:00">
<div class="counter flex flex-col justify-center items-center mr-16">
<div class="countdown has-animation fadeInUp text-white bg-[#171717] mb-20 game-font flex justify-center items-center flex-col md:flex-row" data-date="Jan 16 2026 18:00:00">
<div class="counter flex flex-col justify-center items-center md:mr-16">
<span class="value text-6xl text-red-500" data-days>-</span>
<span class="suffix text-5xl">Days</span>
</div>
<div class="counter flex flex-col justify-center items-center mr-16">
<div class="counter flex flex-col justify-center items-center md:mr-16">
<span class="value text-6xl text-red-500" data-hours>-</span>
<span class="suffix text-5xl ">Hours</span>
</div>
<div class="counter flex flex-col justify-center items-center mr-16">
<div class="counter flex flex-col justify-center items-center md:mr-16">
<span class="value text-6xl text-red-500" data-minutes>-</span>
<span class="suffix text-5xl">Mins</span>
</div>
<div class="counter flex flex-col justify-center items-center mr-16">
<div class="counter flex flex-col justify-center items-center md:mr-16">
<span class="value text-6xl text-red-500" data-seconds>-</span>
<span class="suffix text-5xl">Secs</span>
</div>
@ -183,7 +211,7 @@
>
<div class="grid grid-cols-2 gap- mb-56">
<div class="grid md:grid-cols-2 grid-cols-1 pl-8 md:pl-0 gap-8 md:gap-0 mb-56 ">
<div class="pr-2">
<div class="image-container">
<img
@ -191,29 +219,30 @@
/>
</div>
</div>
<div class="flex items-end pl-32 pr-16 justify-center flex-col">
<div class="flex items-end pl-8 pr-4 md:pl-32 md:pr-16 justify-center flex-col">
<h1 class=" text-right text-red-500 text-7xl mb-4 game-font">BUILD ANYTHING.</h1>
<p class="text-right text-white text-3xl font-semibold roboto-mono-font">At GoatHacks, the sky is the limit with what you can create. We support all projects, virtual or physical, and will the resources you need to help you build your project.</p>
</div>
</div>
<div class="grid grid-cols-2 gap-2 my-56">
<div class="grid md:grid-cols-2 grid-cols-1 pl-8 md:pl-0 gap-8 md:gap-2 my-56">
<div class="flex items-start pr-32 pl-16 justify-center flex-col">
<h1 class=" text-left text-red-500 text-7xl mb-4 game-font">COLLABORATE.</h1>
<p class="text-left text-white text-3xl font-semibold roboto-mono-font">Find your people at GoatHacks. Come with a team, or find a new one at our event! (Or go solo, if that's your thing).</p>
</div>
<div class="pl-2">
<div class="pl-2 order-1 md:!order-2">
<div class="image-container-alt after::-left-24">
<img
src="assets/images/img-4527-886x591.jpg"
/>
</div>
</div>
<div class="flex items-start pr-8 pl-4 md:pr-32 md:pl-16 justify-center flex-col order-2 md:!order-1">
<h1 class=" text-left text-red-500 text-7xl mb-4 game-font">COLLABORATE.</h1>
<p class="text-left text-white text-3xl font-semibold roboto-mono-font">Find your people at GoatHacks. Come with a team, or find a new one at our event! (Or go solo, if that's your thing).</p>
</div>
</div>
<div class="grid grid-cols-2 gap- mb-56">
<div class="grid md:grid-cols-2 pr-4 pl-8 md:p-0 grid-cols-1 md:gap-0 gap-8 mb-56">
<div class="pr-2">
<div class="image-container">
<img
@ -221,7 +250,7 @@
/>
</div>
</div>
<div class="flex items-end pl-32 pr-16 justify-center flex-col">
<div class="flex items-end md:pl-32 md:pr-16 justify-center flex-col">
<h1 class=" text-right text-red-500 text-7xl mb-4 game-font">LEARN.</h1>
<p class="text-right text-white text-3xl font-semibold roboto-mono-font">Whether you're a seasoned hacker or starting for the first time, we've got you covered. We'll be hosting workshops and events from industry experts to help you learn new skills and reinforce existing ones.</p>
</div>