FEATURE introducing comoponent basic styling

resources/css/blocks/chapter-section.css

@@ -1,15 +1,10 @@
 .chapter-section {
   @apply flex items-center justify-between gap-8  2xl:gap-12 !my-0 px-12;
-  /* min-height: 80vh; */
   @apply xl:py-32 2xl:py-48;
   @apply max-w-screen-2xl;
 
   @apply mx-auto;
 
-  /* & + *:not(.simple-screen) {
-		@apply xl:mt-32;
-	} */
-
   h2 {
     @apply title-small;
   }
@@ -19,6 +14,9 @@
   &--right {
     @apply flex-row-reverse;
   }
+  &--has-background {
+    @apply relative !py-12 xl:py-24 !my-12;
+  }
   &__content {
     /* flex-shrink: 0; */
     @apply max-w-3xl;
@@ -51,4 +49,15 @@
       @apply !h-12;
     }
   }
+  &__background {
+    @apply absolute top-0 left-0 w-full h-full;
+    z-index: 1;
+
+    &--right {
+      transform: scaleX(-1);
+    }
+  }
+  > *:not(.chapter-section__background) {
+    z-index: 2;
+  }
 }

resources/css/components/card-revue.css

@@ -1,3 +1,29 @@
 .card-revue {
-  @apply p-12 border border-primary;
+  @apply p-8 border border-primary relative grid gap-6 bg-white;
+  grid-template-columns: 1fr 4fr 40px;
+
+  .content-meta {
+    @apply mb-4;
+    .content-meta__type--revue {
+      @apply text-lg;
+    }
+  }
+  &__title {
+    @apply text-3xl font-bold;
+  }
+  &__date {
+    @apply capitalize pt-3 block;
+  }
+
+  .issue-number {
+    @apply bg-primary text-white w-full h-auto flex items-center justify-center;
+    aspect-ratio: 1/1;
+  }
+
+  &:after {
+    content: '';
+    @apply absolute top-0 left-0 w-full h-full border border-primary;
+    z-index: -1;
+    transform: translate(10px, 10px);
+  }
 }

resources/css/components/revues-grid.css

@@ -1,5 +1,51 @@
 .revues-grid {
+  &__toolbar {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-4 items-center justify-between pb-12;
+
+    h2.revues-count {
+      @apply flex items-end gap-2;
+
+      &__count {
+        @apply font-normal uppercase fjalla;
+        line-height: 0.8;
+      }
+
+      &__text {
+        @apply text-xl nunito;
+      }
+    }
+
+    .search-bar {
+      @apply justify-self-end;
+      input {
+        @apply py-2 px-4 border border-primary rounded-full;
+        &::placeholder {
+          @apply text-sm text-carhop-green-700;
+        }
+      }
+    }
+  }
+  &__toolbar-actions {
+    @apply col-span-2 flex items-center gap-4;
+
+    select {
+      @apply border border-carhop-green-700 rounded-full py-2 px-4;
+    }
+
+    select[name='etiquettes'] {
+      /* @apply bg-blue-300; */
+    }
+
+    select[name='auteurs'] {
+      /* @apply bg-red-300; */
+    }
+
+    select[name='sort_by'] {
+      @apply ml-auto;
+    }
+  }
+
   &__list {
-    @apply grid grid-cols-1 md:grid-cols-2  gap-4;
+    @apply grid grid-cols-1 md:grid-cols-2  gap-8;
   }
 }

tailwind.config.js

@@ -82,6 +82,19 @@ module.exports = {
           900: '#104d69',
           950: '#033249',
         },
+        'carhop-red': {
+          50: '#fcf3f8',
+          100: '#fbe8f2',
+          200: '#f8d2e6',
+          300: '#f4add0',
+          400: '#ec7ab0',
+          500: '#e25291',
+          600: '#d0326f',
+          700: getBaseColor('carhop-red'), // Base Color
+          800: '#951f49',
+          900: '#7c1f3f',
+          950: '#4c0b21',
+        },
       },
       fontSize: tailpress.fontSizeMapper(
         tailpress.theme(

theme.json

@@ -39,6 +39,11 @@
           "slug": "carhop-yellow",
           "color": "#0AD3FF"
         },
+        {
+          "name": "Carhop Red",
+          "slug": "carhop-red",
+          "color": "#ae2154"
+        },
         {
           "name": "Secondary",
           "slug": "secondary",