New sticky navbar and footer.

src/components/Footer.astro

@@ -1,103 +1,127 @@
 ---
-import links from "../data/links.json";
-import { EPSLogo } from "./logo/eps-logo";
+import SocialLinks from "@components/SocialLinks.astro";
+import links from "@data/links.json";
+import EPSLogo from "../../public/eps-logo.svg";
 
 const buildTimestamp = __TIMESTAMP__;
 const gitVersion = __GIT_VERSION__;
 ---
 
-  <div
-    class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 lg:grid grid-cols-2 px-6 gap-60"
-  >
-    <div>
-      <nav class="mb-12">
-        <h6 class="font-bold text-xl mb-6">Quicklinks</h6>
-        <ul>
-          {
-            links.footer.map((item) => (
-              <li class="list-none">
-                <a
-                  href={item.path}
-                  class="block font-bold text-4xl md:text-5xl mb-4 hover:text-primary-hover"
-                >
-                  {item.name}
-                  {item.path.startsWith("http") ? <span> ↗</span> : null}
-                </a>
-              </li>
-            ))
-          }
-        </ul>
-      </nav>
-    </div>
+<div class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 px-6">
+  <div class="links grid grid-cols-2 lg:flex flex-wrap gap-8 justify-between pb-8">
+    {
+      links.footer.map((section) => (
+        <div class="md:w-auto mb-8 md:mb-0 text-start">
+          <h3 class="font-bold text-lg mb-4">{section.name}</h3>
+          {section.items ? (
+            <ul class="space-y-2">
+              {section.items.map((item) => (
+                <li>
+                  <a
+                    href={item.path}
+                    class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
+                  >
+                    {item.name}
+                    {item.path.startsWith("http") && (
+                      <span class="inline-block ml-1">↗</span>
+                    )}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <a
+              href={section["path"]}
+              class="text-gray-700 hover:text-primary-hover transition-colors duration-200"
+            >
+              {section.name}
+              {section["path"].startsWith("http") && (
+                <span class="inline-block ml-1">↗</span>
+              )}
+            </a>
+          )}
+        </div>
+      ))
+    }
+  </div>
 
-    <div
-      class="flex flex-col lg:flex-row self-center gap-8 lg:gap-12 justify-end"
-    >
-      <div>
-        <EPSLogo className="max-w-[100px] lg:max-w-[200px] h-auto w-full" />
+  <div class="flex flex-wrap gap-2 justify-between">
+    <div class="w-full py-2 border-t border-b border-white/10">
+      <div
+        class="flex flex-col lg:flex-row self-center gap-2 lg:gap-12 justify-end"
+      >
+        <div
+          class="flex flex-col text-white/40 w-full lg:w-2/3 p-5 items-center text-center"
+        >
+          <p>
+            Excited about our mission? Want to collaborate or contribute? Let's
+            connect! We're open to partnership opportunities and would love to
+            hear your ideas.
+            <a class="text-white" href="mailto:[email protected]"
+              >[email protected]</a
+            >
+          </p>
+        </div>
+        <div
+          class="flex text-white/40 w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
+        >
+          <div>
+            <EPSLogo width="90" height="90" class="w-[90px] mr-4 h-auto" />
+          </div>
+          <div>
+            <address class="not-italic">
+              EuroPython Society (EPS)
+              <br />Ramnebacken 45
+              <br />
+              424 38 Agnesberg
+              <br />
+              Sweden
+            </address>
+          </div>
+        </div>
       </div>
-      <div>
-        <address class="not-italic mb-4">
-          EuroPython Society (EPS)
-          <br />Ramnebacken 45
-          <br />
-          424 38 Agnesberg
-          <br />
-          Sweden
-        </address>
+    </div>
 
-        <p class="mb-4">
-          <a
-            class="underline whitespace-nowrap"
-            href="https://europython-society.org"
-          >
-            europython-society.org <span> ↗</span>
-          </a>
-          <a
-            class="underline whitespace-nowrap"
-            href="https://blog.europython.eu"
-          >
-            blog.europython.eu <span> ↗</span>
-          </a>
-          <br />
-          <a
-            class="underline whitespace-nowrap"
-            href="https://fosstodon.org/@europython"
-          >
-            fosstodon.org/@europython <span> ↗</span>
-          </a>
-          <br />
-          <a
-            class="underline whitespace-nowrap"
-            href="https://linkedin.com/company/europython"
-          >
-            linkedin.com/company/europython <span> ↗</span>
-          </a>
-          <br />
-          <a
-            class="underline whitespace-nowrap"
-            href="https://bsky.app/profile/europython.eu"
-          >
-            bsky.app/profile/europython.eu <span> ↗</span>
-          </a>
-          <br />
-          <a
-            class="underline whitespace-nowrap"
-            href="https://github.com/europython"
-          >
-            github.com/europython <span> ↗</span>
-          </a>
-          <br />
-          <a
-            class="underline whitespace-nowrap"
-            href="https://twitter.com/europython"
-          >
-            twitter.com/europython <span> ↗</span>
-          </a>
-        </p>
-        <p class="mb-4" style="color: rgba(255, 255, 255, 0.4)">
-        version: {gitVersion} @ {buildTimestamp}
-        </p>
+    <div class="flex w-full lg:flex-row flex-col-reverse justify-between">
+      <div class="terms py-2 text-center ">
+        {
+          links.terms.map((item) => (
+            <a
+              href={item.path}
+              class="text-gray-700 hover:text-primary-hover transition-colors duration-200 mx-2"
+            >
+              {item.name}
+              {item.path.startsWith("http") && (
+                <span class="inline-block">↗</span>
+              )}
+            </a>
+          ))
+        }
       </div>
+
+      {
+        links && links["socials"] && (
+          <SocialLinks
+            socials={links["socials"]}
+            variant="white"
+            class="opacity-40 pb-4"
+          />
+        )
+      }
     </div>
-  </footer>
+  </div>
+
+  <p class="mb-16 text-white/10 text-center">
+    version: {gitVersion} @ {buildTimestamp}
+  </p>
+</div>
+
+<style>
+  .links > div:first-child {
+    font-size: 1.8rem;
+  }
+  .terms {
+    font-size: 0.8rem;
+    opacity: 0.4;
+  }
+</style>

src/components/Header.astro

@@ -1,58 +1,72 @@
 ---
-import { NavItems } from "@components/nav-items";
+import NavItems from "@components/NavItems.astro";
 import HeaderActions from "@components/header/header-actions.astro";
 import HeaderLogo from "@components/header/header-logo.astro";
 import Search from "@components/Search.astro";
 
 import links from "../data/links.json";
 ---
 
-<header class="p-6 flex items-center justify-between relative z-40">
-  <input
-    type="checkbox"
-    name="mobile-controls"
-    id="nav_toggle"
-    class="hidden peer"
-    aria-hidden="true"
-  />
+<section
+  id="navbar"
+  class="fixed top-0 z-50 transition-transform duration-300 transform-gpu w-full"
+>
+  <div
+    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"
+  >
+    <input
+      type="checkbox"
+      name="mobile-controls"
+      id="nav_toggle"
+      class="hidden peer"
+      aria-hidden="true"
+    />
 
-  <HeaderLogo />
+    <HeaderLogo />
 
-  <nav class="hidden xl:block">
-    <NavItems items={links.header} />
-  </nav>
+    <nav class="hidden xl:block">
+      <NavItems items={links.header} />
+    </nav>
 
-  <HeaderActions />
+    <HeaderActions />
 
-  <div
-    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"
-  >
-    <div class="flex items-center justify-between">
-      <HeaderLogo />
-      <HeaderActions mobile />
-    </div>
+    <div
+      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"
+    >
+      <div class="flex items-center justify-between">
+        <HeaderLogo />
+        <HeaderActions mobile />
+      </div>
 
-    <nav class="mt-8">
-      <NavItems
-        items={[
-          {
-            name: "Code of Conduct",
-            path: "https://www.europython-society.org/coc/",
-          },
-          /*
-            {
-              name: "Live 📺",
-              path: "/live",
-            },
-            */
-          {
-            name: "Recordings",
-            path: "https://www.youtube.com/playlist?list=PL8uoeex94UhE1CbtkDK4hevp2lBif57Nq",
-          },
-          ...links.header,
-        ]}
-      />
-    </nav>
+      <nav class="mt-8">
+        <NavItems items={[...links.header]} />
+      </nav>
+    </div>
   </div>
+</section>
 <Search />
-</header>
+
+<script>
+  let prevScrollPos = window.pageYOffset;
+  const navbar = document.getElementById("navbar") as HTMLElement;
+
+  window.addEventListener("scroll", () => {
+    let currentScrollPos = window.pageYOffset;
+    if (prevScrollPos > currentScrollPos) {
+      navbar.style.transform = "translateY(0)";
+    } else {
+      navbar.style.transform = "translateY(-100%)";
+    }
+    prevScrollPos = currentScrollPos;
+  });
+
+  navbar.addEventListener("focusin", () => {
+    navbar.style.transform = "translateY(0)";
+  });
+
+  navbar.addEventListener("focusout", () => {
+    if (window.pageYOffset > 100) {
+      navbar.style.transform = "translateY(-100%)";
+    }
+  });
+</script>