Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

Fixed navbar issues

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/core/Navbar.astro
View file

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

22
src/components/main_page/Divider.astro
View file

@ -1,14 +1,24 @@
<div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
<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
</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?
</p>
</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">
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
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>
</div >
</div>

4
src/components/main_page/Landing.astro
View file

@ -7,9 +7,7 @@ import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md";
---
<div
class="w-full flex justify-between xl:pt-[12vh] lg:pt-[8vh] md:pt-[6vh] pt-[12vw] space-x-2"
>
<div class="w-full flex justify-between space-x-2">
<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]"
>

19
src/layouts/Layout.astro
View file

@ -5,7 +5,7 @@ import InView from "../components/core/InView.astro";
---
<!doctype html>
<html lang="en">
<html lang="en" class="w-full h-full m-0 bg-ieee-black">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
@ -14,20 +14,15 @@ import InView from "../components/core/InView.astro";
<title>Astro Basics</title>
</head>
<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 />
<main class="w-[95%]">
</header>
<main class="w-[95%] mx-auto">
<slot />
</main>
<Footer />
</div>
</body>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</html>