fix: grid

components/Post/Box/PostBox.styles.js

@@ -4,11 +4,9 @@ import { getGlobalTransition } from '@/components/GlobalStyle'
 
 export const Article = styled.article`
   background-color: ${({ theme }) => theme.background};
-  border-radius: 5px;
-  border: 1px solid ${({ theme }) => theme.secondary};
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 0.5rem;
   ${getGlobalTransition()}
-  padding: 1rem;
+
   display: flex;
   flex-direction: column;
   cursor: pointer;
@@ -23,8 +21,8 @@ export const Article = styled.article`
 
   span {
     font-weight: 300;
-    font-size: 12.5px;
-    margin-bottom: 0.5rem;
+    font-size: medium;
+    margin: 0.5rem 0;
   }
 
   p {
@@ -39,6 +37,6 @@ export const Article = styled.article`
   }
 
   h2 {
-    margin: 0.5rem 0;
+    font-size: x-large;
   }
 `

components/Post/Box/index.js

@@ -6,7 +6,7 @@ import { DEFAULT_IMAGE_SIZES } from '@/lib/constants'
 
 import { Article } from './PostBox.styles'
 
-const Post = ({ title, date, slug, coverImage, excerpt, isFirst }) => {
+const Post = ({ title, date, slug, coverImage, isFirst }) => {
   const firstPostProperties = {
     loading: 'eager',
     priority: true,
@@ -29,12 +29,11 @@ const Post = ({ title, date, slug, coverImage, excerpt, isFirst }) => {
   return (
     <Link href="/posts/[slug]" as={`/posts/${slug}`}>
       <Article>
-        <span>{dayjs(date).format('DD MMMM YYYY')}</span>
         <Image {...imageProperties} />
+        <span>{dayjs(date).format('DD MMMM YYYY')}</span>
         <a href={`/posts/${slug}`}>
           <h2>{title}</h2>
         </a>
-        <p>{excerpt}</p>
       </Article>
     </Link>
   )

pages/index.js

@@ -46,7 +46,7 @@ const Home = ({ allPosts }) => {
 }
 
 const Container = styled.div`
-  padding: 1rem;
+  padding: 1rem 3rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -62,7 +62,7 @@ const Hero = styled.div`
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  width: 90%;
+  width: 100%;
   margin-bottom: 10rem;
 
   @media (min-width: ${({ theme }) => theme.breakpoints.lg}) {
@@ -88,25 +88,11 @@ const H3 = styled.h3`
 
 const GridLayout = styled.div`
   display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 1.8rem;
+  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+  grid-auto-rows: minmax(20rem, 1fr);
+  grid-gap: 4rem 3rem;
   margin: 1rem auto;
-  max-width: ${({ theme }) => theme.breakpoints.sm};
-
-  @media (min-width: ${({ theme }) => theme.breakpoints.lg}) {
-    grid-template-columns: repeat(2, 1fr);
-    max-width: ${({ theme }) => theme.breakpoints.lg};
-  }
-
-  @media (min-width: ${({ theme }) => theme.breakpoints.xl}) {
-    grid-template-columns: repeat(3, 1fr);
-    max-width: ${({ theme }) => theme.breakpoints.xl};
-  }
-
-  @media (min-width: ${({ theme }) => theme.breakpoints['2xl']}) {
-    grid-template-columns: repeat(4, 1fr);
-    max-width: ${({ theme }) => theme.breakpoints['2xl']};
-  }
+  width: 100%;
 `
 
 export default Home

public/rss/atom.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://blog.dastasoft.com/</id>
     <title>Blog | dastasoft</title>
-    <updated>2023-02-24T16:03:54.900Z</updated>
+    <updated>2023-02-25T00:01:06.627Z</updated>
     <generator>Feed for Node.js</generator>
     <author>
         <name>dastasoft</name>

public/rss/feed.xml

@@ -4,7 +4,7 @@
         <title>Blog | dastasoft</title>
         <link>https://blog.dastasoft.com/</link>
         <description>Learn JavaScript ecosystem with easy step by step articles.</description>
-        <lastBuildDate>Fri, 24 Feb 2023 16:03:54 GMT</lastBuildDate>
+        <lastBuildDate>Sat, 25 Feb 2023 00:01:06 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>Feed for Node.js</generator>
         <image>