Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: make sure the navbar links are linking to the right places #191

Merged
merged 7 commits into from
Mar 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions src/components/Navbar/NavItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@ interface NavItemsProps {
}

const links = [
{ title: 'About', href: 'about-section' },
{ title: 'Sponsors', href: 'sponsors-section' },
{ title: 'Partners', href: 'partners-section' },
{ title: 'FAQ', href: 'faq-section' },
{ title: 'The Team', href: 'team-section' },
{ title: 'Contact', href: 'contact-section' },
{ title: 'About', href: 'about-anchor' },
{ title: 'Sponsors', href: 'sponsors-anchor', offset: 200 },
{ title: 'Partners', href: 'partners-anchor', offset: 20 },
{ title: 'FAQ', href: 'faq-anchor', offset: 120 },
{ title: 'The Team', href: 'team-anchor' },
{ title: 'Contact', href: 'contact-anchor', offset: 500 },
];

const rowStyle = 'flex-row items-center';
const colStyle = 'flex-col lg:p-0';
const scrollPadding = -120;
const navbarHeightPx = 80;
const scrollPaddingPx = -navbarHeightPx; // navbarHeight + extra padding

const NavItems: React.FC<NavItemsProps> = ({ isHorizontal, handleClick }) => {
return (
Expand All @@ -29,10 +30,15 @@ const NavItems: React.FC<NavItemsProps> = ({ isHorizontal, handleClick }) => {
<li key={link.title}>
<Link
to={link.href}
smooth duration={500}
offset={scrollPadding}
smooth
duration={500}
offset={
link.offset
? -link.offset + scrollPaddingPx
: scrollPaddingPx
}
className="text-md w-full"
onClick={handleClick}
className="link-hover--two text-md"
>
{link.title}
</Link>
Expand Down
4 changes: 1 addition & 3 deletions src/components/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,7 @@ const Navbar = () => {
</div>

<div className="portal-btn hidden transition-all duration-500 ease-in-out lg:mr-32 lg:block">
<Button className="xl:px-6 xl:py-3">
Application Portal
</Button>
<Button className="xl:px-6 xl:py-3">Application Portal</Button>
</div>

{/* banner-holder: banner is out of flow, to prevent banner affect the desired flow, adding a placeholder banner holder when the screen is smaller */}
Expand Down
7 changes: 5 additions & 2 deletions src/components/sections/Contact.section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { SocialIcons } from '@components';

const ContactSection: React.FC = () => {
return (
<section className="contact-section relative z-10">
<section className="relative z-10">
<img src={TopBorder} className="z-0 w-full" />
<img
src={Hawk}
Expand All @@ -24,7 +24,10 @@ const ContactSection: React.FC = () => {

<div className="absolute inset-x-0 z-10 mx-auto max-w-4xl px-4 pt-10 sm:pt-16 md:px-8 md:pt-20 lg:px-12 lg:pt-32 xl:pt-32">
<div className="contact-info mb-2 text-center sm:mb-4 sm:text-left md:mb-6 lg:mb-12">
<h2 className="font-raleway text-2xl font-extrabold leading-tight tracking-wider text-[#32848C] sm:text-4xl md:text-5xl lg:text-8xl">
<h2
id="contact-anchor"
className="font-raleway text-2xl font-extrabold leading-tight tracking-wider text-[#32848C] sm:text-4xl md:text-5xl lg:text-8xl"
>
CONTACT US
</h2>
<p className="text-md lg:text-lg xl:mt-9">
Expand Down
10 changes: 5 additions & 5 deletions src/components/sections/HeroStats.section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ const HeroStatSection: React.FC = () => {
</p>
</div>
</div>
<div className="absolute left-1/2 top-2/3 w-2/3 -translate-x-1/2 -translate-y-1/2 transform text-[#1D4549] sm:top-[70%] md:top-3/4 ">
<h1
className="mb-5 text-center text-4.5xl uppercase drop-shadow-md lg:text-6.5xl xl:text-7.5xl"
id="about-section"
>
<div
id="about-anchor"
className="absolute left-1/2 top-2/3 w-2/3 -translate-x-1/2 -translate-y-1/2 transform pt-24 text-[#1D4549] sm:top-[70%] sm:pt-36 md:top-3/4 md:pt-36 "
>
<h1 className="mb-5 text-center text-4.5xl uppercase drop-shadow-md lg:text-6.5xl xl:text-7.5xl">
About Hawkhacks
</h1>
<div className="space-y-3 text-center text-[#1D4549] lg:space-y-10">
Expand Down
17 changes: 10 additions & 7 deletions src/components/sections/Sponsor.section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,7 @@ import {
const SponsorFAQSection = () => {
return (
<div>
<section
id="sponsors-section"
className="sponsor-section relative z-20"
>
<section className="sponsor-section relative z-20">
<img src={TopBorder} alt="Top Border" className="z-10 w-full" />
<img
src={Hawk}
Expand All @@ -48,7 +45,10 @@ const SponsorFAQSection = () => {
/>
<div className="absolute bottom-0 left-0 right-0 top-6 flex flex-col items-center space-y-6 pt-[110px] sm:space-y-12">
<div className="absolute left-1/2 top-6 -translate-x-1/2 transform">
<div className="font-raleway vs:text-[60px] text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]">
<div
id="sponsors-anchor"
className="font-raleway vs:text-[60px] text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]"
>
SPONSORS
</div>
</div>
Expand Down Expand Up @@ -152,8 +152,11 @@ const SponsorFAQSection = () => {
/>
</div>
</div>
<div className="mt-20" id="partners-section">
<div className="font-raleway vs:text-[60px] mt-6 text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]">
<div className="mt-20">
<div
className="font-raleway vs:text-[60px] mt-6 text-center text-[50px] font-black leading-[117px] tracking-widest text-[#404040] drop-shadow-lg sm:text-[80px]"
id="partners-anchor"
>
PARTNERS
</div>
<div className="flex flex-wrap items-center justify-center gap-3">
Expand Down
21 changes: 10 additions & 11 deletions src/components/sections/TeamFAQ.section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,16 @@ const Department: React.FC<DepartmentProps> = ({ title, members }) => {
);
};

// the naming is confusing...
// faq section first, but the meet the team banner is within faq section...
// not separate enough...
const TeamSection = () => {
return (
<div className="bg-brightUbe">
<section id="faq-section" className="stacked -mb-24 bg-cover">
<section className="stacked -mb-24 bg-cover">
<img src={FaqBackground} alt="" className="w-full" />
<div className="container mx-auto px-4">
<h2 className="mt-20 text-center font-bold text-white drop-shadow-md md:mt-32">
<h2
id="faq-anchor"
className="mt-20 text-center font-bold text-white drop-shadow-md md:mt-32"
>
FAQ
</h2>

Expand All @@ -62,12 +62,11 @@ const TeamSection = () => {
</div>
</section>

<section
id="team-section"
className="relative isolate p-4 md:p-8 lg:p-12 md:-translate-y-[10%] xl:-translate-y-[15%]"
>
{/* remove the overflow, and set negative offset works like a charm */}
<div className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32">
<section className="relative isolate p-4 md:-translate-y-[10%] md:p-8 lg:p-12 xl:-translate-y-[15%]">
<div
id="team-anchor"
className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32"
>
<img
className="mx-auto w-full max-w-fit sm:hidden"
src="src/assets/team/meet-the-team-banner.webp"
Expand Down
18 changes: 9 additions & 9 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ body {
font-variant-numeric: lining-nums;
font-feature-settings: 'lnum' 1;
font-weight: 600;
background-color: #FDDDB7;
background-color: #fdddb7;
}

@layer base {
Expand Down Expand Up @@ -38,7 +38,7 @@ body {
}

button {
@apply w-full rounded-lg border-black bg-[#2B6469] p-4 text-white shadow-[2px_2px_0px_0px_black] hover:bg-[#3F9098]/90 focus:bg-[#3F9098] focus:shadow-none transition-shadow;
@apply w-full rounded-lg border-black bg-[#2B6469] p-4 text-white shadow-[2px_2px_0px_0px_black] transition-shadow hover:bg-[#3F9098]/90 focus:bg-[#3F9098] focus:shadow-none;
}
}

Expand All @@ -55,21 +55,21 @@ body {

@layer utilities {
.stacked {
display: grid;
display: grid;
}

.stacked > * {
grid-column: 1 / -1;
grid-row: 1 / -1;
grid-column: 1 / -1;
grid-row: 1 / -1;
}

.stacked > .media {
z-index: -1;
width: 100%;
height: 100%;
z-index: -1;
width: 100%;
height: 100%;
}

.place-items-end-center {
place-items: end center;
place-items: end center;
}
}
Loading