From 9c1a30a36e276fb1c8f5f1c3f7d93becad4fd699 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Thu, 3 Apr 2025 22:24:23 +0200
Subject: [PATCH 01/10] Search for mobile and mobile menu styles.

---
 src/components/BaseHead.astro              |   2 +-
 src/components/header/header-actions.astro | 216 ++++++++-------------
 src/components/header/header.astro         |   2 +-
 src/components/search/Search.astro         | 197 +++++++++++++++++++
 src/components/ui/Button.astro             |  30 ++-
 src/layouts/HomePageLayout.astro           |   2 +
 src/pages/index.astro                      |   1 +
 src/pages/test_components.astro            |   5 +
 8 files changed, 314 insertions(+), 141 deletions(-)
 create mode 100644 src/components/search/Search.astro

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 372114db3..2d1c47def 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -61,5 +61,5 @@ const { title, description, image = "/social-card.png" } = Astro.props;
 
 <script
   is:inline
-  src="https://kit.fontawesome.com/14a4971ab3.js"
+  src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"
   crossorigin="anonymous"></script>
diff --git a/src/components/header/header-actions.astro b/src/components/header/header-actions.astro
index 0138c1dfa..f7f1d3286 100644
--- a/src/components/header/header-actions.astro
+++ b/src/components/header/header-actions.astro
@@ -1,8 +1,7 @@
 ---
-import ButtonLink from "../button-link/button-link.astro";
 import Button from "@ui/Button.astro";
 import HeaderButton from "./header-button.astro";
-import Search from "astro-pagefind/components/Search";
+import Icon from "@ui/Icon.astro";
 
 export interface Props {
   mobile?: boolean;
@@ -11,148 +10,103 @@ export interface Props {
 const { mobile = false }: Props = Astro.props;
 
 const IS_LIVE = false;
+
+
+      //<Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
 ---
 
-<div class="flex items-center justify-end gap-2 w-1/3">
-  <Search
-    id="search"
-    className="pagefind-ui"
-    uiOptions={{
-      showImages: false,
-      translations: {
-        zero_results: "Couldn't find [SEARCH_TERM]",
-      },
-    }}
-  />
+<div class="flex items-center justify-end gap-2 h-[85px] w-1/3">
+<div class="ml-auto justify-end flex items-center w-full">
   {
-    !mobile ? (
+    !mobile ?
       <>
-      <Button url="/tickets" icon="ticket">Register Now!</Button>
-        {IS_LIVE && <Button url="/live">Live</Button>}
+
+        <button
+          id="searchButton"
+          class="mx-6 md:mx-2"
+            data-open-modal
+            aria-label="Search"
+            aria-keyshortcuts="Control+K"
+          >
+            <Icon name="search" />
+            <span class="hidden md:block" aria-hidden="true">Search</span>
+            <kbd class="hidden md:flex" >
+              <kbd>Ctrl</kbd><kbd>K</kbd>
+            </kbd>
+          </button>
+      <Button url="/tickets" icon="ticket" class="w-full max-w-48 max-xl:hidden">Register Now!</Button>
+      {IS_LIVE && <Button url="/live">Live</Button>}
       </>
-    ) : null
+     : null
   }
 
+
   <label for="nav_toggle" class="flex xl:hidden">
-    <HeaderButton variant="menu">
-      {mobile ? "Close Menu" : "Menu"}
-    </HeaderButton>
+      <span class="w-[3em] h-[3em] font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black bg-primary text-white hover:bg-primary-hover border-transparent">
+      {mobile ? <Icon name="close" size="fa-xl" /> : <Icon name="bars" size="fa-xl" />}
+      </span>
   </label>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    const searchContainer = document.querySelector(".pagefind-ui");
-    const searchInput = searchContainer?.querySelector("input");
-    let selectedIndex = -1;
 
-    function updateSelection() {
-      const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
-      if (!results) return;
+<style>
+	button[data-open-modal] {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		border: 0;
+		background-color: transparent;
+    color: grey;
+		cursor: pointer;
+		height: 2.5rem;
+		font-size: 28px;
+	}
 
-      results.forEach((result, index) => {
-        if (index === selectedIndex) {
-          result.classList.add("selected");
-          result.scrollIntoView({ block: "nearest", behavior: "smooth" });
-        } else {
-          result.classList.remove("selected");
-        }
-      });
-    }
+	@media (min-width: 45rem) {
+		button[data-open-modal] {
+			border: 1px solid #ccc;
+			border-radius: 0.5rem;
+			padding-inline-start: 0.75rem;
+			padding-inline-end: 0.5rem;
+			background-color: #fff;
+			font-size: 16px;
+      width:100%;
+			min-width: 10rem;
+			max-width: 22rem;
+			color: #5f3d1b;
+		}
+		button[data-open-modal]:hover {
+			border-color: #5f3d1b;
+      color: #000;
+		}
 
-    document.addEventListener("keydown", function (event) {
-      if (!searchContainer || !searchInput) return;
+		button[data-open-modal] > :last-child {
+			margin-inline-start: auto;
+		}
+	}
 
-      const results = searchContainer.querySelectorAll(".pagefind-ui__result");
-      if (document.activeElement === searchInput) {
-        if (event.key === "ArrowDown") {
-          event.preventDefault();
-          selectedIndex = (selectedIndex + 1) % results.length;
-          updateSelection();
-        } else if (event.key === "ArrowUp") {
-          event.preventDefault();
-          selectedIndex = (selectedIndex - 1 + results.length) % results.length;
-          updateSelection();
-        } else if (event.key === "Enter" && selectedIndex >= 0) {
-          event.preventDefault();
-          results[selectedIndex].querySelector("a")?.click();
-        }
-      }
-    });
+	button > kbd {
+		border-radius: 0.25rem;
+			font-size: 16px;
+		gap: 0.25em;
+		padding-inline: 0.375rem;
+		background-color: #F1E1D4;
+    color: #5f3d1b;
+	}
 
-    // Reset selection when the search query changes
-    searchInput?.addEventListener("input", function () {
-      selectedIndex = -1;
-    });
-  });
-</script>
-<style is:global>
-  .pagefind-ui__result.selected {
-    background-color: #f5f5f5;
-    background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  .pagefind-ui__drawer {
-  }
-  .pagefind-ui__message {
-    margin: 1em;
-  }
-  .pagefind-ui__result mark {
-    background: #f9eb5d;
-    background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
-    margin: 4px;
-    padding-right: 6px;
-    padding-left: 6px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    color: #000000;
-    font-family: monospace;
-    border-radius: 4px;
-  }
-  .pagefind-ui {
-    --pagefind-ui-scale: 1;
-    --pagefind-ui-primary: #141f36;
-    --pagefind-ui-text: black;
-    --pagefind-ui-border: #d8d8d8;
-    --pagefind-ui-border-width: 2px;
-    --pagefind-ui-border-radius: 0;
-    width:50%;
-    min-width: 10vw;
-  }
-  .pagefind-ui.yellow {
-    --pagefind-ui-background: #efc302;
-  }
-  .pagefind-ui.red {
-    --pagefind-ui-background: #ffb9bb;
-    width: 50%;
-  }
-  .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
-    position: absolute;
-    left: auto;
-    right: 0;
-    margin-top: 0px;
-    width: 50vw;
-    z-index: 9999;
-    overflow-y: auto;
-    box-shadow:
-      0 10px 10px -5px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.1);
-    border-bottom-right-radius: var(--pagefind-ui-border-radius);
-    border-bottom-left-radius: var(--pagefind-ui-border-radius);
-    background-color: var(--pagefind-ui-background);
-  }
-  .pagefind-ui__result {
-    padding: 0 2em 1em !important;
-  }
-  .pagefind-ui .pagefind-ui__result-link {
-    color: var(--pagefind-ui-primary);
-  }
-  .pagefind-ui .pagefind-ui__result-excerpt {
-    color: var(--pagefind-ui-text);
-  }
-  @media (max-width: 1280px) {
-    .pagefind-ui {
-      display: none;
-    }
-  }
+	kbd {
+		font-family: var(--__sl-font);
+	}
+
+	button[data-close-modal] {
+		position: absolute;
+		z-index: 1;
+		align-items: center;
+		align-self: flex-end;
+		height: calc(64px * var(--pagefind-ui-scale));
+		padding: 0.25rem;
+		border: 0;
+		background: transparent;
+		cursor: pointer;
+		color: #333;
+	}
 </style>
diff --git a/src/components/header/header.astro b/src/components/header/header.astro
index 2f4d0d4a4..b695598b2 100644
--- a/src/components/header/header.astro
+++ b/src/components/header/header.astro
@@ -27,7 +27,7 @@ const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
   <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">
+    <div class="flex items-center justify-between">
       <HeaderLogo />
       <HeaderActions mobile />
     </div>
diff --git a/src/components/search/Search.astro b/src/components/search/Search.astro
new file mode 100644
index 000000000..02dfb7f58
--- /dev/null
+++ b/src/components/search/Search.astro
@@ -0,0 +1,197 @@
+---
+import SearchComponent from "astro-pagefind/components/Search";
+import Button from "@ui/Button.astro";
+---
+
+<div class="search-wrapper hidden" style="display: none;">
+
+  <div class="w-full flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
+    <h2 class="text-black text-4xl ml-10 top-[46px] md:top-[85px]">Search<h2/>
+    <Button
+      icon="close"
+      iconSize="fa-xl"
+      class="search-close w-[3em] h-[3em] top-[46px] md:top-[85px]"
+    />
+  </div>
+
+  <div class="modal__overlay"></div>
+  <SearchComponent
+    id="search"
+    className="pagefind-ui"
+    uiOptions={{
+      showImages: false,
+      translations: {
+        zero_results: "Couldn't find [SEARCH_TERM]",
+      },
+    }}
+  />
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement | null;
+  const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
+  const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
+  const closeButton = document.querySelector(".search-close") as HTMLElement | null;
+  const searchButton = document.getElementById("searchButton") as HTMLElement | null;
+
+  let selectedIndex = -1;
+
+  function openSearch() {
+    if (searchWrapper) {
+      searchWrapper.style.display = "block";
+      if (searchInput) {
+        searchInput.value = "Tips";
+        const inputEvent = new Event("input", { bubbles: true });
+        searchInput.dispatchEvent(inputEvent);
+        setTimeout(() => {
+          searchInput.value = "";
+          searchInput.placeholder = "Tips for You";
+        }, 100);
+        searchInput.focus();
+      }
+    }
+  }
+
+  function closeSearch() {
+    if (searchWrapper) {
+      searchWrapper.style.display = "none";
+      selectedIndex = -1;
+    }
+  }
+
+  function updateSelection() {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (!results) return;
+
+    results.forEach((result, index) => {
+      if (result instanceof HTMLElement) {
+        if (index === selectedIndex) {
+          result.classList.add("selected");
+          result.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        } else {
+          result.classList.remove("selected");
+        }
+      }
+    });
+  }
+
+  function makeResultsClickable() {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (!results) return;
+
+    results.forEach((result) => {
+      const link = result.querySelector(".pagefind-ui__result-link") as HTMLAnchorElement | null;
+      if (link && !result.hasAttribute("data-clickable")) {
+        if (result instanceof HTMLElement) {
+          result.style.cursor = "pointer";
+          result.addEventListener("click", (e) => {
+            if (!(e.target instanceof HTMLElement) || !e.target.closest("a")) {
+              link.click();
+            }
+          });
+          result.setAttribute("data-clickable", "true");
+        }
+      }
+    });
+  }
+
+  if (searchButton && searchWrapper) {
+    searchButton.addEventListener("click", openSearch);
+  }
+
+  document.addEventListener("keydown", function (event) {
+    if (!searchContainer || !searchInput) return;
+
+    const results = searchContainer.querySelectorAll(".pagefind-ui__result");
+
+    if (event.ctrlKey && event.key === "k") {
+      event.preventDefault();
+      openSearch();
+    } else if (event.key === "Escape") {
+      closeSearch();
+    } else if (document.activeElement === searchInput) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedIndex = (selectedIndex + 1) % results.length;
+        updateSelection();
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        selectedIndex = (selectedIndex - 1 + results.length) % results.length;
+        updateSelection();
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        if (results.length > 0) {
+          const indexToOpen = selectedIndex === -1 ? 0 : selectedIndex;
+          const link = results[indexToOpen]?.querySelector("a") as HTMLAnchorElement | null;
+          link?.click();
+        }
+      }
+    }
+  });
+
+  const resultsObserver = new MutationObserver(() => {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (results && results.length > 0) {
+      selectedIndex = 0;
+      updateSelection();
+      makeResultsClickable();
+    }
+  });
+
+  if (searchContainer) {
+    resultsObserver.observe(searchContainer, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  closeButton?.addEventListener("click", closeSearch);
+});
+</script>
+
+<style>
+  .search-wrapper div{
+    max-width: calc(48rem + 8vw);
+  }
+  .search-wrapper h2 {
+    position: relative;
+    left: -12px;
+    z-index:100;
+  }
+  .modal__overlay {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .search-wrapper {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    display: block;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 500;
+    box-sizing: border-box;
+    display: none;
+    transition: opacity ease-out 0.2s;
+    background: rgba(37,40,43,0.9);
+    z-index: 100;
+  }
+
+  .search-wrapper :global(.search-close) {
+    position: relative;
+    left: -12px;
+    margin: 0;
+    border: 0;
+    transition: opacity ease-out 0.2s;
+    z-index: 10;
+  }
+
+</style>
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
index 2300cda31..ae0417c83 100644
--- a/src/components/ui/Button.astro
+++ b/src/components/ui/Button.astro
@@ -3,14 +3,18 @@ import Icon from "@ui/Icon.astro";
 
 const {
   url,
+  id,
   class: className = "",
   secondary = false,
   outline = false,
   disabled = false,
+  clear = false,
   isExternal,
   icon,
   iconSvg = false,
-  iconRight = true
+  iconRight = true,
+  iconSize = "",
+  title="",
 } = Astro.props;
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
@@ -18,38 +22,48 @@ const resolvedIsExternal = isExternal ?? url?.startsWith("http");
 const baseClasses = "font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
 const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover border-transparent";
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
+const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent"
 const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
 const disabledClasses = "opacity-50 pointer-events-none";
 const iconClasses = "mx-2 ";
+const idName = id;
+const slotContent = await Astro.slots.render('default')
+
 
 ---
 
 {url ? (
   <a
+    id={idName}
     href={disabled ? undefined : url}
+    title={title}
+    aria-label={title ? title : slotContent }
     class={`${baseClasses}
-      ${outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
+      ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     aria-disabled={disabled}
     {...(resolvedIsExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
   >
-    {!iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize}  class={iconClasses} />}
     <slot />
-    {iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
-    {resolvedIsExternal && <Icon name="external-link" svg={iconSvg} class={iconClasses} />}
+    {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
+    {resolvedIsExternal && <Icon name="external-link" svg={iconSvg} size={iconSize} class={iconClasses} />}
   </a>
 ) : (
   <button
+    id={idName}
+    title={title}
+    aria-label={title ? title : slotContent }
     class={`${baseClasses}
-      ${outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
+      ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     disabled={disabled}
     aria-disabled={disabled}
   >
-    {!iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
+  {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     <slot />
-    {iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
+    {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
   </button>
 )}
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index c11f772ff..eaba7bd60 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -2,6 +2,7 @@
 import Header from "../components/header/header.astro";
 import Footer from "../components/footer.astro";
 import BaseHead from "../components/BaseHead.astro";
+import Search from "@components/search/Search.astro";
 
 export interface Props {
   title: string;
@@ -48,6 +49,7 @@ const jsonLd = JSON.stringify({
   <div class="flex flex-col items-stretch min-h-screen">
     <a href="#main-content" class="sr-only"> Skip to main content</a>
 
+    <Search />
     <Header />
 
     <main id="main-content" class="layout-wrapper overflow-x-clip">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 42a6314e1..4dd622497 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,6 +11,7 @@ import Prague from "@sections/prague.astro";
   title="EuroPython 2025 | July 14th-20th 2025 | Prague, Czech Republic & Remote"
   description="EuroPython is the largest Python conference in Europe. We are looking forward to seeing you in Prague, Czech Republic & Remote from July 14th-20th 2025."
 >
+
   <Hero />
 
   <Updates />
diff --git a/src/pages/test_components.astro b/src/pages/test_components.astro
index b3551752e..738795d55 100644
--- a/src/pages/test_components.astro
+++ b/src/pages/test_components.astro
@@ -22,6 +22,7 @@ import Icon from "@ui/Icon.astro"
     <div class="grid gap-2 w-[200px]">
       <Button>Primary Button</Button>
       <Button secondary>Secondary Button</Button>
+      <Button clear>Clear Button</Button>
       <Button outline>Outline Button</Button>
       <Button disabled>Disabled Button</Button>
       <Button url="/about">Internal Link</Button>
@@ -43,6 +44,10 @@ import Icon from "@ui/Icon.astro"
       <Button icon="arrow-left" iconRight={false} >Prev</Button>
       <Button icon="clock" iconRight={false} size="fa-2xl">Prev</Button>
 
+      <Button icon="arrow-right" iconRight={true} iconSize="fa-3xl">Next</Button>
+      <Button icon="arrow-left" iconRight={false} iconSize="fa-xl">Prev</Button>
+      <Button icon="clock" iconRight={false} iconSize="fa-2xl">Prev</Button>
+
     </div>
 </section>
 </Layout>

From 1bf088441a2b299e8b669e42896d1560a8a83706 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Sat, 12 Apr 2025 00:29:53 +0200
Subject: [PATCH 02/10] Fix css style for search modal.

---
 src/components/search/Search.astro |  55 ++-----------
 src/layouts/HomePageLayout.astro   |   1 +
 src/layouts/Layout.astro           |   2 +
 src/styles/global.css              | 123 +++++++++++++++++++++++++++++
 4 files changed, 131 insertions(+), 50 deletions(-)

diff --git a/src/components/search/Search.astro b/src/components/search/Search.astro
index dad74ba40..9370665b8 100644
--- a/src/components/search/Search.astro
+++ b/src/components/search/Search.astro
@@ -1,19 +1,20 @@
 ---
 import SearchComponent from "astro-pagefind/components/Search";
 import Button from "@ui/Button.astro";
+
 ---
 
 <div class="search-wrapper hidden" style="display: none;">
 
-  <div class="w-full flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
+  <div class="search-header flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
     <h2 class="text-black text-4xl ml-10 top-[46px] md:top-[85px]">Search<h2/>
     <Button
+      id="search-close"
       icon="close"
       iconSize="fa-xl"
-      class="search-close w-[3em] h-[3em] top-[46px] md:top-[85px]"
+      class="w-[3em] h-[3em] top-[46px] md:top-[85px]"
     />
   </div>
-
   <div class="modal__overlay"></div>
 
   <SearchComponent
@@ -33,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function () {
   const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement | null;
   const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
   const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
-  const closeButton = document.querySelector(".search-close") as HTMLElement | null;
+  const closeButton = document.querySelector("#search-close") as HTMLElement | null;
   const searchButton = document.getElementById("searchButton") as HTMLElement | null;
 
   let selectedIndex = -1;
@@ -150,49 +151,3 @@ document.addEventListener("DOMContentLoaded", function () {
   closeButton?.addEventListener("click", closeSearch);
 });
 </script>
-
-<style is:global>
-  .search-wrapper div{
-    max-width: calc(48rem + 8vw);
-  }
-  .search-wrapper h2 {
-    position: relative;
-    left: -12px;
-    z-index:100;
-  }
-  .modal__overlay {
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .search-wrapper {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    display: block;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 500;
-    box-sizing: border-box;
-    display: none;
-    transition: opacity ease-out 0.2s;
-    background: rgba(37,40,43,0.9);
-    z-index: 100;
-  }
-
-  .search-wrapper :global(.search-close) {
-    position: relative;
-    left: -12px;
-    margin: 0;
-    border: 0;
-    transition: opacity ease-out 0.2s;
-    z-index: 10;
-  }
-
-</style>
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index eaba7bd60..81c057fb3 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -50,6 +50,7 @@ const jsonLd = JSON.stringify({
     <a href="#main-content" class="sr-only"> Skip to main content</a>
 
     <Search />
+
     <Header />
 
     <main id="main-content" class="layout-wrapper overflow-x-clip">
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f2e786a9d..5e8597b69 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import Header from "../components/header/header.astro";
 import Footer from "../components/footer.astro";
 import BaseHead from "../components/BaseHead.astro";
+import Search from "@components/search/Search.astro";
 
 export interface Props {
   title: string;
@@ -20,6 +21,7 @@ const { title, description } = Astro.props;
   <div class="flex flex-col items-stretch min-h-screen">
     <a href="#main-content" class="sr-only"> Skip to main content</a>
 
+    <Search />
     <Header />
 
     <main id="main-content" class="layout-wrapper overflow-x-clip">
diff --git a/src/styles/global.css b/src/styles/global.css
index ae6493815..efe0cb9b0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -253,3 +253,126 @@ p.cross::after {
     --max-fs: 1.5;
   }
 }
+
+.search-pagefind {
+  padding: 85px 10px 10px 10px;
+  position: relative;
+  max-height: 80vh;
+  width: 100%;
+  max-width: 48rem;
+  margin: auto;
+  background: #f5e5d6;
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
+  overflow: auto;
+  transition: background ease-out 0.2s;
+  z-index: 2;
+  overflow: auto;
+  height: 100%;
+
+  border-bottom: 1px solid #e1e3e6;
+  border-bottom-color: rgb(225, 227, 230);
+}
+
+.pagefind-ui__search-input {
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  padding-inline-start: 0.75rem;
+  padding-inline-end: 0.5rem;
+  background-color: #fff;
+  font-size: 16px;
+  color: #5f3d1b;
+}
+
+.pagefind-ui__result.selected {
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.pagefind-ui__result:hover {
+  background-color: #f5f5f5;
+}
+.pagefind-ui__message {
+  margin: 1em;
+}
+.pagefind-ui__result mark {
+  background: #f9eb5d;
+  background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
+  margin: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  color: #000000;
+  font-family: monospace;
+  border-radius: 4px;
+}
+.pagefind-ui {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: #141f36;
+  --pagefind-ui-text: black;
+  --pagefind-ui-border: #d8d8d8;
+  --pagefind-ui-border-width: 2px;
+  --pagefind-ui-border-radius: 0.5rem;
+  /*width: 50%;*/
+}
+.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+  z-index: 9999;
+  position: relative;
+  overflow: auto;
+  height: 100%;
+}
+.pagefind-ui__result {
+  padding: 0 2em 1em !important;
+}
+.pagefind-ui .pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary);
+}
+.pagefind-ui .pagefind-ui__result-excerpt {
+  color: var(--pagefind-ui-text);
+}
+
+.search-header {
+  max-width: 48rem;
+  margin: auto;
+}
+.search-header h2 {
+  position: relative;
+  left: -12px;
+  z-index: 100;
+}
+.modal__overlay {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.search-wrapper {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 500;
+  box-sizing: border-box;
+  display: none;
+  transition: opacity ease-out 0.2s;
+  background: rgba(37, 40, 43, 0.9);
+  z-index: 100;
+}
+
+#search-close {
+  position: relative;
+  left: -12px;
+  margin: 0;
+  border: 0;
+  transition: opacity ease-out 0.2s;
+  z-index: 10;
+}

From 94b8ecdf6da21a09ea168eac22bc3bcd3d7da274 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Sat, 12 Apr 2025 08:46:30 +0200
Subject: [PATCH 03/10] Add BODY to the EuroPython.

---
 src/components/{footer.astro => Footer.astro} |  2 +
 .../{header/header.astro => Header.astro}     |  8 ++--
 src/components/{search => }/Search.astro      |  0
 src/layouts/BaseLayout.astro                  |  9 +++++
 src/layouts/HomePageLayout.astro              | 37 +++----------------
 src/layouts/Layout.astro                      | 29 +++++++--------
 6 files changed, 34 insertions(+), 51 deletions(-)
 rename src/components/{footer.astro => Footer.astro} (98%)
 rename src/components/{header/header.astro => Header.astro} (83%)
 rename src/components/{search => }/Search.astro (100%)
 create mode 100644 src/layouts/BaseLayout.astro

diff --git a/src/components/footer.astro b/src/components/Footer.astro
similarity index 98%
rename from src/components/footer.astro
rename to src/components/Footer.astro
index 83f15a299..594df4740 100644
--- a/src/components/footer.astro
+++ b/src/components/Footer.astro
@@ -8,6 +8,7 @@ const buildTimestamp = import.meta.env.TIMESTAMP;
 const gitVersion = import.meta.env.GIT_VERSION;
 ---
 
+      <div class="mt-auto">
 <Fullbleed className="bg-primary text-white">
   <footer
     class="max-w-4xl lg:max-w-6xl mx-auto py-16 lg:grid grid-cols-2 px-6 gap-60"
@@ -106,3 +107,4 @@ const gitVersion = import.meta.env.GIT_VERSION;
     </article>
   </footer>
 </Fullbleed>
+</div>
diff --git a/src/components/header/header.astro b/src/components/Header.astro
similarity index 83%
rename from src/components/header/header.astro
rename to src/components/Header.astro
index b695598b2..de0d13ed0 100644
--- a/src/components/header/header.astro
+++ b/src/components/Header.astro
@@ -1,10 +1,10 @@
 ---
 import { promises as fs } from "fs";
-import { NavItems } from "../nav-items";
-import HeaderActions from "./header-actions.astro";
-import HeaderLogo from "./header-logo.astro";
+import { NavItems } from "@components/nav-items";
+import HeaderActions from "@components/header/header-actions.astro";
+import HeaderLogo from "@components/header/header-logo.astro";
 
-const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
+import links from "../data/links.json";
 ---
 
 <header class="p-6 flex items-center justify-between relative z-40">
diff --git a/src/components/search/Search.astro b/src/components/Search.astro
similarity index 100%
rename from src/components/search/Search.astro
rename to src/components/Search.astro
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 000000000..e0777e0e0
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <slot name="head" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index 81c057fb3..d03256a1b 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -1,13 +1,5 @@
 ---
-import Header from "../components/header/header.astro";
-import Footer from "../components/footer.astro";
-import BaseHead from "../components/BaseHead.astro";
-import Search from "@components/search/Search.astro";
-
-export interface Props {
-  title: string;
-  description: string;
-}
+import Layout from "@layouts/Layout.astro";
 
 const { title, description } = Astro.props;
 const jsonLd = JSON.stringify({
@@ -39,26 +31,7 @@ const jsonLd = JSON.stringify({
 });
 ---
 
-<!doctype html>
-<html lang="en">
-  <head>
-    <BaseHead title={title} description={description} />
-    <script type="application/ld+json" is:inline set:html={jsonLd} />
-  </head>
-
-  <div class="flex flex-col items-stretch min-h-screen">
-    <a href="#main-content" class="sr-only"> Skip to main content</a>
-
-    <Search />
-
-    <Header />
-
-    <main id="main-content" class="layout-wrapper overflow-x-clip">
-      <slot />
-    </main>
-
-    <div class="mt-auto">
-      <Footer />
-    </div>
-  </div>
-</html>
+<Layout title={title} description={description}>
+  <script type="application/ld+json" is:inline set:html={jsonLd} slot="head" />
+  <slot />
+</Layout>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5e8597b69..bceedbbda 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,8 +1,8 @@
 ---
-import Header from "../components/header/header.astro";
-import Footer from "../components/footer.astro";
-import BaseHead from "../components/BaseHead.astro";
-import Search from "@components/search/Search.astro";
+import BaseHead from "@components/BaseHead.astro";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import Search from "@components/Search.astro";
 
 export interface Props {
   title: string;
@@ -16,20 +16,19 @@ const { title, description } = Astro.props;
 <html lang="en">
   <head>
     <BaseHead title={title} description={description} />
+    <slot name="head" />
   </head>
+  <body>
+      <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-white text-blue-600 p-2 z-50"> Skip to main content</a>
 
-  <div class="flex flex-col items-stretch min-h-screen">
-    <a href="#main-content" class="sr-only"> Skip to main content</a>
+      <Search />
+      <Header />
 
-    <Search />
-    <Header />
+      <main id="main-content" role="main" class="layout-wrapper overflow-x-clip">
+        <slot />
+      </main>
 
-    <main id="main-content" class="layout-wrapper overflow-x-clip">
-      <slot />
-    </main>
-
-    <div class="mt-auto">
       <Footer />
-    </div>
-  </div>
+
+  </body>
 </html>

From 09efdcb53476a0c199968e5c5f36abb4d78994f0 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Sat, 12 Apr 2025 08:58:48 +0200
Subject: [PATCH 04/10] Remove twins.

---
 src/styles/global.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index efe0cb9b0..ccb12d0a7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
   --color-primary: #151f38;
   --color-primary-hover: #7a7ebd;

From 6106d88161cce61fcd0e38ab39437c73abc6c426 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Sat, 12 Apr 2025 09:11:32 +0200
Subject: [PATCH 05/10] Create separate layout for markdown pages.

---
 src/layouts/Layout.astro         |   3 +
 src/layouts/MarkdownLayout.astro |  11 ++
 src/pages/[...slug].astro        |   2 +-
 src/styles/global.css            |  98 ---------------
 src/styles/markdown.css          | 203 +++++++++++++++++++++++++++++++
 5 files changed, 218 insertions(+), 99 deletions(-)
 create mode 100644 src/layouts/MarkdownLayout.astro
 create mode 100644 src/styles/markdown.css

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index bceedbbda..8e5965dd4 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,6 +4,9 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Search from "@components/Search.astro";
 
+import "../styles/global.css";
+import "@fontsource-variable/inter";
+
 export interface Props {
   title: string;
   description: string;
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
new file mode 100644
index 000000000..3bf24ab4c
--- /dev/null
+++ b/src/layouts/MarkdownLayout.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "@layouts/Layout.astro";
+
+import "../styles/markdown.css";
+
+const { title, description } = Astro.props;
+---
+
+<Layout title={title} description={description}>
+  <slot />
+</Layout>
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index b31905805..8fc02504e 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -1,6 +1,6 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
-import Layout from "../layouts/Layout.astro";
+import Layout from "@layouts/MarkdownLayout.astro";
 
 import Prose from "../components/prose/prose.astro";
 import ButtonLink from "../components/button-link/button-link.astro";
diff --git a/src/styles/global.css b/src/styles/global.css
index ccb12d0a7..ecb38a764 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -46,104 +46,6 @@ body {
   grid-column: 1 / 4;
 }
 
-.prose :is(h1, h2, h3, h4, h5, h6) a {
-  text-decoration: none !important;
-}
-
-.prose :is(h1, h2, h3, h4, h5, h6) a:hover {
-  text-decoration: underline !important;
-}
-
-.prose :is(h1, h2, h3, h4, h5, h6) a:focus {
-  outline: 4px solid #0073e6;
-  outline-offset: 5px;
-}
-
-ul.milestone-done li {
-  position: relative;
-  list-style: none;
-}
-
-ul.milestone-done li::before {
-  content: "\2705  " !important;
-  background: none !important;
-}
-
-ul.milestone-todo li {
-  position: relative;
-  list-style: none;
-}
-
-ul.milestone-todo li::before {
-  content: "\1F4DD  " !important;
-  background: none !important;
-}
-
-img.findaid-accent-round-marker {
-  width: 120px;
-  min-width: 70px;
-  padding: 0 10px;
-  display: inline-block;
-  margin: 0;
-}
-
-table.finaid-timeline td {
-  padding-bottom: 1rem;
-}
-
-div.finaid-sponsor {
-  width: 50%;
-  margin: 0 auto 2rem auto;
-}
-
-summary h4::after {
-  content: "👇";
-}
-
-.list-disc li {
-  list-style: none;
-  position: relative;
-}
-
-ul.list-disc li::before {
-  content: "";
-  display: inline-block;
-  width: 25px;
-  height: 20px;
-  /*background-image: url(/img/list-item.svg);*/
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  position: absolute;
-  left: -30px;
-  top: 0.2em;
-}
-
-ul ul.list-disc li {
-  list-style: disc;
-}
-ul ul.list-disc li::before {
-  display: none;
-}
-
-p.tick::before {
-  content: "\2705  ";
-  padding: 0.5rem;
-}
-
-p.cross::before {
-  content: "\274C  ";
-  padding: 0.5rem;
-}
-
-p.tick::after,
-p.cross::after {
-  content: "\23EC";
-  display: inline-block;
-  font-size: 1.3em;
-  margin-left: 0.4em;
-}
-
 /* typography */
 .prose {
   h1,
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
new file mode 100644
index 000000000..ddaf57a36
--- /dev/null
+++ b/src/styles/markdown.css
@@ -0,0 +1,203 @@
+.prose :is(h1, h2, h3, h4, h5, h6) a {
+  text-decoration: none !important;
+}
+
+.prose :is(h1, h2, h3, h4, h5, h6) a:hover {
+  text-decoration: underline !important;
+}
+
+.prose :is(h1, h2, h3, h4, h5, h6) a:focus {
+  outline: 4px solid #0073e6;
+  outline-offset: 5px;
+}
+
+ul.milestone-done li {
+  position: relative;
+  list-style: none;
+}
+
+ul.milestone-done li::before {
+  content: "\2705  " !important;
+  background: none !important;
+}
+
+ul.milestone-todo li {
+  position: relative;
+  list-style: none;
+}
+
+ul.milestone-todo li::before {
+  content: "\1F4DD  " !important;
+  background: none !important;
+}
+
+img.findaid-accent-round-marker {
+  width: 120px;
+  min-width: 70px;
+  padding: 0 10px;
+  display: inline-block;
+  margin: 0;
+}
+
+table.finaid-timeline td {
+  padding-bottom: 1rem;
+}
+
+div.finaid-sponsor {
+  width: 50%;
+  margin: 0 auto 2rem auto;
+}
+
+summary h4::after {
+  content: "👇";
+}
+
+.list-disc li {
+  list-style: none;
+  position: relative;
+}
+
+ul.list-disc li::before {
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 20px;
+  /*background-image: url(/img/list-item.svg);*/
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  position: absolute;
+  left: -30px;
+  top: 0.2em;
+}
+
+ul ul.list-disc li {
+  list-style: disc;
+}
+ul ul.list-disc li::before {
+  display: none;
+}
+
+p.tick::before {
+  content: "\2705  ";
+  padding: 0.5rem;
+}
+
+p.cross::before {
+  content: "\274C  ";
+  padding: 0.5rem;
+}
+
+p.tick::after,
+p.cross::after {
+  content: "\23EC";
+  display: inline-block;
+  font-size: 1.3em;
+  margin-left: 0.4em;
+}
+
+/* typography */
+.prose {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+
+    span.heading-link {
+      font-size: 0.5em;
+      margin-left: 0.2em;
+      vertical-align: text-top;
+
+      @media (min-width: 768px) {
+        font-size: 1em;
+        margin-left: 0;
+        vertical-align: unset;
+        position: absolute;
+        left: -1em;
+        padding-right: 0.5rem;
+        color: var(--color-text);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  /* Breaking all links because we sometimes have very long links that break mobile */
+
+  a {
+    word-break: break-word;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    font-family: var(--font-display);
+    line-height: 1.25;
+
+    /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
+
+    --min-fs: 1;
+    --max-fs: 1.5;
+    --min-vw: 20;
+    --max-vw: 45;
+
+    --min-fs-rem: var(--min-fs) * 1rem;
+    --max-fs-rem: var(--max-fs) * 1rem;
+    --min-vw-rem: var(--min-vw) * 1rem;
+
+    --slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) /
+      (var(--max-vw) - var(--min-vw));
+
+    font-size: clamp(
+      var(--min-fs-rem),
+      var(--min-fs-rem) + var(--slope),
+      var(--max-fs-rem)
+    );
+  }
+
+  h1 {
+    /* 36 px, 48px */
+    --min-fs: 2.25;
+    --max-fs: 3;
+  }
+
+  h2 {
+    /* 32px, 40px */
+    --min-fs: 2;
+    --max-fs: 2.5;
+  }
+
+  h3 {
+    /* 28px, 36px */
+    --min-fs: 1.75;
+    --max-fs: 2.25;
+  }
+
+  h4 {
+    /* 24px, 32px */
+    --min-fs: 1.5;
+    --max-fs: 2;
+  }
+
+  h5 {
+    /* 20px, 28px */
+    --min-fs: 1.25;
+    --max-fs: 1.75;
+  }
+
+  h6 {
+    /* 16px, 24px */
+    --min-fs: 1;
+    --max-fs: 1.5;
+  }
+}

From 606038d182e00226d544957b01db92d3b395a70e Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Sat, 12 Apr 2025 09:29:25 +0200
Subject: [PATCH 06/10] Separate search styles.

---
 src/components/BaseHead.astro |   4 --
 src/layouts/Layout.astro      |   3 +-
 src/styles/global.css         | 123 ----------------------------------
 src/styles/search.css         | 122 +++++++++++++++++++++++++++++++++
 4 files changed, 124 insertions(+), 128 deletions(-)
 create mode 100644 src/styles/search.css

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 2d1c47def..39d295358 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,8 +1,4 @@
 ---
-// Import the global.css file here so that it is included on
-// all pages through the use of the <BaseHead /> component.
-import "../styles/global.css";
-import "@fontsource-variable/inter";
 
 interface Props {
   title: string;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8e5965dd4..39218ecdf 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,7 +4,8 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Search from "@components/Search.astro";
 
-import "../styles/global.css";
+import "@src/styles/global.css";
+import "@src/styles/search.css";
 import "@fontsource-variable/inter";
 
 export interface Props {
diff --git a/src/styles/global.css b/src/styles/global.css
index ecb38a764..130de2383 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -151,126 +151,3 @@ body {
     --max-fs: 1.5;
   }
 }
-
-.search-pagefind {
-  padding: 85px 10px 10px 10px;
-  position: relative;
-  max-height: 80vh;
-  width: 100%;
-  max-width: 48rem;
-  margin: auto;
-  background: #f5e5d6;
-  border-radius: 0.5rem;
-  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
-  overflow: auto;
-  transition: background ease-out 0.2s;
-  z-index: 2;
-  overflow: auto;
-  height: 100%;
-
-  border-bottom: 1px solid #e1e3e6;
-  border-bottom-color: rgb(225, 227, 230);
-}
-
-.pagefind-ui__search-input {
-  border: 1px solid #ccc;
-  border-radius: 20px;
-  padding-inline-start: 0.75rem;
-  padding-inline-end: 0.5rem;
-  background-color: #fff;
-  font-size: 16px;
-  color: #5f3d1b;
-}
-
-.pagefind-ui__result.selected {
-  background-color: #f5f5f5;
-  background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-.pagefind-ui__result:hover {
-  background-color: #f5f5f5;
-}
-.pagefind-ui__message {
-  margin: 1em;
-}
-.pagefind-ui__result mark {
-  background: #f9eb5d;
-  background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
-  margin: 4px;
-  padding-right: 6px;
-  padding-left: 6px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  color: #000000;
-  font-family: monospace;
-  border-radius: 4px;
-}
-.pagefind-ui {
-  --pagefind-ui-scale: 1;
-  --pagefind-ui-primary: #141f36;
-  --pagefind-ui-text: black;
-  --pagefind-ui-border: #d8d8d8;
-  --pagefind-ui-border-width: 2px;
-  --pagefind-ui-border-radius: 0.5rem;
-  /*width: 50%;*/
-}
-.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
-  z-index: 9999;
-  position: relative;
-  overflow: auto;
-  height: 100%;
-}
-.pagefind-ui__result {
-  padding: 0 2em 1em !important;
-}
-.pagefind-ui .pagefind-ui__result-link {
-  color: var(--pagefind-ui-primary);
-}
-.pagefind-ui .pagefind-ui__result-excerpt {
-  color: var(--pagefind-ui-text);
-}
-
-.search-header {
-  max-width: 48rem;
-  margin: auto;
-}
-.search-header h2 {
-  position: relative;
-  left: -12px;
-  z-index: 100;
-}
-.modal__overlay {
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.search-wrapper {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  display: block;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 500;
-  box-sizing: border-box;
-  display: none;
-  transition: opacity ease-out 0.2s;
-  background: rgba(37, 40, 43, 0.9);
-  z-index: 100;
-}
-
-#search-close {
-  position: relative;
-  left: -12px;
-  margin: 0;
-  border: 0;
-  transition: opacity ease-out 0.2s;
-  z-index: 10;
-}
diff --git a/src/styles/search.css b/src/styles/search.css
new file mode 100644
index 000000000..91887011d
--- /dev/null
+++ b/src/styles/search.css
@@ -0,0 +1,122 @@
+#search {
+  padding: 85px 10px 10px 10px;
+  position: relative;
+  max-height: 80vh;
+  width: 100%;
+  max-width: 48rem;
+  margin: auto;
+  background: #f5e5d6;
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
+  overflow: auto;
+  transition: background ease-out 0.2s;
+  z-index: 2;
+  overflow: auto;
+  height: 100%;
+
+  border-bottom: 1px solid #e1e3e6;
+  border-bottom-color: rgb(225, 227, 230);
+}
+
+.pagefind-ui__search-input {
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  padding-inline-start: 0.75rem;
+  padding-inline-end: 0.5rem;
+  background-color: #fff;
+  font-size: 16px;
+  color: #5f3d1b;
+}
+
+.pagefind-ui__result.selected {
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.pagefind-ui__result:hover {
+  background-color: #f5f5f5;
+}
+.pagefind-ui__message {
+  margin: 1em;
+}
+.pagefind-ui__result mark {
+  background: #f9eb5d;
+  background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
+  margin: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  color: #000000;
+  font-family: monospace;
+  border-radius: 4px;
+}
+.pagefind-ui {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: #141f36;
+  --pagefind-ui-text: black;
+  --pagefind-ui-border: #d8d8d8;
+  --pagefind-ui-border-width: 2px;
+  --pagefind-ui-border-radius: 0.5rem;
+  /*width: 50%;*/
+}
+.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+  z-index: 9999;
+  position: relative;
+  overflow: auto;
+  height: 100%;
+}
+.pagefind-ui__result {
+  padding: 0 2em 1em !important;
+}
+.pagefind-ui .pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary);
+}
+.pagefind-ui .pagefind-ui__result-excerpt {
+  color: var(--pagefind-ui-text);
+}
+
+.search-header {
+  max-width: 48rem;
+  margin: auto;
+}
+.search-header h2 {
+  position: relative;
+  left: -12px;
+  z-index: 100;
+}
+.modal__overlay {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.search-wrapper {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 500;
+  box-sizing: border-box;
+  display: none;
+  transition: opacity ease-out 0.2s;
+  background: rgba(37, 40, 43, 0.9);
+  z-index: 100;
+}
+
+#search-close {
+  position: relative;
+  left: -12px;
+  margin: 0;
+  border: 0;
+  transition: opacity ease-out 0.2s;
+  z-index: 10;
+}

From b95093a9cedf49c4acb310d4efc70c01408c85fe Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Sat, 12 Apr 2025 10:04:00 +0200
Subject: [PATCH 07/10] Improve search modal style.

---
 src/components/Search.astro | 1 +
 src/styles/search.css       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Search.astro b/src/components/Search.astro
index 9370665b8..84f1ccf83 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -10,6 +10,7 @@ import Button from "@ui/Button.astro";
     <h2 class="text-black text-4xl ml-10 top-[46px] md:top-[85px]">Search<h2/>
     <Button
       id="search-close"
+      clear
       icon="close"
       iconSize="fa-xl"
       class="w-[3em] h-[3em] top-[46px] md:top-[85px]"
diff --git a/src/styles/search.css b/src/styles/search.css
index 91887011d..0452f369b 100644
--- a/src/styles/search.css
+++ b/src/styles/search.css
@@ -108,7 +108,7 @@
   box-sizing: border-box;
   display: none;
   transition: opacity ease-out 0.2s;
-  background: rgba(37, 40, 43, 0.9);
+  background: rgba(116, 116, 116, 0.9);
   z-index: 100;
 }
 

From 3e4d3b78a2c50dde854809ed683622da3976654f Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Mon, 14 Apr 2025 20:38:38 +0200
Subject: [PATCH 08/10] Create modal component, add local FA icons.

---
 package.json                               |  1 +
 pnpm-lock.yaml                             |  9 ++++
 src/components/BaseHead.astro              |  5 --
 src/components/Modal.astro                 | 46 ++++++++++++++++
 src/components/Search.astro                | 39 +++++---------
 src/components/header/header-actions.astro |  2 +-
 src/components/ui/Button.astro             | 21 ++++----
 src/layouts/Layout.astro                   |  3 ++
 src/pages/index.astro                      |  1 -
 src/styles/search.css                      | 63 ++--------------------
 10 files changed, 90 insertions(+), 100 deletions(-)
 create mode 100644 src/components/Modal.astro

diff --git a/package.json b/package.json
index 443d0c0ac..1b8970e7f 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@astrojs/sitemap": "^3.3.0",
     "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/inter": "^5.1.1",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b0594a015..44155e3ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@fontsource-variable/inter':
         specifier: ^5.1.1
         version: 5.2.5
+      '@fortawesome/fontawesome-free':
+        specifier: ^6.7.2
+        version: 6.7.2
       '@tailwindcss/typography':
         specifier: ^0.5.16
         version: 0.5.16(tailwindcss@3.4.17)
@@ -592,6 +595,10 @@ packages:
   '@fontsource-variable/inter@5.2.5':
     resolution: {integrity: sha512-TrWffUAFOnT8zroE9YmGybagoOgM/HjRqMQ8k9R0vVgXlnUh/vnpbGPAS/Caz1KIlOPnPGh6fvJbb7DHbFCncA==}
 
+  '@fortawesome/fontawesome-free@6.7.2':
+    resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
+    engines: {node: '>=6'}
+
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3475,6 +3482,8 @@ snapshots:
 
   '@fontsource-variable/inter@5.2.5': {}
 
+  '@fortawesome/fontawesome-free@6.7.2': {}
+
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.4
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 39d295358..2b48d6061 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -54,8 +54,3 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   is:inline
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
-
-<script
-  is:inline
-  src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"
-  crossorigin="anonymous"></script>
diff --git a/src/components/Modal.astro b/src/components/Modal.astro
new file mode 100644
index 000000000..bc8382525
--- /dev/null
+++ b/src/components/Modal.astro
@@ -0,0 +1,46 @@
+---
+import Button from '@ui/Button.astro';
+const { id = 'modal', open = false } = Astro.props;
+---
+
+<div
+  id={id}
+  class={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${
+    open ? 'opacity-100 visible bg-black/50' : 'opacity-0 invisible'
+  }`}
+  data-modal-wrapper
+>
+  <div
+    class="relative bg-white dark:bg-gray-800 p-6 lg:rounded-2xl lg:shadow-xl lg:max-w-4xl lg:mx-4 h-full lg:h-[80vh] w-full lg:w-[70vw] max-h-full overflow-y-auto"
+  >
+    <Button
+      id="search-close"
+      clear
+      icon="close"
+      iconSize="fa-xl"
+      data-close-modal
+      class="w-[3em] h-[3em] absolute top-4 right-4 text-primary hover:text-black "
+    />
+    <slot />
+  </div>
+</div>
+
+<script is:inline>
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-open-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = document.getElementById(button.dataset.openModal);
+        modal?.classList.remove('opacity-0', 'invisible');
+        modal?.classList.add('opacity-100', 'visible');
+      });
+    });
+
+    document.querySelectorAll('[data-close-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = button.closest('[data-modal-wrapper]');
+        modal?.classList.remove('opacity-100', 'visible');
+        modal?.classList.add('opacity-0', 'invisible');
+      });
+    });
+  });
+</script>
diff --git a/src/components/Search.astro b/src/components/Search.astro
index 84f1ccf83..a044b2073 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -1,23 +1,13 @@
 ---
 import SearchComponent from "astro-pagefind/components/Search";
 import Button from "@ui/Button.astro";
+import Modal from "@components/Modal.astro";
 
 ---
 
-<div class="search-wrapper hidden" style="display: none;">
-
-  <div class="search-header flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
-    <h2 class="text-black text-4xl ml-10 top-[46px] md:top-[85px]">Search<h2/>
-    <Button
-      id="search-close"
-      clear
-      icon="close"
-      iconSize="fa-xl"
-      class="w-[3em] h-[3em] top-[46px] md:top-[85px]"
-    />
-  </div>
-  <div class="modal__overlay"></div>
 
+<Modal id="modal-search">
+  <h2 class="text-xl font-bold mb-2 py-2">Search</h2>
   <SearchComponent
     id="search"
     className="pagefind-ui"
@@ -28,21 +18,24 @@ import Button from "@ui/Button.astro";
       },
     }}
   />
+  </div>
 </div>
+</Modal>
+
 
 <script>
 document.addEventListener("DOMContentLoaded", function () {
-  const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement | null;
   const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
   const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
-  const closeButton = document.querySelector("#search-close") as HTMLElement | null;
   const searchButton = document.getElementById("searchButton") as HTMLElement | null;
+  const openModal = document.querySelector('[data-open-modal="modal-search"]') as HTMLElement;
+  const closeButton = document.querySelector('#search-close') as HTMLElement | null;
 
   let selectedIndex = -1;
 
   function openSearch() {
-    if (searchWrapper) {
-      searchWrapper.style.display = "block";
+    console.log("open");
+    openModal.click();
       if (searchInput) {
         searchInput.value = "Tips";
         const inputEvent = new Event("input", { bubbles: true });
@@ -53,15 +46,11 @@ document.addEventListener("DOMContentLoaded", function () {
         }, 100);
         searchInput.focus();
       }
-    }
   }
 
-  function closeSearch() {
-    if (searchWrapper) {
-      searchWrapper.style.display = "none";
-      selectedIndex = -1;
-    }
-  }
+function closeSearch() {
+  closeButton?.click();
+}
 
   function updateSelection() {
     const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
@@ -99,7 +88,7 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
-  if (searchButton && searchWrapper) {
+  if (searchButton) {
     searchButton.addEventListener("click", openSearch);
   }
 
diff --git a/src/components/header/header-actions.astro b/src/components/header/header-actions.astro
index f7f1d3286..0b2407237 100644
--- a/src/components/header/header-actions.astro
+++ b/src/components/header/header-actions.astro
@@ -24,7 +24,7 @@ const IS_LIVE = false;
         <button
           id="searchButton"
           class="mx-6 md:mx-2"
-            data-open-modal
+            data-open-modal="modal-search"
             aria-label="Search"
             aria-keyshortcuts="Control+K"
           >
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
index ae0417c83..665d35baa 100644
--- a/src/components/ui/Button.astro
+++ b/src/components/ui/Button.astro
@@ -1,6 +1,7 @@
 ---
 import Icon from "@ui/Icon.astro";
 
+// Destructure known props, rest goes into `restProps`
 const {
   url,
   id,
@@ -14,7 +15,8 @@ const {
   iconSvg = false,
   iconRight = true,
   iconSize = "",
-  title="",
+  title = "",
+  ...restProps // all data-*, aria-* and custom attributes
 } = Astro.props;
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
@@ -22,14 +24,13 @@ const resolvedIsExternal = isExternal ?? url?.startsWith("http");
 const baseClasses = "font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
 const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover border-transparent";
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
-const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent"
+const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent";
 const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
 const disabledClasses = "opacity-50 pointer-events-none";
 const iconClasses = "mx-2 ";
-const idName = id;
-const slotContent = await Astro.slots.render('default')
-
 
+const idName = id;
+const slotContent = await Astro.slots.render('default');
 ---
 
 {url ? (
@@ -37,15 +38,16 @@ const slotContent = await Astro.slots.render('default')
     id={idName}
     href={disabled ? undefined : url}
     title={title}
-    aria-label={title ? title : slotContent }
+    aria-label={title ? title : slotContent}
     class={`${baseClasses}
       ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     aria-disabled={disabled}
     {...(resolvedIsExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+    {...restProps}
   >
-    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize}  class={iconClasses} />}
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     <slot />
     {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     {resolvedIsExternal && <Icon name="external-link" svg={iconSvg} size={iconSize} class={iconClasses} />}
@@ -54,15 +56,16 @@ const slotContent = await Astro.slots.render('default')
   <button
     id={idName}
     title={title}
-    aria-label={title ? title : slotContent }
+    aria-label={title ? title : slotContent}
     class={`${baseClasses}
       ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     disabled={disabled}
     aria-disabled={disabled}
+    {...restProps}
   >
-  {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     <slot />
     {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
   </button>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 39218ecdf..3d063112c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,9 +4,12 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Search from "@components/Search.astro";
 
+
 import "@src/styles/global.css";
 import "@src/styles/search.css";
 import "@fontsource-variable/inter";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
 
 export interface Props {
   title: string;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8e846fb93..c1c8b74b3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,7 +20,6 @@ deadlines = deadlines
   title="EuroPython 2025 | July 14th-20th 2025 | Prague, Czech Republic & Remote"
   description="EuroPython is the largest Python conference in Europe. We are looking forward to seeing you in Prague, Czech Republic & Remote from July 14th-20th 2025."
 >
-
   <Hero />
   <Updates />
   <Keynoters />
diff --git a/src/styles/search.css b/src/styles/search.css
index 0452f369b..11c59e733 100644
--- a/src/styles/search.css
+++ b/src/styles/search.css
@@ -1,21 +1,12 @@
 #search {
-  padding: 85px 10px 10px 10px;
+  padding: 10px;
   position: relative;
-  max-height: 80vh;
   width: 100%;
   max-width: 48rem;
   margin: auto;
-  background: #f5e5d6;
-  border-radius: 0.5rem;
-  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
   overflow: auto;
   transition: background ease-out 0.2s;
   z-index: 2;
-  overflow: auto;
-  height: 100%;
-
-  border-bottom: 1px solid #e1e3e6;
-  border-bottom-color: rgb(225, 227, 230);
 }
 
 .pagefind-ui__search-input {
@@ -25,17 +16,17 @@
   padding-inline-end: 0.5rem;
   background-color: #fff;
   font-size: 16px;
-  color: #5f3d1b;
+  color: #000000;
 }
 
 .pagefind-ui__result.selected {
-  background-color: #f5f5f5;
+  background-color: #f8f8f8;
   background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 .pagefind-ui__result:hover {
-  background-color: #f5f5f5;
+  background-color: #f8f8f8;
 }
 .pagefind-ui__message {
   margin: 1em;
@@ -59,13 +50,11 @@
   --pagefind-ui-border: #d8d8d8;
   --pagefind-ui-border-width: 2px;
   --pagefind-ui-border-radius: 0.5rem;
-  /*width: 50%;*/
 }
 .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
   z-index: 9999;
   position: relative;
   overflow: auto;
-  height: 100%;
 }
 .pagefind-ui__result {
   padding: 0 2em 1em !important;
@@ -76,47 +65,3 @@
 .pagefind-ui .pagefind-ui__result-excerpt {
   color: var(--pagefind-ui-text);
 }
-
-.search-header {
-  max-width: 48rem;
-  margin: auto;
-}
-.search-header h2 {
-  position: relative;
-  left: -12px;
-  z-index: 100;
-}
-.modal__overlay {
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.search-wrapper {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  display: block;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 500;
-  box-sizing: border-box;
-  display: none;
-  transition: opacity ease-out 0.2s;
-  background: rgba(116, 116, 116, 0.9);
-  z-index: 100;
-}
-
-#search-close {
-  position: relative;
-  left: -12px;
-  margin: 0;
-  border: 0;
-  transition: opacity ease-out 0.2s;
-  z-index: 10;
-}

From 8464089a4d8c5159056e984678263fee26d6a278 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Tue, 15 Apr 2025 11:42:48 +0200
Subject: [PATCH 09/10] New modal variant with close on outside click.

---
 src/components/Modal.astro  | 23 ++++++++++++++++++++---
 src/components/Search.astro |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal.astro b/src/components/Modal.astro
index bc8382525..71d879989 100644
--- a/src/components/Modal.astro
+++ b/src/components/Modal.astro
@@ -1,17 +1,18 @@
 ---
 import Button from '@ui/Button.astro';
-const { id = 'modal', open = false } = Astro.props;
+const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
 ---
-
 <div
   id={id}
   class={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${
     open ? 'opacity-100 visible bg-black/50' : 'opacity-0 invisible'
   }`}
   data-modal-wrapper
+  data-close-on-outside-click={closeOnOutsideClick.toString()}
 >
   <div
     class="relative bg-white dark:bg-gray-800 p-6 lg:rounded-2xl lg:shadow-xl lg:max-w-4xl lg:mx-4 h-full lg:h-[80vh] w-full lg:w-[70vw] max-h-full overflow-y-auto"
+    data-modal-content
   >
     <Button
       id="search-close"
@@ -24,9 +25,9 @@ const { id = 'modal', open = false } = Astro.props;
     <slot />
   </div>
 </div>
-
 <script is:inline>
   document.addEventListener('DOMContentLoaded', () => {
+    // Open modal buttons
     document.querySelectorAll('[data-open-modal]').forEach(button => {
       button.addEventListener('click', () => {
         const modal = document.getElementById(button.dataset.openModal);
@@ -35,6 +36,7 @@ const { id = 'modal', open = false } = Astro.props;
       });
     });
 
+    // Close modal buttons
     document.querySelectorAll('[data-close-modal]').forEach(button => {
       button.addEventListener('click', () => {
         const modal = button.closest('[data-modal-wrapper]');
@@ -42,5 +44,20 @@ const { id = 'modal', open = false } = Astro.props;
         modal?.classList.add('opacity-0', 'invisible');
       });
     });
+
+    // Close when clicking outside the modal content - only if enabled
+    document.querySelectorAll('[data-modal-wrapper]').forEach(modal => {
+      const closeOnOutsideClick = modal.dataset.closeOnOutsideClick === 'true';
+
+      if (closeOnOutsideClick) {
+        modal.addEventListener('click', (event) => {
+          // Check if the click was on the wrapper but not on the content
+          if (event.target === modal) {
+            modal.classList.remove('opacity-100', 'visible');
+            modal.classList.add('opacity-0', 'invisible');
+          }
+        });
+      }
+    });
   });
 </script>
diff --git a/src/components/Search.astro b/src/components/Search.astro
index a044b2073..f93fa29c5 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -6,7 +6,7 @@ import Modal from "@components/Modal.astro";
 ---
 
 
-<Modal id="modal-search">
+<Modal id="modal-search" closeOnOutsideClick=true>
   <h2 class="text-xl font-bold mb-2 py-2">Search</h2>
   <SearchComponent
     id="search"

From 3fb3a7444006b3a5d51035185d547d2ea47077ed Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Tue, 15 Apr 2025 11:50:02 +0200
Subject: [PATCH 10/10] Prevent body scolling when modal is open.

---
 src/components/Modal.astro | 64 ++++++++++++++++++++++++++++++++++----
 1 file changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal.astro b/src/components/Modal.astro
index 71d879989..18ffc94c0 100644
--- a/src/components/Modal.astro
+++ b/src/components/Modal.astro
@@ -27,12 +27,53 @@ const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
 </div>
 <script is:inline>
   document.addEventListener('DOMContentLoaded', () => {
+    // Function to toggle body scroll
+    const toggleBodyScroll = (disable) => {
+      if (disable) {
+        // Save the current scroll position
+        const scrollY = window.scrollY;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.width = '100%';
+        document.body.dataset.scrollPosition = scrollY.toString();
+      } else {
+        // Restore scroll position
+        const scrollY = parseInt(document.body.dataset.scrollPosition || '0');
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.width = '';
+        window.scrollTo(0, scrollY);
+        delete document.body.dataset.scrollPosition;
+      }
+    };
+
+    // Function to open modal
+    const openModal = (modal) => {
+      if (modal) {
+        // Disable body scroll
+        toggleBodyScroll(true);
+        // Show modal
+        modal.classList.remove('opacity-0', 'invisible');
+        modal.classList.add('opacity-100', 'visible');
+      }
+    };
+
+    // Function to close modal
+    const closeModal = (modal) => {
+      if (modal) {
+        // Enable body scroll
+        toggleBodyScroll(false);
+        // Hide modal
+        modal.classList.remove('opacity-100', 'visible');
+        modal.classList.add('opacity-0', 'invisible');
+      }
+    };
+
     // Open modal buttons
     document.querySelectorAll('[data-open-modal]').forEach(button => {
       button.addEventListener('click', () => {
         const modal = document.getElementById(button.dataset.openModal);
-        modal?.classList.remove('opacity-0', 'invisible');
-        modal?.classList.add('opacity-100', 'visible');
+        openModal(modal);
       });
     });
 
@@ -40,8 +81,7 @@ const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
     document.querySelectorAll('[data-close-modal]').forEach(button => {
       button.addEventListener('click', () => {
         const modal = button.closest('[data-modal-wrapper]');
-        modal?.classList.remove('opacity-100', 'visible');
-        modal?.classList.add('opacity-0', 'invisible');
+        closeModal(modal);
       });
     });
 
@@ -53,11 +93,23 @@ const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
         modal.addEventListener('click', (event) => {
           // Check if the click was on the wrapper but not on the content
           if (event.target === modal) {
-            modal.classList.remove('opacity-100', 'visible');
-            modal.classList.add('opacity-0', 'invisible');
+            closeModal(modal);
           }
         });
       }
+
+      // Initialize any modal that's set to open by default
+      if (modal.classList.contains('opacity-100') && modal.classList.contains('visible')) {
+        toggleBodyScroll(true);
+      }
+    });
+
+    // Handle escape key to close all modals
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        const visibleModals = document.querySelectorAll('[data-modal-wrapper].visible, [data-modal-wrapper].opacity-100');
+        visibleModals.forEach(modal => closeModal(modal));
+      }
     });
   });
 </script>