feat: improve card style

Author: chenjiahan

src/tool-stack/index.module.scss

@@ -1,5 +1,5 @@
 // L - Large screens: three cards per row
-@media screen and (min-width: 1001px) {
+@media screen and (min-width: 1101px) {
   .tools {
     .tool {
       min-width: calc(33.33% - 21.33px);
@@ -10,7 +10,7 @@
 }
 
 // M - Medium screens: two cards per row
-@media screen and (min-width: 601px) and (max-width: 1000px) {
+@media screen and (min-width: 601px) and (max-width: 1100px) {
   .tools {
     .tool {
       min-width: calc(50% - 16px);
@@ -34,25 +34,27 @@
   html:not(.dark) {
     --rs-tool-stack-shadow-color: #f9f9f9;
     --rs-tool-stack-title-color: #0b0c0e;
-    --rs-tool-stack-desc-color: #6b7075;
+    --rs-tool-stack-desc-color: #8fa1b9;
 
-    --rs-tool-stack-card-stroke: rgba(226, 232, 240, 0.5);
+    --rs-tool-stack-card-stroke: rgba(143, 161, 185, 0.3);
     --rs-tool-stack-card-gradient: linear-gradient(
       135deg,
       rgba(255, 255, 255, 1),
       rgba(249, 249, 249, 0.5)
     );
+    --rs-tools-stack-url-color: #f93920;
   }
   html.dark {
     --rs-tool-stack-shadow-color: #23272f;
     --rs-tool-stack-title-color: white;
-    --rs-tool-stack-desc-color: #c6cacd;
+    --rs-tool-stack-desc-color: #8fa1b9;
     --rs-tool-stack-card-stroke: #23272f;
     --rs-tool-stack-card-gradient: linear-gradient(
       135deg,
       rgba(255, 255, 255, 0),
       rgba(255, 255, 255, 0.03)
     );
+    --rs-tools-stack-url-color: #f93920;
   }
 }
 
@@ -74,43 +76,72 @@
   box-sizing: border-box;
 
   flex-direction: column;
-  align-items: center;
-  gap: 16px;
+  align-items: start;
+  gap: 8px;
   align-self: stretch;
 
   // style
   border-radius: 10px;
   border: 1px solid var(--rs-tool-stack-card-stroke);
   background: var(--rs-tool-stack-card-gradient);
-  box-shadow: 0px -2px 10px 0px var(--rs-tool-stack-shadow-color);
   transition: all 0.2s ease-out;
+
   &:hover {
-    transform: scale3d(1.04, 1.04, 1.04);
+    transform: scale3d(1.03, 1.03, 1.03);
   }
 
   .logo {
-    height: 90px;
+    width: 52px;
+    height: 52px;
+    object-fit: contain;
     flex-shrink: 0;
   }
 
+  .toolContent {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
   .toolTitle {
     color: var(--rs-tool-stack-title-color);
     text-align: center;
 
-    font-size: 22px;
+    font-size: 19px;
     font-style: normal;
     font-weight: 600;
-    line-height: 32px; /* 145.455% */
+    line-height: 24px;
+    margin-top: 4px;
   }
 
   .toolDescription {
     color: var(--rs-tool-stack-desc-color);
-    text-align: center;
+    text-align: left;
+    height: 48px;
 
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
     margin: 0;
   }
+
+  .toolUrl {
+    color: var(--rs-tools-stack-url-color);
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+    width: 100%;
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
 }

src/tool-stack/index.tsx

@@ -14,50 +14,56 @@ export const ToolStack: React.FC<{ lang: string }> = memo(({ lang }) => {
     {
       name: 'Rspack',
       desc: isEn
-        ? 'A high performance JavaScript bundler written in Rust, with a webpack-compatible API'
+        ? 'A high performance JavaScript bundler written in Rust, with webpack-compatible API'
         : '基于 Rust 编写的高性能 JavaScript 打包工具，具备与 webpack 兼容的 API',
       logo: 'https://assets.rspack.dev/rspack/rspack-logo.svg',
       url: 'https://rspack.dev',
+      urlText: 'rspack.dev',
     },
     {
       name: 'Rsbuild',
       desc: isEn
-        ? 'An Rspack-based build tool that provides out-of-the-box setup for enjoyable development experience'
+        ? 'An Rspack-based build tool that provides out-of-the-box setup'
         : '基于 Rspack 的构建工具，包含开箱即用的预设配置，带来愉悦的开发体验',
       logo: 'https://assets.rspack.dev/rsbuild/rsbuild-logo.svg',
       url: 'https://rsbuild.dev',
+      urlText: 'rsbuild.dev',
+    },
+    {
+      name: 'Rslib',
+      desc: isEn
+        ? 'A Rsbuild-based library development tool for creating libraries and UI components'
+        : '基于 Rsbuild 的库开发工具，以简单的方式创建 JavaScript 库和 UI 组件库',
+      logo: 'https://assets.rspack.dev/rslib/rslib-logo.svg',
+      url: 'https://lib.rsbuild.dev',
+      urlText: 'lib.rsbuild.dev',
     },
     {
       name: 'Rspress',
       desc: isEn
-        ? 'A static site generator based on Rsbuild and MDX for creating elegant documentation sites'
-        : '基于 Rsbuild 和 MDX 的静态站点生成器，用于创建优雅的文档站点',
+        ? 'An Rsbuild-based static site generator for creating documentation sites'
+        : '基于 Rsbuild 的静态站点生成器，用于创建优雅的文档站点',
       logo: 'https://assets.rspack.dev/rspress/rspress-logo-480x480.png',
       url: 'https://rspress.dev',
+      urlText: 'rspress.dev',
     },
     {
       name: 'Rsdoctor',
       desc: isEn
-        ? 'A one-stop, intelligent build analyzer that makes the build process transparent, predictable, and optimizable'
-        : '一站式、智能化的构建分析工具，使构建流程变得透明、可预测和可优化',
+        ? 'A one-stop build analyzer that makes the build process transparent'
+        : '一站式的构建分析工具，使构建流程变得透明、可预测和可优化',
       logo: 'https://assets.rspack.dev/rsdoctor/rsdoctor-logo-480x480.png',
       url: 'https://rsdoctor.dev',
-    },
-    {
-      name: 'Rslib',
-      desc: isEn
-        ? 'A Rsbuild-based library development tool for creating JavaScript libraries in a simple and intuitive way'
-        : '基于 Rsbuild 的库开发工具，以简单直观的方式创建 JavaScript 库',
-      logo: 'https://assets.rspack.dev/rslib/rslib-logo.svg',
-      url: 'https://lib.rsbuild.dev',
+      urlText: 'rsdoctor.dev',
     },
     {
       name: 'Rstest',
       desc: isEn
-        ? 'An Rspack-based testing framework that provides comprehensive, first-class support for the Rspack ecosystem'
+        ? 'An testing framework that provides first-class support for Rspack ecosystem'
         : '基于 Rspack 的测试框架，为 Rspack 生态提供全面、一流的支持',
       logo: 'https://assets.rspack.dev/rstest/rstest-logo.svg',
       url: 'https://github.com/web-infra-dev/rstest',
+      urlText: 'web-infra-dev/rstest',
     },
   ];
 
@@ -68,16 +74,16 @@ export const ToolStack: React.FC<{ lang: string }> = memo(({ lang }) => {
         <p className={descStyle}>
           {isEn
             ? 'A unified JavaScript toolchain built around Rspack, with consistent architecture and ultimate performance'
-            : '围绕 Rspack 打造的统一 JavaScript 工具链，一致的底层架构，极致的性能体验'}
+            : '围绕 Rspack 打造的 JavaScript 统一工具链，一致的底层架构，极致的性能体验'}
         </p>
       </div>
       <div className={styles.tools}>
-        {tools.map(({ name, desc, logo, url }) => {
+        {tools.map(({ name, desc, logo, url, urlText }) => {
           return (
             <a
               target="_blank"
               rel="noreferrer"
-              className={styles.tool}
+              className={[styles.tool, styles.rainbow].join(' ')}
               key={name}
               href={url}
             >
@@ -89,6 +95,7 @@ export const ToolStack: React.FC<{ lang: string }> = memo(({ lang }) => {
               />
               <div className={styles.toolTitle}>{name}</div>
               <p className={styles.toolDescription}>{desc}</p>
+              <div className={styles.toolUrl}>{urlText}</div>
             </a>
           );
         })}

stories/index.scss

@@ -53,7 +53,8 @@
 }
 
 :root {
-  --rp-font-family-base: 'Inter var experimental', 'Inter var', -apple-system,
+  --rp-font-family-base:
+    'Open Sans', 'Inter var experimental', 'Inter var', -apple-system,
     BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
     'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --rp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;