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

✨ feat(nav): responsive header & mobile menu

Browse source 
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.
This commit is contained in:
Nikita Ostapenko 2025-11-24 20:10:11 -05:00
parent eb9d15a12b
commit 7e6d8ac2fc
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -151,23 +151,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>