feat: resembles the design

Author: eriandev

src/components/Card.astro

@@ -19,12 +19,12 @@ const techsGridAlign = 'grid grid-rows-2 gap-y-3'
 const techsFlexAlign = 'flex flex-wrap items-center justify-between'
 const levelSearchLink = `https://www.frontendmentor.io/challenges?difficulty=${level}&sort=difficulty%7Casc`
 const cardShadowClass =
-  'before:pointer-events-none before:absolute before:top-0 before:z-10 before:h-24 before:w-full before:rounded-t-2xl before:bg-[linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0))] before:content-[""]'
+  'before:pointer-events-none before:absolute before:top-0 before:z-10 before:h-24 before:w-full before:bg-[linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0))] before:content-[""]'
 ---
 
 <article class:list={['relative overflow-hidden rounded-2xl border border-gray-300 bg-white', cardShadowClass]}>
   <Link to={link} class="block overflow-hidden">
-    <Picture {source} alt={title} width={384} height={266} class="transition-colorize rounded-t-2xl" />
+    <Picture {source} alt={title} width={384} height={266} class="transition-zooming" />
   </Link>
 
   <section class="p-6 sm:px-4 md:px-6 xl:p-10">

src/components/LevelTag.astro

@@ -10,19 +10,26 @@ const LEVELS = ['newbie', 'junior', 'intermediate', 'advanced', 'guru']
 const levelColor = LEVELS[level - 1]
 const bgColor = 'bg-' + levelColor
 const textColor = 'text-' + levelColor
+const borderColor = 'border-' + levelColor
 ---
 
 <div
   class:list={[
-    'flex h-max w-max items-center rounded-lg border text-xs font-bold leading-5 md:text-sm md:leading-6',
-    'border-' + levelColor,
+    borderColor,
+    'flex h-max w-max items-center rounded-md border text-xs font-bold leading-5 md:text-sm md:leading-6',
     extraClass
   ]}
 >
-  <span class={`block h-full rounded-l-lg ${bgColor} px-2 text-white md:px-3`}>
+  <span class:list={[
+    bgColor,
+    'block h-full rounded-l-sm px-2 text-white md:px-3'
+  ]}>
     {level}
   </span>
-  <span class={`block px-1.5 uppercase ${textColor} md:px-3`}>
+  <span class:list={[
+    textColor,
+    'block px-1.5 uppercase md:px-3'
+  ]}>
     {levelColor}
   </span>
 </div>

src/layouts/Layout.astro

@@ -14,31 +14,31 @@ import Header from '@/components/Header.astro'
         font-weight: 500;
         font-style: normal;
         font-display: swap;
-        src: url('/fonts/barlow-500.woff2') format('woff2');
+        src: url('/frontendmentor/fonts/barlow-500.woff2') format('woff2');
       }
 
       @font-face {
         font-family: 'Barlow';
         font-weight: 500;
         font-style: italic;
         font-display: swap;
-        src: url('/fonts/barlow-500-italic.woff2') format('woff2');
+        src: url('/frontendmentor/fonts/barlow-500-italic.woff2') format('woff2');
       }
 
       @font-face {
         font-family: 'Barlow';
         font-weight: 700;
         font-style: normal;
         font-display: swap;
-        src: url('/fonts/barlow-700.woff2') format('woff2');
+        src: url('/frontendmentor/fonts/barlow-700.woff2') format('woff2');
       }
 
       @font-face {
         font-family: 'Barlow';
         font-weight: 700;
         font-style: italic;
         font-display: swap;
-        src: url('/fonts/barlow-700-italic.woff2') format('woff2');
+        src: url('/frontendmentor/fonts/barlow-700-italic.woff2') format('woff2');
       }
     </style>
   </head>

tailwind.config.ts

@@ -65,13 +65,20 @@ const config: Config = {
           }
         },
 
-        '@media screen and (pointer: fine)': {
+        '@media (pointer: fine)': {
           '.transition-colorize': {
             filter: 'grayscale(100%)',
-            transition: 'transform 300ms, filter 300ms ease-in-out',
+            transition: 'filter 300ms ease-in-out',
+
+            '&:hover': {
+              filter: 'grayscale(0)'
+            }
+          },
+
+          '.transition-zooming': {
+            transition: 'transform 300ms ease-in-out',
 
             '&:hover': {
-              filter: 'grayscale(0)',
               transform: 'scale(1.05)'
             }
           }