Fixed navbar issues

This commit is contained in:
chark1es 2025-01-27 10:21:53 -08:00
parent 1a44c0fa0a
commit 43fb2f37d8
4 changed files with 157 additions and 160 deletions

View file

@ -4,16 +4,12 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
import pages from "../../data/pages.json"; import pages from "../../data/pages.json";
--- ---
<div class="md:w-full w-fit fixed z-10"> <div class="w-full">
<div <div
class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]" class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]"
> >
<a href="/" class="hover:opacity-60 duration-300 hidden md:flex"> <a href="/" class="hover:opacity-60 duration-300 hidden md:flex">
<Image <Image class="w-[15vw]" src={whiteLogoHorizontal} alt="IEEE UCSD Logo" />
class="w-[15vw]"
src={whiteLogoHorizontal}
alt="IEEE UCSD Logo"
/>
</a> </a>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
@ -75,9 +71,7 @@ import pages from "../../data/pages.json";
id="mobile-menu" id="mobile-menu"
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full" class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
> >
<div <div class="flex flex-col items-center h-[70vh] justify-evenly bg-black">
class="flex flex-col items-center h-[70vh] justify-evenly bg-black"
>
{ {
pages.map((page) => ( pages.map((page) => (
<a <a

View file

@ -1,14 +1,24 @@
<div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full"> <div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
<div class="w-2/5"> <div class="w-2/5">
<p data-inview class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right"> <p
data-inview
class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right"
>
02 02
</p> </p>
<p data-inview class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"> <p
data-inview
class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"
>
2nd Largest in the US? 2nd Largest in the US?
</p> </p>
</div> </div>
<p data-inview class="animate-ease-in-out text-white text-[2vw] md:text-[1.3vw] in-view:animate-fade-left w-3/5 font-light"> <p
The community of engineers at IEEE @ UCSD has consistently been one of the largest in the country. In 2021 and 2022, we won the 2nd Largest Student Branch Award in the US and we strive to win it again in the coming year. data-inview
class="animate-ease-in-out text-white text-[2vw] md:text-[1.3vw] in-view:animate-fade-left w-3/5 font-light"
>
The community of engineers at IEEE @ UCSD has consistently been one of the
largest in the country. In 2021 and 2022, we won the 2nd Largest Student
Branch Award in the US and we strive to win it again in the coming year.
</p> </p>
</div > </div>

View file

@ -7,9 +7,7 @@ import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md"; import { MdEmail } from "react-icons/md";
--- ---
<div <div class="w-full flex justify-between space-x-2">
class="w-full flex justify-between xl:pt-[12vh] lg:pt-[8vh] md:pt-[6vh] pt-[12vw] space-x-2"
>
<div <div
class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]" class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
> >

View file

@ -5,7 +5,7 @@ import InView from "../components/core/InView.astro";
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="w-full h-full m-0 bg-ieee-black">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
@ -14,20 +14,15 @@ import InView from "../components/core/InView.astro";
<title>Astro Basics</title> <title>Astro Basics</title>
</head> </head>
<InView /> <InView />
<body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip"> <body class="w-full h-full m-0 bg-ieee-black">
<div class="text-white min-h-screen">
<header class="sticky top-0 w-full z-[999]">
<Navbar /> <Navbar />
<main class="w-[95%]"> </header>
<main class="w-[95%] mx-auto">
<slot /> <slot />
</main> </main>
<Footer /> <Footer />
</div>
</body> </body>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</html> </html>