feat: reduce width for blog post

incubateur-ademe · Dec 2, 2024 · aa097ce · aa097ce
1 parent b9957e8
commit aa097ce
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/app/(default)/blog/BlogPosts.tsx b/src/app/(default)/blog/BlogPosts.tsx
@@ -15,7 +15,7 @@ export async function BlogPosts() {
   });
 
   return (
-    <>
+    <div className="max-w-[680px] mx-auto">
       <div className="mb-4 md:mb-8">
         <Link key={firstPost.slug} className="flex flex-col space-y-1 bg-none" href={`/blog/${firstPost.slug}`}>
           {firstPost.frontmatter.image && (
@@ -42,7 +42,7 @@ export async function BlogPosts() {
           <div key={post.slug} className="mb-8">
             <Link className="flex flex-col space-y-1 bg-none" href={`/blog/${post.slug}`}>
               {post.frontmatter.image && (
-                <div className="mb-4 relative w-full h-[400px]">
+                <div className="mb-4 relative w-full h-[300px]">
                   <Image
                     src={post.frontmatter.image}
                     alt="Image de décoration de l'article"
@@ -62,6 +62,6 @@ export async function BlogPosts() {
           </div>
         ))}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/app/(default)/blog/[slug]/page.tsx b/src/app/(default)/blog/[slug]/page.tsx
@@ -74,7 +74,7 @@ export default async function Blog({ params }: Props) {
   const Content = post.content;
 
   return (
-    <>
+    <div className="max-w-[680px] mx-auto">
       <section>
         <script
           type="application/ld+json"
@@ -97,7 +97,7 @@ export default async function Blog({ params }: Props) {
           }}
         />
         {image && (
-          <div className="mb-8 relative w-full h-[500px]">
+          <div className="mb-8 relative w-full h-[400px]">
             <Image src={image} alt="Image de décoration de l'article" fill className="rounded-lg object-cover" />
           </div>
         )}
@@ -111,6 +111,6 @@ export default async function Blog({ params }: Props) {
           <Content />
         </article>
       </section>
-    </>
+    </div>
   );
 }