feat: update margin

memset0 · Nov 3, 2023 · 95f8f27 · 95f8f27
1 parent 81aed0e
commit 95f8f27
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Article/ArticleList.js b/src/components/Article/ArticleList.js
@@ -11,6 +11,8 @@ import CardMedia from "@mui/material/CardMedia";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 
+import { isNegativeIndentTitleRequired } from "../../utils/frontend";
+
 const renderAst = new rehypeReact({
   createElement: React.createElement,
 }).Compiler;
@@ -41,7 +43,7 @@ const ArticleList = ({ posts }) => {
           <Card sx={{ mt: 2, display: "flex" }} key={post.node.id}>
             <Grid container direction="row-reverse">
               {/* 封面 */}
-              <Grid item sx={12} md={5}>
+              <Grid item xs={12} md={5}>
                 <GatsbyLink
                   to={post.node.fields.slug}
                   style={{ color: "inherit" }}
@@ -69,18 +71,31 @@ const ArticleList = ({ posts }) => {
               </Grid>
 
               {/* 内容 */}
-              <Grid item sx={12} md={hasCover ? 7 : 12}>
+              <Grid item xs={12} md={hasCover ? 7 : 12}>
                 <Box
-                  sx={{
+                  style={{
                     display: "flex",
                     flexDirection: "column",
                   }}
                 >
-                  <CardContent sx={{ flex: "1 0 auto" }}>
-                    <Typography component="div" variant="h6">
+                  <CardContent style={{ flex: "1 0 auto" }}>
+                    <Typography
+                      component="div"
+                      variant="h6"
+                      sx={{
+                        textIndent: isNegativeIndentTitleRequired(
+                          post.node.frontmatter.title
+                        )
+                          ? "-0.5em"
+                          : 0,
+                      }}
+                    >
                       <GatsbyLink
                         to={post.node.fields.slug}
-                        style={{ textDecoration: "none", color: "inherit" }}
+                        style={{
+                          textDecoration: "none",
+                          color: "inherit",
+                        }}
                       >
                         {post.node.frontmatter.title}
                       </GatsbyLink>

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -110,7 +110,7 @@ const Layout = ({ children, title, maxWidth }) => {
               aria-label="open drawer"
               onClick={isDesktop ? toggleDrawer : toggleMobileDrawer}
               sx={{
-                marginRight: "36px",
+                marginRight: { xs: "12px", md: "24px" },
               }}
             >
               <MenuIcon

diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -50,8 +50,10 @@ const BlogPostTemplate = ({
                   sx={{
                     mt: 0.5,
                     mb: 1,
-                    ml: isNegativeIndentTitleRequired(post.frontmatter.title)
-                      ? -0.75
+                    textIndent: isNegativeIndentTitleRequired(
+                      post.frontmatter.title
+                    )
+                      ? "-0.75rem"
                       : 0,
                     fontSize: { lg: "1.7rem" },
                   }}