Skip to content

Commit 1e53f05

Browse files
nikoshellnikoshell
authored
New sticky navbar and footer. (#1204)
New sticky navbar. New links structure. New footer. Close #1093.
1 parent 1273899 commit 1e53f05

32 files changed

+674
-2278
lines changed

‎public/EuroPython2025_logo_small.png‎

7.88 KB
Loading

‎public/eps-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Footer.astro‎

Lines changed: 116 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,127 @@
11
---
2-
import links from "../data/links.json";
3-
import { EPSLogo } from "./logo/eps-logo";
2+
import SocialLinks from "@components/SocialLinks.astro";
3+
import links from "@data/links.json";
4+
import EPSLogo from "../../public/eps-logo.svg";
45
56
const buildTimestamp = __TIMESTAMP__;
67
const gitVersion = __GIT_VERSION__;
78
---
89

9-
<div
10-
class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 lg:grid grid-cols-2 px-6 gap-60"
11-
>
12-
<div>
13-
<nav class="mb-12">
14-
<h6 class="font-bold text-xl mb-6">Quicklinks</h6>
15-
<ul>
16-
{
17-
links.footer.map((item) => (
18-
<li class="list-none">
19-
<a
20-
href={item.path}
21-
class="block font-bold text-4xl md:text-5xl mb-4 hover:text-primary-hover"
22-
>
23-
{item.name}
24-
{item.path.startsWith("http") ? <span> ↗</span> : null}
25-
</a>
26-
</li>
27-
))
28-
}
29-
</ul>
30-
</nav>
31-
</div>
10+
<div class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 px-6">
11+
<div class="links grid grid-cols-2 lg:flex flex-wrap gap-8 justify-between pb-8">
12+
{
13+
links.footer.map((section) => (
14+
<div class="md:w-auto mb-8 md:mb-0 text-start">
15+
<h3 class="font-bold text-lg mb-4">{section.name}</h3>
16+
{section.items ? (
17+
<ul class="space-y-2">
18+
{section.items.map((item) => (
19+
<li>
20+
<a
21+
href={item.path}
22+
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
23+
>
24+
{item.name}
25+
{item.path.startsWith("http") && (
26+
<span class="inline-block ml-1">↗</span>
27+
)}
28+
</a>
29+
</li>
30+
))}
31+
</ul>
32+
) : (
33+
<a
34+
href={section["path"]}
35+
class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
36+
>
37+
{section.name}
38+
{section["path"].startsWith("http") && (
39+
<span class="inline-block ml-1">↗</span>
40+
)}
41+
</a>
42+
)}
43+
</div>
44+
))
45+
}
46+
</div>
3247

33-
<div
34-
class="flex flex-col lg:flex-row self-center gap-8 lg:gap-12 justify-end"
35-
>
36-
<div>
37-
<EPSLogo className="max-w-[100px] lg:max-w-[200px] h-auto w-full" />
48+
<div class="flex flex-wrap gap-2 justify-between">
49+
<div class="w-full py-2 border-t border-b border-white/10">
50+
<div
51+
class="flex flex-col lg:flex-row self-center gap-2 lg:gap-12 justify-end"
52+
>
53+
<div
54+
class="flex flex-col text-white/40 w-full lg:w-2/3 p-5 items-center text-center"
55+
>
56+
<p>
57+
Excited about our mission? Want to collaborate or contribute? Let's
58+
connect! We're open to partnership opportunities and would love to
59+
hear your ideas.
60+
<a class="text-white" href="mailto:[email protected]"
61+
>[email protected]</a
62+
>
63+
</p>
64+
</div>
65+
<div
66+
class="flex text-white/40 w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
67+
>
68+
<div>
69+
<EPSLogo width="90" height="90" class="w-[90px] mr-4 h-auto" />
70+
</div>
71+
<div>
72+
<address class="not-italic">
73+
EuroPython Society (EPS)
74+
<br />Ramnebacken 45
75+
<br />
76+
424 38 Agnesberg
77+
<br />
78+
Sweden
79+
</address>
80+
</div>
81+
</div>
3882
</div>
39-
<div>
40-
<address class="not-italic mb-4">
41-
EuroPython Society (EPS)
42-
<br />Ramnebacken 45
43-
<br />
44-
424 38 Agnesberg
45-
<br />
46-
Sweden
47-
</address>
83+
</div>
4884

49-
<p class="mb-4">
50-
<a
51-
class="underline whitespace-nowrap"
52-
href="https://europython-society.org"
53-
>
54-
europython-society.org <span> ↗</span>
55-
</a>
56-
<a
57-
class="underline whitespace-nowrap"
58-
href="https://blog.europython.eu"
59-
>
60-
blog.europython.eu <span> ↗</span>
61-
</a>
62-
<br />
63-
<a
64-
class="underline whitespace-nowrap"
65-
href="https://fosstodon.org/@europython"
66-
>
67-
fosstodon.org/@europython <span> ↗</span>
68-
</a>
69-
<br />
70-
<a
71-
class="underline whitespace-nowrap"
72-
href="https://linkedin.com/company/europython"
73-
>
74-
linkedin.com/company/europython <span> ↗</span>
75-
</a>
76-
<br />
77-
<a
78-
class="underline whitespace-nowrap"
79-
href="https://bsky.app/profile/europython.eu"
80-
>
81-
bsky.app/profile/europython.eu <span> ↗</span>
82-
</a>
83-
<br />
84-
<a
85-
class="underline whitespace-nowrap"
86-
href="https://github.com/europython"
87-
>
88-
github.com/europython <span> ↗</span>
89-
</a>
90-
<br />
91-
<a
92-
class="underline whitespace-nowrap"
93-
href="https://twitter.com/europython"
94-
>
95-
twitter.com/europython <span> ↗</span>
96-
</a>
97-
</p>
98-
<p class="mb-4" style="color: rgba(255, 255, 255, 0.4)">
99-
version: {gitVersion} @ {buildTimestamp}
100-
</p>
85+
<div class="flex w-full lg:flex-row flex-col-reverse justify-between">
86+
<div class="terms py-2 text-center ">
87+
{
88+
links.terms.map((item) => (
89+
<a
90+
href={item.path}
91+
class="text-gray-700 hover:text-primary-hover transition-colors duration-200 mx-2"
92+
>
93+
{item.name}
94+
{item.path.startsWith("http") && (
95+
<span class="inline-block">↗</span>
96+
)}
97+
</a>
98+
))
99+
}
101100
</div>
101+
102+
{
103+
links && links["socials"] && (
104+
<SocialLinks
105+
socials={links["socials"]}
106+
variant="white"
107+
class="opacity-40 pb-4"
108+
/>
109+
)
110+
}
102111
</div>
103-
</footer>
112+
</div>
113+
114+
<p class="mb-16 text-white/10 text-center">
115+
version: {gitVersion} @ {buildTimestamp}
116+
</p>
117+
</div>
118+
119+
<style>
120+
.links > div:first-child {
121+
font-size: 1.8rem;
122+
}
123+
.terms {
124+
font-size: 0.8rem;
125+
opacity: 0.4;
126+
}
127+
</style>

‎src/components/Header.astro‎

Lines changed: 57 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,72 @@
11
---
2-
import { NavItems } from "@components/nav-items";
2+
import NavItems from "@components/NavItems.astro";
33
import HeaderActions from "@components/header/header-actions.astro";
44
import HeaderLogo from "@components/header/header-logo.astro";
55
import Search from "@components/Search.astro";
66
77
import links from "../data/links.json";
88
---
99

10-
<header class="p-6 flex items-center justify-between relative z-40">
11-
<input
12-
type="checkbox"
13-
name="mobile-controls"
14-
id="nav_toggle"
15-
class="hidden peer"
16-
aria-hidden="true"
17-
/>
10+
<section
11+
id="navbar"
12+
class="fixed top-0 z-50 transition-transform duration-300 transform-gpu w-full"
13+
>
14+
<div
15+
class="container max-w-[1150px] mx-auto px-6 py-2 mt-1 lg:p-2 lg:mt-6 px-2 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
16+
>
17+
<input
18+
type="checkbox"
19+
name="mobile-controls"
20+
id="nav_toggle"
21+
class="hidden peer"
22+
aria-hidden="true"
23+
/>
1824

19-
<HeaderLogo />
25+
<HeaderLogo />
2026

21-
<nav class="hidden xl:block">
22-
<NavItems items={links.header} />
23-
</nav>
27+
<nav class="hidden xl:block">
28+
<NavItems items={links.header} />
29+
</nav>
2430

25-
<HeaderActions />
31+
<HeaderActions />
2632

27-
<div
28-
class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 p-6"
29-
>
30-
<div class="flex items-center justify-between">
31-
<HeaderLogo />
32-
<HeaderActions mobile />
33-
</div>
33+
<div
34+
class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 px-6 py-2"
35+
>
36+
<div class="flex items-center justify-between">
37+
<HeaderLogo />
38+
<HeaderActions mobile />
39+
</div>
3440

35-
<nav class="mt-8">
36-
<NavItems
37-
items={[
38-
{
39-
name: "Code of Conduct",
40-
path: "https://www.europython-society.org/coc/",
41-
},
42-
/*
43-
{
44-
name: "Live 📺",
45-
path: "/live",
46-
},
47-
*/
48-
{
49-
name: "Recordings",
50-
path: "https://www.youtube.com/playlist?list=PL8uoeex94UhE1CbtkDK4hevp2lBif57Nq",
51-
},
52-
...links.header,
53-
]}
54-
/>
55-
</nav>
41+
<nav class="mt-8">
42+
<NavItems items={[...links.header]} />
43+
</nav>
44+
</div>
5645
</div>
46+
</section>
5747
<Search />
58-
</header>
48+
49+
<script>
50+
let prevScrollPos = window.pageYOffset;
51+
const navbar = document.getElementById("navbar") as HTMLElement;
52+
53+
window.addEventListener("scroll", () => {
54+
let currentScrollPos = window.pageYOffset;
55+
if (prevScrollPos > currentScrollPos) {
56+
navbar.style.transform = "translateY(0)";
57+
} else {
58+
navbar.style.transform = "translateY(-100%)";
59+
}
60+
prevScrollPos = currentScrollPos;
61+
});
62+
63+
navbar.addEventListener("focusin", () => {
64+
navbar.style.transform = "translateY(0)";
65+
});
66+
67+
navbar.addEventListener("focusout", () => {
68+
if (window.pageYOffset > 100) {
69+
navbar.style.transform = "translateY(-100%)";
70+
}
71+
});
72+
</script>

0 commit comments

Comments
 (0)