docs: fix design documentation style (#42954)

* feat: optimize size layout

* feat: optimize site layout

* feat: optimize site layout

.dumi/theme/common/GlobalStyles.tsx

@@ -15,6 +15,7 @@ import {
   Responsive,
   SearchBar,
 } from './styles';
+import InlineCard from './styles/InlineCard';
 
 const GlobalStyles = () => (
   <>
@@ -29,6 +30,7 @@ const GlobalStyles = () => (
     <Responsive />
     <NProgress />
     <PreviewImage />
+    <InlineCard />
     <ColorStyle />
     <HeadingAnchor />
     <SearchBar />

.dumi/theme/common/styles/InlineCard.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { css, Global } from '@emotion/react';
+
+export default () => (
+  <Global
+    styles={css`
+      .design-inline-cards {
+        display: flex;
+        margin: 0 -20px;
+      }
+      .design-inline-cards > * {
+        flex: 10%;
+        margin: 0 20px;
+      }
+      .design-inline-cards img {
+        width: 100%;
+        max-width: 100%;
+      }
+      .design-inline-cards h4 {
+        margin-bottom: 0;
+      }
+    `}
+  />
+);