docs: fix Overview component style

Author: 9aoy

website/theme/components/ConfigOverview.module.scss

@@ -1,44 +1,45 @@
 .root {
-  margin-top: 36px;
-
-  h2 {
-    font-size: 23px;
-    font-weight: 600;
-    line-height: 1;
-    margin: 0 0 20px;
-    padding-top: 0;
-    border-top: 0;
-    color: var(--rp-c-text-1);
-    transition: color 0.5s;
-  }
+  margin-top: 32px;
 
-  ul a {
-    letter-spacing: -0.01em;
-    margin-bottom: 1em;
-    transition: color 0.5s;
+  ul {
+    list-style: none;
+    padding-left: 0;
     margin: 0;
+  }
+
+  a {
     font-size: 15px;
-    font-weight: 500;
-    line-height: 2.2;
     margin-top: 8px;
     color: var(--rp-c-text-code);
     opacity: 0.9;
-    transition: color 0.5s;
+    transition: color 0.3s;
     word-break: break-all;
   }
 
   a:hover {
-    transition: color 0.5s;
-    color: var(--rp-c-brand-dark);
+    color: var(--rp-c-link);
   }
 }
 
+.title {
+  font-size: 21px;
+  font-weight: 600;
+  line-height: 1;
+  margin: 4px 0 20px;
+  color: var(--rp-c-text-1);
+}
+
+.title a {
+  font-size: 21px;
+  color: var(--rp-c-link);
+}
+
 .group {
   break-inside: avoid;
   margin-bottom: 28px;
   background-color: var(--rp-c-bg-soft);
   border-radius: 12px;
-  padding: 28px 32px;
+  padding: 24px 28px;
   transition: background-color 0.5s;
 }
 
@@ -51,13 +52,11 @@
 @media (min-width: 768px) {
   .root {
     columns: 2;
-    min-width: 648px;
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1300px) {
   .root {
     columns: 3;
-    min-width: 904px;
   }
 }

website/theme/components/ConfigOverview.tsx

@@ -66,7 +66,7 @@ export default function Overview() {
   const Nodes = OVERVIEW_GROUPS.map((group) => (
     <div key={group.name} className={styles.overviewGroups}>
       <div className={styles.group}>
-        <h2>{group.name}</h2>
+        <div className={styles.title}>{group.name}</div>
         <ul>
           {group.items?.map((item) => (
             <li key={item}>
@@ -127,9 +127,9 @@ export function BuildOverview() {
   const Nodes = BUILD_OVERVIEW_GROUPS.map((group) => (
     <div key={group.name} className={styles.overviewGroups}>
       <div className={styles.group}>
-        <h2>
-          <Link href={tUrl(`/config/build/${group.name}`)}> {group.name}</Link>
-        </h2>
+        <div className={styles.title}>
+          <Link href={tUrl(`/config/build/${group.name}`)}>{group.name}</Link>
+        </div>
         <ul>
           {group.items?.map((item) => (
             <li key={item}>