some more improvements

Author: egeakman

astro.config.mjs

@@ -14,7 +14,15 @@ export default defineConfig({
   build: {
     format: "directory",
   },
-  integrations: [mdx(), sitemap(), deleteUnusedImages(), compress()],
+  integrations: [
+    mdx(),
+    sitemap(),
+    deleteUnusedImages(),
+    compress({
+      // csso is disabled because it breaks some new tailwind features
+      CSS: { csso: false, lightningcss: {} },
+    }),
+  ],
   vite: {
     plugins: [tailwindcss()],
   },

src/components/CtaButton.astro

@@ -3,13 +3,15 @@ interface Props {
   href: string;
   variant?: "solid" | "outline";
   class?: string;
+  id?: string;
 }
 
-const { href, variant = "solid", class: cls } = Astro.props;
+const { href, variant = "solid", class: cls, id } = Astro.props;
 const external = href.startsWith("http");
 ---
 
 <a
+  id={id}
   href={href}
   target={external ? "_blank" : undefined}
   rel={external ? "noopener noreferrer" : undefined}

src/components/Header.astro

@@ -3,7 +3,11 @@ import { getImage } from "astro:assets";
 import Logo from "@components/Logo.astro";
 import cityBg from "@assets/city.png";
 
-const optimizedCityBg = await getImage({ src: cityBg, format: "avif", width: 1200 });
+const optimizedCityBg = await getImage({
+  src: cityBg,
+  format: "avif",
+  width: 1200,
+});
 
 const menuItems = [
   { href: "/#about", label: "About 🍕" },
@@ -24,7 +28,6 @@ const menuItems = [
   <div class="glass-pill relative z-40 mx-auto flex w-fit max-w-full items-center gap-3 lg:gap-4 py-3 pl-4 pr-4">
     <Logo class="shrink-0 size-14" />
 
-    <!-- Hamburger button (mobile/tablet) -->
     <button
       id="menu-toggle"
       type="button"
@@ -39,7 +42,6 @@ const menuItems = [
       </span>
     </button>
 
-    <!-- Desktop nav -->
     <nav class="hidden lg:flex items-center gap-1">
       {menuItems.map(({ href, label }) => (
         <a href={href} class="nav-link text-center whitespace-nowrap">
@@ -49,14 +51,12 @@ const menuItems = [
     </nav>
   </div>
 
-  <!-- Mobile menu overlay -->
   <nav
     id="mobile-menu"
     aria-hidden="true"
     class="lg:hidden fixed inset-0 z-30 flex flex-col items-center justify-start overflow-y-auto px-8 pt-28 pb-10 text-white opacity-0 pointer-events-none -translate-y-2 transition-[opacity,transform] duration-200 ease-in-out bg-center bg-cover"
     style={`background-image: url(${optimizedCityBg.src})`}
   >
-    <!-- Overlay tint -->
     <div class="absolute inset-0 bg-primary opacity-80 pointer-events-none"></div>
 
     <div class="relative z-10 mb-8">
@@ -79,7 +79,6 @@ const menuItems = [
 </header>
 
 <style>
-  /* Hamburger → X, driven purely by the button's aria-expanded state */
   #menu-toggle[aria-expanded="true"] #menu-icon {
     background-color: transparent;
   }
@@ -118,12 +117,10 @@ const menuItems = [
     if (e.key === "Escape" && open) setOpen(false);
   });
 
-  // Close on nav link click
   menu.querySelectorAll(".mobile-nav-link").forEach((link) => {
     link.addEventListener("click", () => setOpen(false));
   });
 
-  // Close when viewport goes desktop
   const mq = window.matchMedia("(min-width: 64rem)");
   mq.addEventListener("change", (e) => { if (e.matches) setOpen(false); });
 </script>

src/data/site.ts

@@ -1,6 +1,5 @@
 const ticketsUrl = "https://pretix.eu/europython/warsaw-python-pizza/";
 
-// ponytail: singleton config — no collection needed
 export const site = {
   pageTitle: "Warsaw Python Pizza",
   socialDescription: "Warsaw Python Pizza, join us in Warsaw on May 9, 2026",
@@ -9,8 +8,8 @@ export const site = {
   whenDatetime: "2026/05/09 10:00 AM UTC+2",
   whenFormat: "do MMMM y",
   ticketsUrl,
-  // Whatever's most important right now (tickets, CFP, sold out) — change this one line.
-  cta: { label: "Buy tickets 🎫", href: ticketsUrl },
   contactEmail: "warsawpythonpizza@gmail.com",
   socialImageUrl: "https://warsaw.python.pizza/social-image.jpg",
+  // whatever is most important right now
+  cta: { label: "Buy tickets 🎫", href: ticketsUrl },
 };

src/pages/compact-agenda.astro

@@ -18,7 +18,6 @@ const speakerNames = (e: (typeof events)[number]) =>
   description="Compact day-of agenda for Warsaw Python Pizza on May 9, 2026."
 >
   <div id="page" class="min-h-screen">
-    <!-- Sticky header -->
     <header class="sticky top-0 z-10 grid grid-cols-[2.5rem_1fr_2.5rem] items-center gap-2 border-b backdrop-blur-md px-4 md:px-8 py-3">
       <h1 class="m-0 font-mono text-lg md:text-2xl leading-tight text-center col-start-2">
         Agenda for Warsaw Python Pizza, May 9 2026
@@ -29,14 +28,11 @@ const speakerNames = (e: (typeof events)[number]) =>
         aria-label="Switch to dark mode"
         class="inline-flex items-center justify-center w-10 h-10 p-0 border border-primary rounded-full text-primary cursor-pointer col-start-3"
       >
-        <!-- sun icon (shown in dark mode) -->
         <img id="icon-sun" src="/icons/theme-sun.svg" alt="" aria-hidden="true" width="18" height="18" />
-        <!-- moon icon (shown in light mode) -->
         <img id="icon-moon" src="/icons/theme-moon.svg" alt="" aria-hidden="true" width="18" height="18" />
       </button>
     </header>
 
-    <!-- Agenda list -->
     <div class="max-w-4xl mx-auto px-4 md:px-8 pt-5 pb-24">
       <ol id="agenda-list" class="list-none grid gap-2 m-0 p-0">
         {events.map((event, i) => {
@@ -72,7 +68,6 @@ const speakerNames = (e: (typeof events)[number]) =>
       </ol>
     </div>
 
-    <!-- Back to home button -->
     <a
       id="home-button"
       href="/"
@@ -176,7 +171,6 @@ const speakerNames = (e: (typeof events)[number]) =>
   const toggleBtn = document.getElementById("theme-toggle")!;
   const STORAGE_KEY = "compact-agenda-color-mode";
 
-  // --- Dark mode ---
   type Mode = "light" | "dark";
 
   function getInitialMode(): Mode {
@@ -200,8 +194,6 @@ const speakerNames = (e: (typeof events)[number]) =>
     applyMode(mode);
   });
 
-  // --- Time highlighting ---
-
   // Parse highlightTime param once; fall back to real clock per tick
   const fixedTime: number | null = (() => {
     const param = new URLSearchParams(window.location.search).get("highlightTime");
@@ -251,7 +243,6 @@ const speakerNames = (e: (typeof events)[number]) =>
       }
     });
 
-    // Auto-scroll once
     if (!window.__agendaScrolled) {
       const idx = currentIdx ?? nextIdx;
       if (idx !== null) {
@@ -263,7 +254,6 @@ const speakerNames = (e: (typeof events)[number]) =>
     }
   }
 
-  // Declare global on window for the scroll flag
   declare global {
     interface Window { __agendaScrolled?: boolean; }
   }

src/pages/index.astro

@@ -68,8 +68,9 @@ const eventDate = format(new Date(site.whenDatetime), "yyyy-MM-dd");
 
   <Header />
   <CtaButton
+    id="floating-cta"
     href={site.cta.href}
-    class="fixed right-4 bottom-4 md:right-8 md:bottom-8 z-20 min-w-40 md:min-w-44 shadow-lg"
+    class="cta-hidden fixed right-4 bottom-4 md:right-8 md:bottom-8 z-20 min-w-40 md:min-w-44 shadow-lg"
   >
     {site.cta.label}
   </CtaButton>
@@ -90,4 +91,18 @@ const eventDate = format(new Date(site.whenDatetime), "yyyy-MM-dd");
     </Section>
   </main>
   <Footer />
+
+  <script>
+    // floating cta button appears when the hero cta button is scrolled out of view
+    const heroCta = document.getElementById("hero-cta");
+    const floatingCta = document.getElementById("floating-cta");
+
+    if (heroCta && floatingCta) {
+      const observer = new IntersectionObserver(
+        ([entry]) => floatingCta.classList.toggle("cta-hidden", entry.isIntersecting),
+        { threshold: 0.4 },
+      );
+      observer.observe(heroCta);
+    }
+  </script>
 </Base>

src/sections/Hero.astro

@@ -7,14 +7,17 @@ import { site } from "@data/site";
 import cityBg from "@assets/city.png";
 
 const dateStr = format(new Date(site.whenDatetime), site.whenFormat);
-const optimizedCityBg = await getImage({ src: cityBg, format: "avif", width: 1920 });
+const optimizedCityBg = await getImage({
+  src: cityBg,
+  format: "avif",
+  width: 1920,
+});
 ---
 
 <section
   class="relative flex flex-col items-center justify-center bg-center bg-cover min-h-screen pt-28 md:pt-40"
   style={`background-image: url(${optimizedCityBg.src})`}
 >
-  <!-- Red overlay -->
   <div class="hero-overlay absolute inset-0 bg-primary"></div>
 
   <div class="relative z-10 m-auto p-8 text-center">
@@ -23,7 +26,12 @@ const optimizedCityBg = await getImage({ src: cityBg, format: "avif", width: 192
     </h1>
     <p class="hero-subtext md:text-[2.2rem]">{site.subHeading}</p>
     <p class="hero-subtext md:text-[2.2rem]">{dateStr}</p>
-    <CtaButton href={site.cta.href} variant="outline" class="mt-12 px-10 py-4 text-lg md:text-xl">
+    <CtaButton
+      id="hero-cta"
+      href={site.cta.href}
+      variant="outline"
+      class="mt-12 px-10 py-4 text-lg md:text-xl"
+    >
       {site.cta.label}
     </CtaButton>
   </div>

src/sections/Organizers.astro

@@ -19,15 +19,15 @@ const organizers = (await getCollection("organizers")).sort(
     <p>By the community for the community.</p>
   </Prose>
 
-  <div class="grid grid-cols-2 sm:grid-cols-3 place-items-center gap-x-4 gap-y-10 md:flex md:flex-wrap md:justify-center md:gap-16 mt-12">
+  <div class="grid grid-cols-2 place-items-center gap-x-4 gap-y-10 sm:flex sm:flex-wrap sm:justify-center sm:gap-16 mt-12">
     {organizers.map((org) => (
       <div class="flex flex-col items-center gap-3">
         <Image
           src={org.data.image}
           alt={org.data.name}
           width={400}
           format="avif"
-          class="w-28 h-28 md:w-44 md:h-44 rounded-full object-cover avatar-shadow"
+          class="w-28 h-28 sm:w-44 sm:h-44 rounded-full object-cover avatar-shadow"
         />
         <h3 class="m-0 flex items-center justify-center gap-1 flex-wrap text-base font-medium leading-snug">
           <span>{org.data.name}</span>

src/styles/global.css

@@ -46,7 +46,6 @@
     font-weight: 300;
   }
 
-  /* ponytail: in @layer base so Tailwind utility classes (text-primary, text-white, etc.) properly override on <a> elements */
   a {
     color: inherit;
     text-decoration: none;
@@ -69,17 +68,14 @@
 }
 
 @layer components {
-  /* Narrow content column used by most sections and legal pages */
   .section-sm {
     @apply max-w-3xl mx-auto px-8 py-8 md:py-12;
   }
 
-  /* Wide content column for sponsor grids etc. */
   .section-lg {
     @apply max-w-240 mx-auto px-8 py-8 md:py-12;
   }
 
-  /* Prose body: MDX/markdown content areas */
   .prose-content {
     @apply text-lg md:text-xl leading-normal;
   }
@@ -119,7 +115,6 @@
     margin-bottom: 1rem;
   }
 
-  /* Prose MDX structural primitives */
   .prose-section {
     @apply border-t border-primary py-6;
   }
@@ -135,33 +130,27 @@
     @apply font-mono text-primary text-4xl font-medium leading-tight text-center my-8;
   }
 
-  /* Hero section subtitle / date line */
   .hero-subtext {
     @apply text-white text-xl font-mono font-medium text-center m-0 leading-snug;
   }
 
-  /* Speaker/organizer avatar photo shadow */
   .avatar-shadow {
     @apply shadow-[2px_8px_32px_-8px_#ed4337];
   }
 
-  /* Small inline icon link (social profile icons, speaker links) */
   .social-link {
     @apply inline-flex items-center leading-none;
   }
   .social-link img {
     filter: brightness(0);
   }
 
-  /* Desktop nav link inside the floating pill: soft highlight on hover */
   .nav-link {
     @apply rounded-full px-4 py-2 text-lg text-white/90 transition-colors duration-100 hover:bg-white/15 hover:text-white;
   }
 
-  /* Floating glass navbar pill */
   .glass-pill {
     @apply rounded-full border border-white/20 bg-[#2a1614]/60 text-white shadow-lg backdrop-blur-md;
-    /* promote to its own compositor layer so the scroll-linked scale below stays smooth */
     will-change: transform;
   }
   @supports (animation-timeline: scroll()) {
@@ -178,12 +167,10 @@
     }
   }
 
-  /* Lift affordance for pill/CTA buttons */
   .btn-lift {
-    @apply hover:-translate-y-0.5 transition-transform;
+    @apply hover:-translate-y-0.5 transition-transform duration-300;
   }
 
-  /* Generalized CTA pill button */
   .btn {
     @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 font-mono font-medium text-sm md:text-base text-center transition-all duration-300 hover:-translate-y-0.5;
   }
@@ -194,7 +181,11 @@
     @apply border-2 border-white bg-white/15 text-white backdrop-blur-sm hover:bg-white hover:text-primary;
   }
 
-  /* Diagonal striped animated background for the schedule's info/label cards */
+  .cta-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
   .stripe-badge {
     background-image: linear-gradient(
       45deg,