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>
     )}