chore: change posts list styles

7 files changed, 66 insertions, 75 deletions

diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
index b275d63..8039a87 100644
--- a/src/components/PostPreview/PostPreview.module.scss
+++ b/src/components/PostPreview/PostPreview.module.scss
@@ -4,18 +4,25 @@
 .wrapper {
   --icon-size: #{fun.convert-px(20)};
 
-  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
-  border: fun.convert-px(1) solid var(--color-border);
-  border-radius: fun.convert-px(3);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow-light),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow-light),
-    fun.convert-px(4) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-2)
-      var(--color-shadow-light);
+  padding: var(--spacing-2xs) 0 var(--spacing-lg);
   transition: all 0.3s ease-in-out 0s, border 0s;
 
   &:hover {
     --icon-size: #{fun.convert-px(25)};
+
+    a {
+      > svg {
+        :global {
+          animation: pulse 1.5s ease-in-out 0.5s infinite;
+        }
+      }
+
+      &:hover {
+        > svg {
+          animation: none;
+        }
+      }
+    }
   }
 
   &:active {
@@ -28,7 +35,7 @@
   height: fun.convert-px(100);
   margin: 0 auto var(--spacing-sm);
   position: relative;
-  border: fun.convert-px(1) solid var(--color-border);
+  border: fun.convert-px(1) solid var(--color-border-light);
 }
 
 h2.title {
@@ -38,6 +45,19 @@ h2.title {
 
 @include mix.media("screen") {
   @include mix.dimensions("xs") {
+    .wrapper {
+      margin: 0;
+      padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+      border: fun.convert-px(1) solid var(--color-border-light);
+      border-radius: fun.convert-px(3);
+      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+          var(--color-shadow-light),
+        fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1)
+          var(--color-shadow-lighter),
+        fun.convert-px(5) fun.convert-px(5) fun.convert-px(7) fun.convert-px(-1)
+          var(--color-shadow-lighter);
+    }
+
     .read-more {
       font-size: var(--font-size-sm);
     }
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index d427ce7..c0f8062 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -1,3 +1,4 @@
+@use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
@@ -32,9 +33,16 @@
 }
 
 li.item {
-  margin: var(--spacing-md) 0;
+  margin: 0 0 var(--spacing-md) 0;
+  border-bottom: fun.convert-px(1) solid var(--color-border-light);
 
   &:first-of-type {
     margin-top: var(--spacing-sm);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("md") {
+        margin-top: 0;
+      }
+    }
   }
 }
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 544a733..83c1024 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -2,6 +2,7 @@
 
 .wrapper {
   grid-column: 2;
+  margin-top: var(--spacing-lg);
 
   @include mix.media("screen") {
     @include mix.dimensions("md") {
@@ -10,6 +11,7 @@
       align-self: stretch;
       display: flex;
       flex-flow: column nowrap;
+      margin-top: 0;
       position: relative;
       visibility: hidden;
 
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index bee0522..faadd6f 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -12,9 +12,9 @@ import useSWRInfinite from 'swr/infinite';
 import { Button } from '@components/Buttons';
 import { getPublishedPosts } from '@services/graphql/queries';
 import PostHeader from '@components/PostHeader/PostHeader';
-import styles from '@styles/pages/Listing.module.scss';
 import { ThematicsList, TopicsList } from '@components/Widget';
 import Sidebar from '@components/Sidebar/Sidebar';
+import styles from '@styles/pages/Page.module.scss';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const getKey = (pageIndex: number, previousData: PostsListData) => {
@@ -50,16 +50,20 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
         <title>{seo.blog.title}</title>
         <meta name="description" content={seo.blog.description} />
       </Head>
-      <article className={styles.wrapper}>
+      <article
+        className={`${styles.article} ${styles['article--no-comments']}`}
+      >
         <PostHeader title={t`Blog`} />
-        <PostsList data={data} showYears={true} />
-        {hasNextPage && (
-          <Button
-            isDisabled={isLoadingMore}
-            clickHandler={() => setSize(size + 1)}
-            position="center"
-          >{t`Load more?`}</Button>
-        )}
+        <div className={styles.body}>
+          <PostsList data={data} showYears={true} />
+          {hasNextPage && (
+            <Button
+              isDisabled={isLoadingMore}
+              clickHandler={() => setSize(size + 1)}
+              position="center"
+            >{t`Load more?`}</Button>
+          )}
+        </div>
         <Sidebar>
           <ThematicsList title={t`Thematics`} />
           <TopicsList title={t`Topics`} />
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index ece76eb..c8a7b9b 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -13,7 +13,9 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import useSWRInfinite from 'swr/infinite';
-import styles from '@styles/pages/Listing.module.scss';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { ThematicsList, TopicsList } from '@components/Widget';
+import styles from '@styles/pages/Page.module.scss';
 
 const Search: NextPageWithLayout = () => {
   const [query, setQuery] = useState('');
@@ -73,7 +75,9 @@ const Search: NextPageWithLayout = () => {
         <title>{head.title}</title>
         <meta name="description" content={head.description} />
       </Head>
-      <article className={styles.wrapper}>
+      <article
+        className={`${styles.article} ${styles['article--no-comments']}`}
+      >
         <PostHeader title={title} />
         <div className={styles.body}>
           <PostsList data={data} showYears={false} />
@@ -84,6 +88,10 @@ const Search: NextPageWithLayout = () => {
             >{t`Load more?`}</Button>
           )}
         </div>
+        <Sidebar>
+          <ThematicsList title={t`Thematics`} />
+          <TopicsList title={t`Topics`} />
+        </Sidebar>
       </article>
     </>
   );
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
deleted file mode 100644
index db826d7..0000000
--- a/src/styles/pages/Listing.module.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
-  composes: grid from "@styles/layout/_grid.scss";
-  align-items: first baseline;
-  padding-bottom: var(--spacing-xl);
-
-  > header {
-    grid-column: 1 / -1;
-  }
-
-  > div {
-    grid-column: 1 / 3;
-  }
-
-  > button {
-    grid-column: 2;
-  }
-
-  > aside > div {
-    max-height: 100vh;
-    overflow: auto;
-  }
-}
-
-.body {
-  --column-3: 0;
-  --grid-gap: 0;
-
-  grid-column: 2;
-  composes: grid from "@styles/layout/_grid.scss";
-  align-items: first baseline;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      grid-row: 2;
-    }
-  }
-
-  > * {
-    grid-column: 2;
-  }
-}
-
-.list {
-  @extend %reset-ordered-list;
-}
-
-li.item {
-  margin: 0 0 var(--spacing-md) 0;
-}
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index 3ce46d0..69b25c0 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -4,6 +4,7 @@
 
 .article {
   composes: grid from "@styles/layout/_grid.scss";
+  align-items: start;
 
   > header {
     grid-column: 1 / -1;
@@ -44,6 +45,7 @@
 
 li.item {
   margin: 0 0 var(--spacing-md) 0;
+  border-bottom: fun.convert-px(1) solid var(--color-border-light);
 }
 
 .comments {
@@ -60,7 +62,6 @@ li.item {
 }
 
 .aside {
-  align-self: start;
   max-height: 100vh;
   position: sticky;
   top: 0;