fix: overview page style (#229)

Author: JounQin

.changeset/short-pillows-learn.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+fix: overview page style

packages/doom/src/runtime/components/Overview.tsx

@@ -230,24 +230,28 @@ export function Overview(props: {
                 <h3>
                   <Link href={item.link} {...renderInlineMarkdown(item.text)} />
                 </h3>
-                <div className={classes.overviewDescription}>
-                  {item.description}
-                </div>
-                <ul className={classes.overviewList}>
-                  {item.headers?.map((header) => (
-                    <li
-                      key={header.id}
-                      className={`${classes.overviewGroupLi} ${
-                        classes[`level${header.depth}`]
-                      }`}
-                    >
-                      <Link
-                        href={`${item.link}#${header.id}`}
-                        {...renderInlineMarkdown(header.text)}
-                      />
-                    </li>
-                  ))}
-                </ul>
+                {item.description && (
+                  <div className={classes.overviewDescription}>
+                    {item.description}
+                  </div>
+                )}
+                {!item.headers?.length || (
+                  <ul className={classes.overviewList}>
+                    {item.headers.map((header) => (
+                      <li
+                        key={header.id}
+                        className={`${classes.overviewGroupLi} ${
+                          classes[`level${header.depth}`]
+                        }`}
+                      >
+                        <Link
+                          href={`${item.link}#${header.id}`}
+                          {...renderInlineMarkdown(header.text)}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                )}
               </div>
             ))}
           </div>

packages/doom/styles/overview.module.scss

@@ -1,11 +1,31 @@
 :global .overview-index.doom-overview-index {
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 0;
-  padding-right: 0;
+  h2 {
+    letter-spacing: -0.02em;
+    color: var(--rp-c-text-1);
+    border-top: 1px solid var(--rp-c-divider-light);
+    margin: 36px 0;
+    padding-top: 36px;
+    font-size: 24px;
+    transition: color 0.5s;
+
+    &:first-child:before {
+      display: none;
+    }
+  }
+
+  h3 > a {
+    margin: 0;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+    color: var(--rp-c-link);
+    font-size: 18px;
+    font-weight: 600;
+    transition: color 0.5s;
+  }
 
-  h2:first-child:before {
-    display: none;
+  h2,
+  h3 {
+    line-height: 1;
   }
 
   .rp-link:hover {
@@ -15,7 +35,7 @@
 
 .overview-list {
   list-style: none;
-  margin: 0;
+  margin-bottom: 0;
   padding-left: 0;
 }
 
@@ -60,15 +80,19 @@
 
 .overview-group {
   break-inside: avoid;
-  margin-bottom: 28px;
+  margin-bottom: 16px;
   background-color: var(--rp-c-bg-soft);
   border-radius: var(--rp-radius);
-  padding: 28px 32px;
+  padding: 24px;
   transition: background-color 0.5s;
 
   h3 {
     margin-top: 0;
     margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }