overriding styles for blog card items in the homepage

Vizzuality · Oct 11, 2023 · 85059b0 · 85059b0
1 parent 4bb4cf4
commit 85059b0
Show file tree

Hide file tree

Showing 5 changed files with 332 additions and 132 deletions.
diff --git a/marketing/package.json b/marketing/package.json
@@ -50,7 +50,7 @@
     "react-use-scroll-direction": "^0.1.0",
     "rooks": "5.10.0",
     "sharp": "0.29.3",
-    "tailwindcss": "3.0.24",
+    "tailwindcss": "3.3.3",
     "yup": "0.32.11"
   },
   "devDependencies": {

diff --git a/marketing/src/components/blog-card/component.tsx b/marketing/src/components/blog-card/component.tsx
@@ -10,7 +10,10 @@ export interface BlogProps {
 
 const BlogCard: FC<BlogProps> = ({ title, description, url, image }: BlogProps) => {
   return (
-    <div className="bg-blue-900 h-96 w-96 border-1 border-solid border-blue-900">
+    <div
+      data-testid="blog-card-item"
+      className="bg-blue-900 h-96 w-96 border-1 border-solid border-blue-900"
+    >
       <a href={url} target="_blank" rel="noreferrer noopener">
         <div className="w-full overflow-hidden">
           <img src={image} alt={title} className="w-full h-[178px] object-cover" />

diff --git a/marketing/src/styles/globals.css b/marketing/src/styles/globals.css
@@ -59,3 +59,16 @@
     }
   }
 }
+
+/* Overriding styles */
+@layer components {
+  div[data-testid="blog-card-item"] p > em {
+    @apply not-italic;
+  }
+  div[data-testid="blog-card-item"] p > strong {
+    @apply font-bold text-white;
+  }
+  div[data-testid="blog-card-item"] p > a {
+    @apply underline text-white;
+  }
+}
diff --git a/marketing/tailwind.config.js b/marketing/tailwind.config.js
@@ -2,7 +2,6 @@
 const forms = require('@tailwindcss/forms');
 const typography = require('@tailwindcss/typography');
 const colors = require('tailwindcss/colors');
-const lineClamp = require('@tailwindcss/line-clamp');
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
@@ -62,5 +61,5 @@ module.exports = {
       },
     },
   },
-  plugins: [forms, typography, lineClamp],
+  plugins: [forms, typography],
 };