style: added clamp

Author: emmanuelubachi

style/globals.css

@@ -4,12 +4,12 @@
 
 @layer base {
   :root {
-    /*  LAYOUT */
-    /* 100% of root, 5rem to 1rem, screen 1440 - 320 */
-    --section-block-padding: clamp(2rem, 4.286vw + 1.143rem, 5rem);
+    /*  Clamps */
+    /* 100% of root, 5rem to 2rem, screen 1440 - 320 */
+    --clamp_5-2: clamp(2rem, 4.286vw + 1.143rem, 5rem);
 
     /* 100% of root, 4rem to 1rem, screen 1440 - 320 */
-    --section-inline-padding: clamp(1rem, 4.286vw + 0.143rem, 4rem);
+    --clamp_4-1: clamp(1rem, 4.286vw + 0.143rem, 4rem);
 
     /* TYPOGRAPHY */
     /* 100% of root, desktop 4rem, mobile 2.5rem, screen 1440 - 320  */
@@ -84,7 +84,7 @@
 
   /*  LAYOUT */
   section {
-    @apply px-section_x py-section_y;
+    @apply px-clamp_4-1 py-clamp_5-2;
   }
 
   .section_container {

tailwind.config.ts

@@ -29,10 +29,9 @@ const config: Config = {
 
     extend: {
       padding: {
-        section_x: 'var(--section-inline-padding)',
-        section_y: 'var(--section-block-padding)',
-        section_card_offset:
-          'calc(var(--section-block-padding) + var(--card-offset))'
+        'clamp_5-2': 'var(--clamp_5-2)',
+        'clamp_4-1': 'var(--clamp_4-1)',
+        section_card_offset: 'calc(var(--clamp_5-2) + var(--card-offset))'
       },
       margin: {
         card_offset: 'var(--card-offset)'