fix: update carousel styles to fix on Ar and En versions

.gitignore

@@ -28,3 +28,4 @@ yarn.lock
 .idea/
 
 /LateX
+.vscode/

.vscode/settings.json

@@ -11,11 +11,18 @@
     "typescript": "typescript"
   },
   "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+    [
+      "cva\\(([^)]*)\\)",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ],
+    [
+      "cn\\(([^)]*)\\)",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ]
   ],
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
-  }
-} 
+  },
+  "git.addAICoAuthor": "off"
+}

src/components/Carousel.astro

@@ -28,7 +28,7 @@ const width = (await Promise.all(images.map(async (image) => await image())))
 const duration = width / speed + 's';
 ---
 
-<div class="carousel">
+<div class="carousel" style={`--duration: ${duration}`}>
   <div>
     {
       [...images, ...images].map((image) => (
@@ -44,49 +44,3 @@ const duration = width / speed + 's';
     }
   </div>
 </div>
-
-<style define:vars={{ duration }}>
-  @reference '../styles/global.css';
-
-  .carousel {
-    @apply overflow-hidden mask-x-from-90%;
-
-    > div {
-      @apply flex flex-row items-center gap-5;
-      animation: move var(--duration) infinite linear;
-    }
-
-    &:hover > div {
-      animation-play-state: paused;
-    }
-  }
-
-  picture {
-    @apply h-auto w-auto flex-shrink-0;
-  }
-
-  @keyframes move {
-    0% {
-      transform: translateX(0);
-    }
-
-    100% {
-      transform: translateX(-50%);
-    }
-  }
-
-  /* RTL support for Arabic and other RTL languages */
-  :global([dir='rtl']) .carousel > div {
-    animation: moveRTL var(--duration) infinite linear;
-  }
-
-  @keyframes moveRTL {
-    0% {
-      transform: translateX(0);
-    }
-
-    100% {
-      transform: translateX(50%);
-    }
-  }
-</style>

src/content/home/ar/workshops.md

@@ -4,7 +4,7 @@ style: dark
 order: 1
 buttons:
   ticket:
-    label: شراء تذكرة
+    label: سجل مجاناً
     url: https://pretix.eu/dojosw
   more:
     label: مزيد من المعلومات

src/content/home/collaborations.md

@@ -2,10 +2,10 @@
 title: Kooperationen
 ---
 
-Sie sind bei einer Schule oder einer anderen Bildungseinrichtung und wollen mit uns kooperieren?
+Du bist bei einer Schule oder einer anderen Bildungseinrichtung und willst mit uns kooperieren?
 
-Schreiben Sie uns eine Mail an [hallo@coderdojo-schoeneweide.de](mailto:hallo@coderdojo-schoeneweide.de).
+Schreibe uns eine Mail an [hallo@coderdojo-schoeneweide.de](mailto:hallo@coderdojo-schoeneweide.de).
 
-Sie möchten wissen, was wir genau anbieten?
+Du möchtest wissen, was wir genau anbieten?
 
-Schauen Sie sich unsere [→ Workshop-Konzepte](./workshops/) an!
+Schau Dir unsere [→ Workshop-Konzepte](./workshops/) an!

src/content/home/en/workshops.md

@@ -4,7 +4,7 @@ style: dark
 order: 1
 buttons:
   ticket:
-    label: Buy ticket
+    label: Free regestration
     url: https://pretix.eu/dojosw
   more:
     label: More info

src/content/home/workshops.md

@@ -4,7 +4,7 @@ style: dark
 order: 1
 buttons:
   ticket:
-    label: Ticket kaufen
+    label: Kostenlos Anmelden
     url: https://pretix.eu/dojosw
   more:
     label: Mehr Infos

src/content/pages/kooperationen.md

@@ -22,10 +22,10 @@ partners:
       name: Partner 8
 ---
 
-Sie sind bei einer Schule oder einer anderen Bildungseinrichtung und wollen mit uns kooperieren?
+Du bist bei einer Schule oder einer anderen Bildungseinrichtung und willst mit uns kooperieren?
 
-Schreiben Sie uns eine Mail an [hallo@coderdojo-schoeneweide.de](mailto:hallo@coderdojo-schoeneweide.de).
+Schreibe uns eine Mail an [hallo@coderdojo-schoeneweide.de](mailto:hallo@coderdojo-schoeneweide.de).
 
-Sie möchten wissen, was wir genau anbieten?
+Du möchtest wissen, was wir genau anbieten?
 
-Schauen Sie sich unsere [→ Workshop-Konzepte](./workshops/) an!
+Schau Dir unsere [→ Workshop-Konzepte](./workshops/) an!

src/styles/global.css

@@ -125,4 +125,46 @@
         @apply flex gap-5 my-5;
     }
 
+    /* Carousel styles */
+    .carousel {
+        @apply overflow-hidden mask-x-from-90%;
+
+        > div {
+            @apply flex flex-row items-center gap-5;
+            animation: move var(--duration) infinite linear;
+        }
+
+        &:hover > div {
+            animation-play-state: paused;
+        }
+    }
+
+    .carousel picture {
+        @apply h-auto w-auto flex-shrink-0;
+    }
+
+    @keyframes move {
+        0% {
+            transform: translateX(0);
+        }
+
+        100% {
+            transform: translateX(-50%);
+        }
+    }
+
+    /* RTL support for Arabic and other RTL languages */
+    [dir='rtl'] .carousel > div {
+        animation: moveRTL var(--duration) infinite linear;
+    }
+
+    @keyframes moveRTL {
+        0% {
+            transform: translateX(0);
+        }
+
+        100% {
+            transform: translateX(50%);
+        }
+    }
 }