refactor(home): prettier tool card list

locales/en.yml

@@ -1,4 +1,5 @@
 home:
   categories:
     newestTools: Newest tools
-
+    allTheTools: All the tools
+    yourFavoriteTools: Your favorite tools

src/components/ToolCard.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import FavoriteButton from './FavoriteButton.vue';
-import { useAppTheme } from '@/ui/theme/themes';
 import type { Tool } from '@/tools/tools.types';
 
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
-
-const appTheme = useAppTheme();
 </script>
 
 <template>
   <router-link :to="tool.path">
-    <c-card class="tool-card">
+    <c-card class="tool-card" shadow>
       <div flex items-center justify-between>
         <n-icon class="icon" size="40" :component="tool.icon" />
         <div flex items-center gap-8px>
@@ -32,15 +29,14 @@ const appTheme = useAppTheme();
           <FavoriteButton :tool="tool" />
         </div>
       </div>
-      <n-h3 class="title">
+      <n-h3 class="title" truncate>
-        <n-ellipsis>{{ tool.name }}</n-ellipsis>
+        {{ tool.name }}
       </n-h3>
 
       <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
+        <div line-clamp-2 style="min-height: 44.78px">
           {{ tool.description }}
-          <br>&nbsp;
+        </div>
-        </n-ellipsis>
       </div>
     </c-card>
   </router-link>
@@ -52,16 +48,14 @@ a {
 }
 
 .tool-card {
-  transition: border-color ease 0.5s;
   border-width: 2px !important;
   color: transparent;
-
+  position: relative;
-  &:hover {
+  border-radius: 15px;
-    border-color: v-bind('appTheme.primary.colorHover');
+  border: none;
-  }
 
   .icon {
-    opacity: 0.6;
+    opacity: 0.4;
     color: v-bind('theme.textColorBase');
   }
 
@@ -74,5 +68,46 @@ a {
     color: v-bind('theme.textColorBase');
     margin: 5px 0;
   }
+
+  &::after {
+    --mask-radius: 20em;
+
+    border-radius: 15px;
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    user-select: none;
+    display: block;
+    height: calc(100% - 4px) ;
+    width:  calc(100% - 4px) ;
+    background: #18a05818;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+
+    -webkit-mask: radial-gradient(
+      var(--mask-radius) var(--mask-radius) at 45px 45px,
+      #000 1%,
+      transparent 50%
+    );
+
+    mask: radial-gradient(
+      var(--mask-radius) var(--mask-radius) at 45px 45px,
+      #000 1%,
+      transparent 50%
+    );
+
+    will-change: mask;
+  }
+
+  &:hover {
+    &::after {
+      --mask-radius: 50em;
+      border: 2px solid #18a058;
+    }
+  }
 }
 </style>

src/pages/Home.page.vue

@@ -1,99 +1,39 @@
 <script setup lang="ts">
-import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
-import ColoredCard from '../components/ColoredCard.vue';
-import ToolCard from '../components/ToolCard.vue';
 import { useToolStore } from '@/tools/tools.store';
-import { config } from '@/config';
 
 const toolStore = useToolStore();
 
 useHead({ title: 'IT Tools - Handy online tools for developers' });
-const { t } = useI18n();
 </script>
 
 <template>
-  <div class="home-page">
+  <div class="home-page" m-auto mt-50px max-w-1800px>
-    <div class="grid-wrapper">
+    <div my-8 />
-      <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi>
-          <ColoredCard title="You like it-tools?" :icon="Heart">
-            Give us a star on
-            <a
-              href="https://github.com/CorentinTh/it-tools"
-              rel="noopener"
-              target="_blank"
-              aria-label="IT-Tools' GitHub repository"
-            >GitHub</a>
-            or follow us on
-            <a
-              href="https://twitter.com/ittoolsdottech"
-              rel="noopener"
-              target="_blank"
-              aria-label="IT-Tools' Twitter account"
-            >Twitter</a>! Thank you
-            <n-icon :component="Heart" />
-          </ColoredCard>
-        </n-gi>
-      </n-grid>
 
-      <transition name="height">
     <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>Your favorite tools</n-h3>
+      <div mb-2 mt-6 text-lg font-semibold>
-          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        {{ $t('home.categories.yourFavoriteTools') }}
-            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
+      </div>
-              <ToolCard :tool="tool" />
+      <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
-            </n-gi>
+        <tool-card v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
-          </n-grid>
+      </div>
     </div>
-      </transition>
 
     <div v-if="toolStore.newTools.length > 0">
-        <n-h3>{{ t('home.categories.newestTools') }}</n-h3>
+      <div mb-2 mt-6 text-lg font-semibold>
-        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        {{ $t('home.categories.newestTools') }}
-          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
+      </div>
-            <ToolCard :tool="tool" />
+      <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
-          </n-gi>
+        <tool-card v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
-        </n-grid>
+      </div>
     </div>
 
-      <n-h3>All the tools</n-h3>
+    <div mb-2 mt-6 text-lg font-semibold>
-      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+      {{ $t('home.categories.allTheTools') }}
-        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
+    </div>
-          <transition>
+    <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
-            <ToolCard :tool="tool" />
+      <tool-card v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
-          </transition>
-        </n-gi>
-      </n-grid>
     </div>
   </div>
 </template>
-
-<style scoped lang="less">
-.home-page {
-  padding-top: 50px;
-}
-
-.n-h3 {
-  margin-bottom: 10px;
-}
-
-::v-deep(.n-grid) {
-  margin-bottom: 30px;
-}
-
-.height-enter-active,
-.height-leave-active {
-  transition: all 0.5s ease-in-out;
-  overflow: hidden;
-  max-height: 500px;
-}
-
-.height-enter-from,
-.height-leave-to {
-  max-height: 42px;
-  overflow: hidden;
-  opacity: 0;
-  margin-bottom: 0;
-}
-</style>