REFACTOR: Add new CSS variables and enhance content box styles

resources/css/app.css

@@ -130,6 +130,7 @@
 @import './blocks/variants.css';
 @import './blocks/statistiques-collections.css';
 @import './blocks/reportages-list.css';
+@import './blocks/wp-block-group.css';
 
 /* ########### COMPOSITIONS ############ */
 @import './compositions/nos-collections.css';

resources/css/base/variables.css

@@ -0,0 +1,3 @@
+:root {
+  --content-box-max-width: 1280px;
+}

resources/css/blocks/content-box.css

@@ -5,10 +5,16 @@
 .content-box {
   @apply relative px-2 md:px-8;
 
+  @apply px-container-x;
+
   &--variant-framed {
     @apply border border-carhop-green-600;
   }
 
+  &--variant-nude {
+    @apply px-0;
+  }
+
   &--variant-backgrounded {
     background-color: var(--content-box-background-color, transparent);
   }
@@ -114,10 +120,31 @@
   }
 
   &__innerblocks {
-    @apply mx-auto px-4 md:px-8;
+    @apply mx-auto;
+    /* @apply px-4 md:px-8 ; */
+
+    max-width: 1280px;
+
     > :not(.alignwide):not(.alignfull) {
-      @apply max-w-screen-lg mx-auto;
+      @apply max-w-screen-lg mx-auto ;
     }
+
+    .alignwide {
+    }
+    /* .alignfull {
+      max-width: 100vw;
+    } */
+  }
+
+  &.alignwide .content-box__innerblocks {
+    max-width: 1280px;
+  }
+  &.alignfull .content-box__innerblocks {
+    /* max-width: 1280px; */
+  }
+
+  &--variant-nude .content-box__innerblocks {
+    @apply px-0;
   }
   &.alignwide .content-box__innerblocks {
     > :not(.alignfull) {

resources/css/blocks/wp-block-group.css

@@ -0,0 +1,10 @@
+.wp-block-group {
+  .wp-block-columns {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .carhop-heading {
+    @apply pb-6;
+  }
+}

resources/css/layout/gutenberg.css

@@ -54,8 +54,16 @@ article > *:not(.entry-content),
     }
   }
 
+  > .wp-block-group,
   > .wp-block-columns {
-    @apply !my-24;
+    @apply !my-16;
+  }
+
+  > .wp-block-group + .wp-block-group,
+  > .wp-block-columns + .wp-block-columns,
+  > .wp-block-group + .wp-block-columns,
+  > .wp-block-columns + .wp-block-group {
+    @apply !mt-0;
   }
 }
 .wp-singular.page {
@@ -94,9 +102,30 @@ article > *:not(.entry-content),
 .content-box {
   &__innerblocks {
     .block-editor-inner-blocks {
-      max-width: 960px !important;
+      max-width: 1280px !important;
+
+      .block-editor-inner-blocks {
+        @apply mx-0;
+      }
+
+      .wp-block {
+        max-width: 960px !important;
+        @apply mx-auto;
+      }
+      .wp-block.alignwide {
+        max-width: 1280px !important;
+      }
     }
   }
+  &.alignwide .block-editor-inner-blocks {
+    max-width: 1280px !important;
+  }
+  .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+    /* @apply mx-auto; */
+  }
+  .block-editor-inner-blocks .alignwide {
+    max-width: 1280px !important;
+  }
 }
 
 details {

tailwind.config.js

@@ -92,8 +92,11 @@ module.exports = {
           950: '#4c0b21',
         },
       },
+      spacing: {
+        'container-x': '1.5rem',
+      },
       fontSize: tailpress.fontSizeMapper(
-        tailpress.theme('settings.typography.fontSizes', theme)
+        tailpress.theme('settings.typography.fontSizes', theme),
       ),
       letterSpacing: {
         bigbig: '3px',