Unification

src/components/Card.svelte

@@ -22,6 +22,7 @@
     import {onMount} from "svelte";
 
     let cardElement: HTMLDivElement;
+    export let hoverEffect: boolean = true;
 
     function rotateElement(event: MouseEvent) {
         const x = event.clientX;
@@ -47,7 +48,7 @@
     $: classes = twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses)
 </script>
 
-<div class={classes} bind:this={cardElement} on:mousemove={rotateElement} on:mouseleave={resetElement}>
+<div class={classes} bind:this={cardElement} on:mousemove={rotateElement} on:mouseleave={resetElement} class:hoverEffect>
     <slot></slot>
 </div>
 
@@ -57,20 +58,16 @@
 
       transition: scale 300ms cubic-bezier(.2, 3, .67, .6);
 
-      &:hover {
-        scale: 105%;
-      }
-
       :global(h1) {
         @apply text-xl font-bold mt-4;
       }
 
-      :global(p) {
-        @apply mt-4;
-      }
-
       :global(svg) {
         @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
       }
     }
+
+    .hoverEffect:hover {
+      scale: 105%;
+    }
 </style>

src/components/Navbar.svelte

@@ -60,8 +60,7 @@
                     <CaretDownOutline class="ml-2 mt-auto"/>
                 </button>
                 <div>
-                    <a class="btn btn-gray my-1"
-                       href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
+                    <a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
                     <a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
                     <a class="btn btn-gray" href={l("/publics")}>{t("navbar.links.home.publics")}</a>
                     <a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>

src/components/PostComponent.astro

@@ -5,31 +5,38 @@ import {astroI18n} from "astro-i18n";
 import {Image} from "astro:assets";
 import TagComponent from "./TagComponent.astro";
 import P from "./P.astro";
+import Card from "@components/Card.svelte";
 
 interface Props {
     post: CollectionEntry<"announcements">
 }
 
 const { post } = Astro.props as Props;
+
+const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
 ---
 
-<a href={l(`/announcements/${post.slug.split("/").slice(1).join("/")}`)}>
+<Card extraClasses="w-full items-start mx-0" hoverEffect={false}>
     <div class="p-4 flex flex-row">
         {post.data.image != null
             ? (
-                <div class="flex-shrink-0 pr-2">
-                    <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
-                </div>
+                <a href={postUrl}>
+                    <div class="flex-shrink-0 pr-2">
+                        <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
+                    </div>
+                </a>
             )
             : null}
         <div>
-            <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
-            <P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
-                day: "numeric",
-                month: "long",
-                year: "numeric",
-            }).format(post.data.created)}</P>
-            <P>{post.data.description}</P>
+            <a href={postUrl} class="flex flex-col items-start">
+                <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
+                <P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
+                    day: "numeric",
+                    month: "long",
+                    year: "numeric",
+                }).format(post.data.created)}</P>
+                <P>{post.data.description}</P>
+            </a>
             <div class="mt-1" transition:name={post.data.title + "-tags"}>
                 {post.data.tags.map((tag) => (
                     <TagComponent tag={tag} />
@@ -37,4 +44,4 @@ const { post } = Astro.props as Props;
             </div>
         </div>
     </div>
-</a>
+</Card>

src/components/TagComponent.astro

@@ -13,10 +13,10 @@ const {tag, noLink} = Astro.props;
 
 {noLink
     ? (
-        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 shadow-2xl">{capitalize(tag)}</span>
+        <span class="inline-block bg-gray-800 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 shadow-2xl">{capitalize(tag)}</span>
     )
     : (
         <a href={l(`/announcements/tags/${tag}`)}>
-            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 shadow-2xl">{capitalize(tag)}</span>
+            <span class="inline-block bg-gray-800 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 shadow-2xl">{capitalize(tag)}</span>
         </a>
     )}

src/content/publics/frostbite.json

@@ -4,6 +4,6 @@
   "id": 123,
   "creator": ["Test", "Test2"],
   "gamemode": "wargear",
-  "image": "../../images/2024-03-24_20.59.03.png",
-  "xray": "../../images/2024-03-24_20.59.59.png"
+  "image": "../../images/area_render_2_.png",
+  "xray": "../../images/area_render_1_.png"
 }

src/pages/ankuendigungen/index.astro

@@ -47,12 +47,9 @@ const tags = await getTags();
             <TagComponent tag={tag} transition:name={`${tag}-tag-filter`} />
         ))}
     </div>
-    <hr>
     {posts.map((post, index) => (
         <div>
             <PostComponent post={post}/>
-            {index !== posts.length - 1 &&
-                        <hr/>}
         </div>
     ))}
 </PageLayout>

src/pages/ankuendigungen/tags/[tag].astro

@@ -63,12 +63,9 @@ const {posts, tag} = Astro.props;
             <TagComponent tag={tag} noLink="true" transition:name={`${tag}-tag-filter`}/>
         </a>
     </div>
-    <hr>
     {posts.map((post, index) => (
         <div>
             <PostComponent post={post}/>
-            {index !== posts.length - 1 &&
-                        <hr/>}
         </div>
     ))}
 </PageLayout>

src/pages/index.astro

@@ -117,19 +117,19 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
             <Card client:idle>
                 <Archive heigth="64" width="64"/>
                 <h1>{t("home.benefits.historic.title")}</h1>
-                <p>{t("home.benefits.historic.description.1")}</p>
-                <p>{t("home.benefits.historic.description.2")}</p>
+                <p class="mt-4">{t("home.benefits.historic.description.1")}</p>
+                <p class="mt-4">{t("home.benefits.historic.description.2")}</p>
             </Card>
             <Card client:idle>
                 <Rocket heigth="64" width="64"/>
                 <h1>{t("home.benefits.server.title")}</h1>
-                <p>{t("home.benefits.server.description")}</p>
+                <p class="mt-4">{t("home.benefits.server.description")}</p>
             </Card>
             <Card client:idle>
                 <Bell heigth="64" width="64"/>
                 <h1>{t("home.benefits.events.title")}</h1>
-                <p>{t("home.benefits.events.description.1")}</p>
-                <p>{t("home.benefits.events.description.2")}</p>
+                <p class="mt-4">{t("home.benefits.events.description.1")}</p>
+                <p class="mt-4">{t("home.benefits.events.description.2")}</p>
             </Card>
         </div>
         <a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}

src/pages/publics/index.astro

@@ -16,7 +16,7 @@ const publics = await getCollection("publics");
                 <Card extraClasses="w-full mx-0">
                     <div class="flex justify-center">
                         <XRayPreview client:load>
-                            <Image slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
+                            <Image style="width: 500px" slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
                             {pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
                         </XRayPreview>
                     </div>