feat: add card for Rstest and polish styles (#36)

Author: chenjiahan

src/built-with-rspack/index.module.scss

@@ -17,12 +17,14 @@
 // S
 @media screen and (max-width: 600px) {
   .title {
-    font-size: 32px !important;
+    font-size: 30px !important;
     line-height: 48px !important;
   }
+
   .innerContainer {
     background-size: 100% 100% !important;
-    padding: 26px 0px 0px 0px !important;
+    padding: 48px 0px 0px 0px !important;
+
     &::before {
       width: 300px !important;
       height: 300px !important;
@@ -47,7 +49,7 @@
 
   box-sizing: border-box;
 
-  padding: 32px;
+  padding: 64px 48px;
   flex-direction: column;
   justify-content: center;
   align-items: center;

src/fully-featured/index.module.scss

@@ -102,7 +102,7 @@
       .featureDescription {
         color: var(--rs-fully-featured-desc-color, #6b7075);
 
-        font-size: 15px;
+        font-size: 14px;
         font-style: normal;
         font-weight: 400;
         line-height: 23.8px; /* 158.667% */

src/section-style/shared.module.scss

@@ -5,23 +5,13 @@
 // M 601 - 834
 // S < 601
 
-// XXL
-@media screen and (min-width: 1441px) {
-  .container {
-    padding: 96px 144px !important;
-  }
-  .titleAndDesc {
-    padding: 0px 144px 32px 144px !important;
-  }
-}
-
 // XL
-@media screen and (min-width: 1281px) and (max-width: 1440px) {
+@media screen and (min-width: 1281px) {
   .container {
     padding: 96px 144px !important;
   }
   .titleAndDesc {
-    padding: 0px 144px 32px 144px !important;
+    padding: 0px 144px 36px 144px !important;
   }
 }
 
@@ -31,24 +21,28 @@
     padding: 80px 80px !important;
   }
   .titleAndDesc {
-    padding: 0px 16px !important;
+    padding: 0px 16px 32px !important;
   }
 }
 
 // M
 @media screen and (min-width: 601px) and (max-width: 834px) {
   .container {
     padding: 64px 32px !important;
+
     .innerContainer {
       gap: 16px !important;
     }
   }
+
   .titleAndDesc {
-    padding: 0px 16px !important;
+    padding: 0px 16px 32px !important;
     gap: 16px !important;
+
     .title {
       font-size: 32px !important;
     }
+
     .desc {
       font-size: 16px !important;
       line-height: 28px !important;
@@ -92,7 +86,7 @@
     flex-direction: column;
     width: 100%;
 
-    max-width: 1440px;
+    max-width: 1296px;
   }
 }
 

src/tool-stack/index.module.scss

@@ -1,49 +1,60 @@
-// M
-@media screen and (min-width: 601px) and (max-width: 1000px) {
+// L - Large screens: three cards per row
+@media screen and (min-width: 1101px) {
   .tools {
-    & > :nth-child(1),
-    & > :nth-child(2) {
-      max-width: 60% !important;
-      min-width: 40% !important;
-      width: 50%;
+    .tool {
+      min-width: calc(33.33% - 21.33px);
+      max-width: calc(33.33% - 21.33px);
+      flex: 0 0 calc(33.33% - 21.33px);
     }
-    & > .tool:not(:nth-child(-n + 2)) {
-      min-width: 30% !important;
-      max-width: 33% !important;
+  }
+}
+
+// M - Medium screens: two cards per row
+@media screen and (min-width: 601px) and (max-width: 1100px) {
+  .tools {
+    .tool {
+      min-width: calc(50% - 16px);
+      max-width: calc(50% - 16px);
+      flex: 0 0 calc(50% - 16px);
     }
   }
 }
 
-// S
+// S - Small screens: one card per row
 @media screen and (max-width: 600px) {
   .tools {
     flex-direction: column;
+    .tool {
+      width: 100%;
+    }
   }
 }
 
 :global {
   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;
   }
 }
 
@@ -52,7 +63,7 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 32px;
 }
 
 .tool {
@@ -61,46 +72,76 @@
 
   display: flex;
   flex: 1 1 0;
-  padding: 24px 16px;
+  padding: 24px;
   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);
   }
 }