Skip to content
This repository has been archived by the owner on Oct 22, 2024. It is now read-only.

Commit

Permalink
Merge pull request #14 from zenith-hacks/nav-footer
Browse files Browse the repository at this point in the history 
Clean up footer and header
  • Loading branch information
@hnasheralneam
hnasheralneam authored Aug 31, 2024
2 parents 9819beb + c3e9e53 commit 79ab589
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 65 deletions.
6 changes: 3 additions & 3 deletions .prettierrc.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
module.exports = {
printWidth: 140,
tabWidth: 2,
useTabs: true,
tabWidth: 3,
useTabs: false,
semi: true,
singleQuote: true,
singleQuote: false,
quoteProps: 'as-needed',
jsxSingleQuote: true,
trailingComma: 'none',
Expand Down
29 changes: 17 additions & 12 deletions src/layouts/components/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,27 @@
const today = new Date();
---

<footer class='container mt-8'>
<footer>
<div class='grid grid-cols-2 container mt-8 border-t-2'>
<div class='flex items-center justify-center'>
<h1 class="text-4xl font-['Roboto'] italic">Zenith 2025</h1>
</div>
<div class='text-neutral-700 mt-6'>
<p>HCB: <a class='hover:underline' href='https://hcb.hackclub.com/zenithhacks'>Zenith Hacks</a></p>
<p>GitHub: <a class='hover:underline' href='https://github.com/zenith-hacks'>@zenith-hacks</a></p>
<p>Slack: <a class='hover:underline' href='https://hackclub.slack.com/archives/C07HC6711PX'>#hack-zenith-2025</a></p>
<p>Email: <a class='hover:underline' href='mailto:team@zenithhacks.org'>team@zenithhacks.org</a></p>
<br />
<p><a class='hover:underline' href='https://withcabin.com/privacy/zenithhacks.org'>Privacy Policy</a></p>
<div class='text-sm text-zinc-500'>
<div>Copyright © {today.getFullYear()} Zenith.</div>
</div>
</div>
</div>
<div class='justify-center flex gap-4 py-8 prose text-sm text-center'>
<p class='max-w-[700px] underline'>
Zenith 2025 is fiscally sponsored by The Hack Foundation (d.b.a. Hack Club), a 501(c)(3) nonprofit (EIN: 81-2908499). Contributions
are tax-deductible to the fullest extent allowed by law.
</p>
</div>

<div class='py-4 border-t'>
<div class='md:flex text-sm text-zinc-500 max-lg:text-center prose justify-between'>
<div>Copyright © {today.getFullYear()} Zenith.</div>
<div>
<a href='mailto:team@zenithhacks.org'>team@zenithhacks.org</a> | <a href='https://withcabin.com/privacy/zenithhacks.org'
>Privacy Policy</a
>
</div>
</div>
</div>
</footer>
108 changes: 62 additions & 46 deletions src/layouts/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,12 @@ import { Image } from 'astro:assets';
const menu = [
{
link: 'https://hcb.hackclub.com/zenithhacks',
label: 'HCB',
target: '_blank'
link: '#about',
label: 'About'
},
{
link: 'https://github.com/zenith-hacks',
label: 'GitHub',
target: '_blank'
},
{
link: 'https://hackclub.slack.com/archives/C07HC6711PX',
label: 'Slack',
target: '_blank'
},
{
link: '/code-of-conduct',
label: "Code of Conduct",
link: '#sponsors',
label: 'Sponsors'
}
];
---
Expand All @@ -36,52 +25,79 @@ const menu = [
label: 'Team'
},
-->

<style>
@keyframes subtle-glow {
0%, 100% {
box-shadow: 0 0 5px 1px rgba(128, 0, 128, 0.3), 0 0 10px 2px rgba(255, 140, 0, 0.3), 0 0 15px 3px rgba(128, 0, 128, 0.2);
}
50% {
box-shadow: 0 0 8px 2px rgba(128, 0, 128, 0.5), 0 0 12px 4px rgba(255, 140, 0, 0.5), 0 0 18px 6px rgba(128, 0, 128, 0.3);
}
}
@keyframes subtle-glow {
0%,
100% {
box-shadow:
0 0 5px 1px rgba(128, 0, 128, 0.3),
0 0 10px 2px rgba(255, 140, 0, 0.3),
0 0 15px 3px rgba(128, 0, 128, 0.2);
}
50% {
box-shadow:
0 0 8px 2px rgba(128, 0, 128, 0.5),
0 0 12px 4px rgba(255, 140, 0, 0.5),
0 0 18px 6px rgba(128, 0, 128, 0.3);
}
}
html {
scroll-behavior: smooth;
}
</style>

<header
id='site-header'
class="flex bg-black pt-16 sm:pt-0 items-center w-full transition duration-300 z-[999] border-[var(--soft-border-color)]"
class='flex bg-black pt-16 sm:pt-0 items-center w-full transition duration-300 z-[999] border-[var(--soft-border-color)]'
>
<div class='container'>
<nav class='flex gap-4 items-center justify-between py-3'>
<h2 class='m-0'>
<a href='/' class='flex gap-4 items-center text-xl font-black uppercase'>
<Image src={Logo} alt='Zenith 2025' class="w-11 shadow-lg" loading="eager"/>
<Image src={Logo} alt='Zenith 2025' class='w-11 shadow-lg' />
</a>
</h2>
<div class='flex'>
<a class='bg-transparent text-white px-6 py-2 pt-[.7rem] rounded-full font-bold uppercase border border-zinc-700 animate-[subtle-glow_2s_infinite_alternate] hover:scale-105 transition-transform duration-300' href='https://hcb.hackclub.com/donations/start/zenithhacks' target='_blank'>
<a
class='bg-transparent text-white px-6 py-2 pt-[.7rem] rounded-full font-bold uppercase border border-zinc-700 animate-[subtle-glow_2s_infinite_alternate] hover:scale-105 transition-transform duration-300'
href='https://hcb.hackclub.com/donations/start/zenithhacks'
target='_blank'
>
Donate
</a>
</div>
</nav>
<div class='fixed top-3 w-auto max-w-full px-3 left-1/2 -translate-x-1/2 z-[999]'>
<div class="flex px-2.5 bg-black backdrop-blur-md leading-tight rounded-full border border-zinc-700">
<div class="px-2.5 text-sm">
<HeaderLink class="py-3 flex items-center" href="/" aria-label="Home">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
</HeaderLink>
</div>
{
menu.map((item) => (
<div class='px-2.5 text-sm'>
<HeaderLink class="py-3 flex items-center" href={item.link} {...item}>
{item.label}
</HeaderLink>
</div>
))
}
</div>
</div>
<div class='fixed top-3 w-auto max-w-full px-3 left-1/2 -translate-x-1/2 z-[999]'>
<div class='flex px-2.5 bg-black backdrop-blur-md leading-tight rounded-full border border-zinc-700'>
<div class='px-2.5 text-sm'>
<HeaderLink class='py-3 flex items-center' href='/' aria-label='Home'>
<svg
xmlns='http://www.w3.org/2000/svg'
width='20'
height='20'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
stroke-width='1.7'
stroke-linecap='round'
stroke-linejoin='round'
class='lucide lucide-house'
><path d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'></path><path
d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'
></path></svg
>
</HeaderLink>
</div>
{
menu.map((item) => (
<div class='px-2.5 text-sm'>
<HeaderLink class='py-3 flex items-center' href={item.link}>
{item.label}
</HeaderLink>
</div>
))
}
</div>
</div>
</div>
</header>
</header>
10 changes: 6 additions & 4 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { Image } from 'astro:assets';
</div>
</div>

<div class='bg-black text-white'>
<div id='about' class='bg-black text-white'>
<div class='grid grid-cols-1 md:grid-cols-2 min-h-[400px] p-6'>
<div class='flex items-center justify-center text-center p-6'>
<div>
Expand Down Expand Up @@ -72,7 +72,7 @@ import { Image } from 'astro:assets';

<hr />

<div class='bg-white text-center my-8'>
<div id='sponsors' class='bg-white text-center py-16'>
<h1 class="text-3xl text-black font-['Poppins']">💖 Our sponsors, who will make this event possible 💖</h1>
<style>
.sponsor {
Expand Down Expand Up @@ -117,8 +117,10 @@ import { Image } from 'astro:assets';
<hr />
<br />
<br />
<h2 class='text-2xl py-2'>✨ Individual Sponsors ✨</h2>
<p>John Tan-Aristy</p>
<div>
<h2 class='text-2xl py-2'>✨ Individual Sponsors ✨</h2>
<p>John Tan-Aristy</p>
</div>
</div>
</div>
</BaseLayout>

0 comments on commit 79ab589

Please sign in to comment.