refactoring component

resources/css/components/previous-next-posts.css

@@ -0,0 +1,97 @@
+.previous-next-posts,
+.previous-next-questions {
+  @apply grid md:grid-cols-2 gap-x-6 gap-y-3 mx-auto max-w-screen-xl px-6 xl:px-24 my-16;
+  &__previous,
+  &__next {
+    @apply flex gap-4 bg-white rounded-lg shadowed !py-4 px-6;
+    transition: all 0.2s ease-out;
+    text-decoration: none !important;
+
+    &:hover {
+      @apply -translate-y-1;
+    }
+  }
+  &__previous {
+    @apply text-left justify-end;
+    &:after {
+      @apply inline-block h-7 w-7 border-2 border-neutral-900 rounded-full shrink-0 ml-auto;
+      content: '';
+      margin-top: auto;
+      margin-bottom: auto;
+      background-image: url('../resources/img/graphic-assets/chevron_right.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 50% 50%;
+    }
+    &:only-child {
+      grid-column: 2;
+    }
+  }
+  &__next {
+    @apply text-right;
+    &:before {
+      @apply inline-block h-7 w-7 border-2 border-neutral-900 rounded-full shrink-0 mr-auto;
+      content: '';
+      margin-top: auto;
+      margin-bottom: auto;
+      background-image: url('../resources/img/graphic-assets/chevron_left.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 50% 50%;
+    }
+  }
+  &__link-content {
+    @apply h-fit pt-1;
+    p {
+      @apply !my-0;
+    }
+  }
+}
+
+.previous-next-questions {
+  &__previous,
+  &__next {
+    .thematique_icon {
+      @apply object-contain
+      w-20 
+      h-20;
+    }
+    .question_type,
+    .question_title {
+      @apply font-bold;
+    }
+    .question_type {
+      @apply mb-1;
+    }
+    .question_title {
+      line-height: 1.4;
+    }
+  }
+}
+
+.post-news-page-container {
+  .previous-next-posts {
+    &__previous,
+    &__next {
+      /* @apply items-center; */
+
+      .post_thumbnail {
+        @apply object-contain
+        rounded-lg
+        w-20 
+        h-20;
+      }
+      .post_denomination,
+      .post_title {
+        @apply font-bold no-underline;
+      }
+      .post_denomination {
+        @apply mb-1 text-secondary;
+      }
+      .post_title {
+        @apply text-neutral-900;
+        line-height: 1.4;
+      }
+    }
+  }
+}