FEATURE Refining styles

resources/css/pages/single-revues.css

@@ -1,18 +1,20 @@
 .page--single-revue {
   .single-revue__header {
-    @apply bg-carhop-green-700 text-white py-32;
+    @apply bg-purple-50 text-primary py-32;
 
     h1 {
-      @apply text-white uppercase font-medium text-7xl;
+      @apply uppercase font-medium text-7xl;
       line-height: 1.2;
     }
     &__inner {
-      @apply container mx-auto  grid grid-cols-1 md:grid-cols-2 gap-4;
+      @apply container mx-auto  grid  gap-24;
+      grid-template-columns: 1fr 4fr;
     }
 
     .thumbnail-wrapper {
+      @apply bg-red-200;
       img {
-        max-height: 800px;
+        /* max-height: 200px; */
         @apply object-contain;
       }
     }
@@ -32,6 +34,67 @@
         @apply bg-white text-carhop-green-700 px-4 py-2 font-normal h-fit;
       }
     }
+
+    .socials-buttons {
+      @apply flex gap-4;
+      &__button {
+        @apply bg-white text-carhop-green-700 px-4 py-2 font-normal w-32 rounded-full border-primary w-fit border-2 flex items-center gap-2;
+        img {
+          @apply w-8 h-8 filter-primary;
+        }
+      }
+    }
+  }
+
+  .content-wrapper {
+    @apply container mx-auto grid grid-cols-12 gap-12 py-12;
+    grid-template-columns: 1fr 4fr;
+  }
+
+  .sidebar {
+    .search-field {
+      input {
+        @apply border border-primary w-full;
+        @apply w-full p-4;
+      }
+    }
+    .tags__title {
+      @apply text-xl uppercase font-semibold mt-8 my-4 nunito;
+    }
+    .tags-list {
+      @apply flex flex-wrap gap-4;
+    }
+    .article-tag {
+      @apply block;
+    }
+  }
+
+  .revue-content {
+    @apply max-w-screen-2xl mx-auto;
+    .edito {
+      @apply border border-primary p-6 mb-12;
+
+      summary:marker {
+        @apply !hidden !bg-red-400;
+      }
+      &__title {
+        @apply text-4xl font-bold mb-4;
+      }
+      &__content {
+        @apply text-lg;
+      }
+      &__cta {
+        @apply my-4;
+      }
+    }
+    .table-matieres {
+      &__title {
+        @apply text-4xl font-bold mb-12;
+      }
+      .article-grid__list {
+        @apply grid grid-cols-1 gap-4;
+      }
+    }
   }
   article {
     @apply py-12 my-12;