fix: enhance Card component styling

Author: Phosphorus-M

Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-version = "0.2.9"
+version = "0.2.10"
 name = "rustlanges-components"
 description = "RustLangES components library"
 edition = "2024"
@@ -13,7 +13,7 @@ leptos = ["leptos-components"]
 
 [workspace]
 members = [ "crates/core", "crates/leptos" ]
-package = { version = "0.2.9" }
+package = { version = "0.2.10" }
 
 [workspace.dependencies]
 components-core = { package = "rustlanges-components-core", version = "0.2", path = "./crates/core" }

crates/leptos/src/card.rs

@@ -28,8 +28,8 @@ pub fn Card(
 
         return view! {
             <div class={class}>
-                <svg viewBox="0 0 334 444" fill="none" xmlns="http://www.w3.org/2000/svg" class="drop-shadow-resource-card">
-                    <path d="M267.221 2C275.589 2 283.519 5.74306 288.838 12.2038L325.617 56.8794C329.744 61.892 332 68.1829 332 74.6756V414C332 429.464 319.464 442 304 442H30C14.536 442 2 429.464 2 414V30C2 14.536 14.536 2 30 2H267.221Z" fill="#3D3D3D" stroke="black" stroke-width="2"/>
+                <svg viewBox="0 0 334 444" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-primary-50 dark:text-neutral-900">
+                    <path d="M267.221 2C275.589 2 283.519 5.74306 288.838 12.2038L325.617 56.8794C329.744 61.892 332 68.1829 332 74.6756V414C332 429.464 319.464 442 304 442H30C14.536 442 2 429.464 2 414V30C2 14.536 14.536 2 30 2H267.221Z" fill="currentColor" stroke-width="2"/>
                 </svg>
                 <div class="rustlanges-card--resource-body">
                 {children()}

js/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rustlanges/react",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "exports": {
     ".": {

js/showcase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rustlanges/showcase",
   "private": true,
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "exports": {
     ".": {

js/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rustlanges/vue",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "exports": {
     ".": {

styles/components/card.css

@@ -22,9 +22,14 @@
   }
 
   .rustlanges-card--resource > svg {
-    filter: drop-shadow(0px 0px 0px #000000) drop-shadow(4px 4px 0px #000000)
-      url(#inset-shadow);
-    @apply h-auto w-full;
+    filter: drop-shadow(0px 0px 0px #000000) drop-shadow(4px 4px 0px #000000);
+    @apply h-auto w-full stroke-[#000000];
+  }
+
+  .rustlanges-card--resource:hover > svg {
+    /* change the drop shadow color on hover but applying primary-500 */
+    filter: drop-shadow(0px 0px 0px var(--color-primary-500)) drop-shadow(4px 4px 0px var(--color-primary-500));
+    @apply stroke-primary-500;
   }
 
   .rustlanges-card--resource-body {

styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rustlanges/styles",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "exports": {
     ".": "./tailwindcss.css",
@@ -32,7 +32,7 @@
     "directory": "styles"
   },
   "scripts": {
-    "build": "npx @tailwindcss/cli -i tailwindcss.css -o dist/bundled.css --minify"
+    "build": "npx @tailwindcss/cli -i tailwindcss.css -o /var/mnt/Basura/Projects/RustLangES.github.io/node_modules/@rustlanges/styles/dist/bundled.css --minify"
   },
   "peerDependencies": {
     "tailwindcss": "^4.1.8"

styles/theme.css

@@ -1,6 +1,7 @@
 @theme static {
   /* ----- Breakpoints ----- */
-  --breakpoint-desktop: 640px;
+  --breakpoint-tablet: 40rem;
+  --breakpoint-desktop: 80rem;
 
   /* ------ Colors ------ */
   --color-primary-50: #fff6ed;
@@ -96,6 +97,10 @@
   --text-body-bold--font-weight: 500;
   --text-body-bold--letter-spacing: 0em;
   --text-body-bold--line-height: 20px;
+  --text-heading-4: 16px;
+  --text-heading-4--font-weight: 400;
+  --text-heading-4--letter-spacing: 0em;
+  --text-heading-4--line-height: 28px;
   --text-heading-3: 18px;
   --text-heading-3--font-weight: 500;
   --text-heading-3--letter-spacing: 0em;
@@ -118,6 +123,7 @@
   --font-caption-bold: Inter;
   --font-body: Inter;
   --font-body-bold: Inter;
+  --font-heading-4: Inter;
   --font-heading-3: Inter;
   --font-heading-2: Inter;
   --font-heading-1: Inter;

styles/utilities/container.css

@@ -1,29 +0,0 @@
-@utility container {
-  padding-left: 16px;
-  padding-right: 16px;
-
-  @media (width >= theme(--breakpoint-sm)) {
-    padding-left: calc((100vw + 16px - 640px) / 2);
-    padding-right: calc((100vw + 16px - 640px) / 2);
-  }
-
-  @media (width >= theme(--breakpoint-md)) {
-    padding-left: calc((100vw + 16px - 768px) / 2);
-    padding-right: calc((100vw + 16px - 768px) / 2);
-  }
-
-  @media (width >= theme(--breakpoint-lg)) {
-    padding-left: calc((100vw + 16px - 1024px) / 2);
-    padding-right: calc((100vw + 16px - 1024px) / 2);
-  }
-
-  @media (width >= theme(--breakpoint-xl)) {
-    padding-left: calc((100vw + 16px - 1280px) / 2);
-    padding-right: calc((100vw + 16px - 1280px) / 2);
-  }
-
-  @media (width >= theme(--breakpoint-2xl)) {
-    padding-left: calc((100vw + 16px - 1536px) / 2);
-    padding-right: calc((100vw + 16px - 1536px) / 2);
-  }
-}