fix(games): card fixes; colors + width

polylan_submitter/src/Games.vue

@@ -31,7 +31,7 @@ onMounted(async () => {
 
 <template>
   <div class="flex-1 bg-base-300 flex justify-center px-4 py-12">
-    <div class="w-full max-w-6xl">
+    <div class="w-full max-w-7xl">
       <!-- Header -->
       <div class="text-center mb-12">
         <h1 class="text-5xl font-bold mb-4">{{ t("games.title") }}</h1>
@@ -47,7 +47,7 @@ onMounted(async () => {
         {{ t("games.empty") }}
       </p>
 
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8">
         <SteamStoreCard v-for="game in games" :key="game.id" :game="game" />
       </div>
     </div>

polylan_submitter/src/Home.vue

@@ -53,7 +53,7 @@ onMounted(async () => {
 
 <template>
   <div class="flex-1 bg-base-300 flex items-center justify-center px-4">
-    <div class="w-full max-w-6xl">
+    <div class="w-full max-w-7xl">
       <!-- Header -->
       <div class="text-center mb-12">
         <h1 class="text-5xl font-bold mb-4">{{ t("home.title") }}</h1>

polylan_submitter/src/components/SteamStoreCard.vue

@@ -20,41 +20,41 @@ const isDiscounted = computed(() => hasPrice.value && props.game.discount_percen
 
 <template>
   <div
-    class="steam-card flex flex-col overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2 hover:scale-[1.05]">
+    class="card card-xl bg-base-200 hover:bg-base-100 overflow-hidden shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2 hover:scale-[1.05]">
     <a :href="game.store_url" target="_blank" rel="noopener noreferrer">
       <img :src="game.header_image" :alt="game.name" loading="lazy"
         class="w-full aspect-[460/215] object-cover" />
     </a>
 
-    <div class="flex flex-col flex-1 min-w-0 p-6 gap-3">
+    <div class="card-body min-w-0">
       <a :href="game.store_url" target="_blank" rel="noopener noreferrer"
-        class="steam-title text-2xl font-semibold truncate hover:underline">
+        class="card-title text-2xl block truncate hover:underline">
         {{ t("games.buy", { game: game.name }) }}
       </a>
-      <p v-if="game.short_description" class="steam-text line-clamp-3">
+      <p v-if="game.short_description" class="text-sm text-base-content/70 line-clamp-3">
         {{ game.short_description }}
       </p>
 
-      <div class="mt-auto pt-2 flex flex-wrap justify-end gap-2">
+      <div class="mt-auto pt-2 flex flex-wrap sm:flex-nowrap justify-end gap-2 whitespace-nowrap">
         <!-- Opens the Steam client: launches the game if installed, offers to install it otherwise -->
         <a :href="`steam://run/${game.steam_app_id}`"
           class="steam-play rounded-sm px-5 py-2 flex items-center gap-1">
           <i class="mdi mdi-play"></i>
           {{ t("games.play") }}
         </a>
-        <div class="steam-purchase flex items-stretch rounded-sm overflow-hidden">
+        <div class="bg-base-300 flex items-stretch rounded-sm overflow-hidden">
           <template v-if="game.is_free">
-            <span class="steam-price px-3 py-2 flex items-center">{{ t("games.free") }}</span>
+            <span class="px-3 py-2 flex items-center">{{ t("games.free") }}</span>
           </template>
           <template v-else-if="hasPrice">
             <span v-if="isDiscounted" class="steam-discount px-3 flex items-center text-xl font-medium">
               -{{ game.discount_percent }}%
             </span>
-            <span class="steam-price px-3 flex flex-col justify-center leading-tight">
+            <span class="px-3 flex flex-col justify-center leading-tight">
-              <span v-if="isDiscounted" class="steam-original text-xs line-through">
+              <span v-if="isDiscounted" class="text-base-content/50 text-xs line-through">
                 {{ formatPrice(game.price_initial!) }}
               </span>
-              <span :class="{ 'steam-discounted': isDiscounted }">{{ formatPrice(game.price_final!) }}</span>
+              <span :class="{ 'text-success font-medium': isDiscounted }">{{ formatPrice(game.price_final!) }}</span>
             </span>
           </template>
           <a :href="game.store_url" target="_blank" rel="noopener noreferrer"
@@ -69,45 +69,12 @@ const isDiscounted = computed(() => hasPrice.value && props.game.discount_percen
 </template>
 
 <style scoped>
-/* Steam store palette, on purpose regardless of the site theme */
+/* Steam palette for the purchase buttons, the card itself follows the site theme */
-.steam-card {
-  background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
-}
-
-/* Lightens on hover, like the homepage cards' hover:bg-base-100 */
-.steam-card:hover {
-  background: linear-gradient(135deg, #22344a 0%, #335672 100%);
-}
-
-.steam-title {
-  color: #ffffff;
-}
-
-.steam-text {
-  color: #c6d4df;
-}
-
-.steam-purchase {
-  background: rgba(0, 0, 0, 0.2);
-}
-
 .steam-discount {
   background: #4c6b22;
   color: #beee11;
 }
 
-.steam-price {
-  color: #c6d4df;
-}
-
-.steam-original {
-  color: #738895;
-}
-
-.steam-discounted {
-  color: #beee11;
-}
-
 .steam-button {
   color: #d2efa9;
   background: linear-gradient(to right, #75b022 5%, #588a1b 95%);