Add better stars, add page aboue venue, add city photos

Author: clytaemnestra

public/krakow/Florianska-Kosciol-Mariacki-M6B4280.jpg

@@ -0,0 +1,175 @@
+---
+// Animated starfield background component
+// Creates a twinkling star effect with two layers of stars
+// that move, scale, rotate, and change opacity
+---
+
+<div class="animated-stars">
+  <slot />
+</div>
+
+<style>
+  .animated-stars {
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+  }
+
+  .animated-stars::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:
+      radial-gradient(1px 1px at 10% 20%, white, transparent),
+      radial-gradient(1px 1px at 30% 40%, white, transparent),
+      radial-gradient(1px 1px at 50% 60%, white, transparent),
+      radial-gradient(1px 1px at 70% 30%, white, transparent),
+      radial-gradient(1px 1px at 90% 80%, white, transparent),
+      radial-gradient(1px 1px at 15% 70%, white, transparent),
+      radial-gradient(1px 1px at 40% 15%, white, transparent),
+      radial-gradient(1px 1px at 60% 85%, white, transparent),
+      radial-gradient(1px 1px at 85% 50%, white, transparent),
+      radial-gradient(1px 1px at 25% 90%, white, transparent);
+    background-size:
+      200px 200px,
+      250px 250px,
+      300px 300px,
+      180px 180px,
+      220px 220px,
+      280px 280px,
+      240px 240px,
+      260px 260px,
+      290px 290px,
+      210px 210px;
+    background-position:
+      0 0,
+      40px 60px,
+      130px 270px,
+      70px 100px,
+      220px 180px,
+      300px 320px,
+      150px 80px,
+      280px 380px,
+      100px 200px,
+      350px 250px;
+    background-repeat: repeat;
+    animation: twinkle1 45s ease-in-out infinite;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .animated-stars::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:
+      radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,0.8), transparent),
+      radial-gradient(1px 1px at 45% 35%, white, transparent),
+      radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.7), transparent),
+      radial-gradient(2px 2px at 80% 25%, white, transparent),
+      radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.9), transparent),
+      radial-gradient(1px 1px at 55% 45%, white, transparent);
+    background-size:
+      300px 300px,
+      200px 200px,
+      250px 250px,
+      280px 280px,
+      220px 220px,
+      240px 240px;
+    background-position:
+      0 0,
+      50px 80px,
+      100px 150px,
+      200px 50px,
+      150px 200px,
+      250px 100px;
+    background-repeat: repeat;
+    animation: twinkle2 60s ease-in-out infinite;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .animated-stars > :global(*) {
+    position: relative;
+    z-index: 1;
+  }
+
+  @keyframes twinkle1 {
+    0% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+    15% {
+      opacity: 0.4;
+      transform: translate(25px, -15px) scale(1.1);
+    }
+    30% {
+      opacity: 0.8;
+      transform: translate(-20px, 30px) scale(0.9);
+    }
+    45% {
+      opacity: 0.3;
+      transform: translate(30px, 20px) scale(1.05);
+    }
+    60% {
+      opacity: 0.9;
+      transform: translate(-25px, -25px) scale(0.95);
+    }
+    75% {
+      opacity: 0.5;
+      transform: translate(15px, 35px) scale(1.08);
+    }
+    90% {
+      opacity: 0.7;
+      transform: translate(-30px, -10px) scale(0.92);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes twinkle2 {
+    0% {
+      opacity: 0.8;
+      transform: translate(0, 0) rotate(0deg);
+    }
+    20% {
+      opacity: 0.3;
+      transform: translate(-30px, 20px) rotate(5deg);
+    }
+    35% {
+      opacity: 0.9;
+      transform: translate(25px, -25px) rotate(-3deg);
+    }
+    50% {
+      opacity: 0.4;
+      transform: translate(-15px, -30px) rotate(7deg);
+    }
+    65% {
+      opacity: 0.7;
+      transform: translate(35px, 15px) rotate(-5deg);
+    }
+    80% {
+      opacity: 0.5;
+      transform: translate(-20px, 28px) rotate(4deg);
+    }
+    100% {
+      opacity: 0.8;
+      transform: translate(0, 0) rotate(0deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animated-stars::before,
+    .animated-stars::after {
+      animation: none;
+    }
+  }
+</style>

public/krakow/Lato, ul. Kanonicza, Wawel_M6B0798-fot. Ela Marchewka.jpg

@@ -12,7 +12,7 @@ import links from "@data/links.json";
   id="navbar"
 >
   <div
-    class="container max-w-[1150px] mx-auto px-6 py-2 mt-12 lg:p-2 lg:mt-14 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
+    class="container max-w-[1150px] mx-auto px-6 py-2 mt-4 lg:p-2 lg:mt-6 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
   >
     <input
       type="checkbox"

public/krakow/Noc, Bulwary Wiślane, Ludwinów_M6B0476-fot. Ela Marchewka_horizontal.jpg

@@ -5,5 +5,5 @@ interface Props {
 ---
 
 <a href="/" class="home-link block min-w-[44px] min-h-[44px]" aria-label="Go to homepage by clicking the logo">
-  <img class="md:block block w-[44px] h-[44px]" src="/EuroPython2025_logo.png" alt="EuroPython logo" />
+  <img class="md:block block w-[44px] h-[44px]" src="/eps-logo.svg" alt="EuroPython Society logo" />
 </a>