♻️ Removed padding for headings inside grey boxes (#1407)

* Remove margin on heading inside greybox * Added info, highlight, china, codeauditor, todo * typo in highlight * Update commands in package.json * Refactored tailwind.config file
SSWConsulting · Aug 8, 2024 · 2c217d7 · 2c217d7
1 parent a3a8579
commit 2c217d7
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -9,8 +9,9 @@
     "build:favicons": "node scripts/favicons",
     "build": "yarn run build:dir && yarn run build:favicons && gatsby build --prefix-paths --log-pages && yarn updateRelativePath",
     "build:incremental": "gatsby build --prefix-paths --log-pages && yarn updateRelativePath",
+    "cleandev": "gatsby clean && gatsby develop",
     "devbuild": "gatsby clean && yarn run build:dir && yarn run build:favicons && gatsby build",
-    "develop": "gatsby develop",
+    "dev": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
     "start": "yarn run develop",
     "serve": "gatsby serve",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -50,7 +50,76 @@ module.exports = {
   },
   plugins: [
     plugin(function ({ addUtilities, theme }) {
+      const headingStyles = {
+        marginBottom: theme('margin.heading'),
+        marginTop: theme('margin.heading'),
+        fontWeight: theme('fontWeight.semibold'),
+        lineHeight: theme('lineHeight.heading'),
+      };
+
+      const zeroMarginStyles = {
+        marginTop: '0',
+        marginBottom: '0',
+      };
+
+      const headingSizes = {
+        h1: theme('fontSize.4xl'),
+        h2: theme('fontSize.3xl'),
+        h3: theme('fontSize.2xl'),
+        h4: theme('fontSize.xl'),
+        h5: theme('fontSize.lg'),
+        h6: theme('fontSize.base'),
+      };
+
+      const headingColors = {
+        h1: theme('colors.ssw.red'),
+        h2: theme('colors.ssw.black'),
+        h3: theme('colors.ssw.black'),
+        h4: theme('colors.ssw.black'),
+        h5: theme('colors.ssw.black'),
+        h6: theme('colors.ssw.black'),
+      };
+
+      const commonUtilities = {};
+
+      Object.keys(headingSizes).forEach((tag) => {
+        commonUtilities[tag] = {
+          ...headingStyles,
+          fontSize: headingSizes[tag],
+          color: headingColors[tag],
+        };
+        commonUtilities[`${tag} strong`] = {
+          color: theme('colors.ssw.red'),
+          fontWeight: theme('fontWeight.semibold'),
+        };
+      });
+
+      const containers = [
+        '.greybox',
+        '.info',
+        '.highlight',
+        '.china',
+        '.codeauditor',
+        '.todo',
+      ];
+
+      containers.forEach((container) => {
+        commonUtilities[`${container} > h1:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h1:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h2:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h2:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h3:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h3:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h4:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h4:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h5:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h5:last-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h6:first-child`] = zeroMarginStyles;
+        commonUtilities[`${container} > h6:last-child`] = zeroMarginStyles;
+      });
+
       addUtilities({
+        ...commonUtilities,
         '.hide-scrollbar': {
           'max-height': '44rem',
           'scrollbar-width': 'none',
@@ -61,40 +130,6 @@ module.exports = {
             'linear-gradient(to bottom, transparent, black 8px, black calc(100% - 10px), transparent), linear-gradient(black, black)',
           'mask-size': '100% 100%, 0 100%',
         },
-        'h1, h2, h3, h4, h5, h6': {
-          marginBottom: theme('margin.heading'),
-          marginTop: theme('margin.heading'),
-          fontWeight: theme('fontWeight.semibold'),
-          lineHeight: theme('lineHeight.heading'),
-        },
-        h1: {
-          fontSize: theme('fontSize.4xl'),
-          color: theme('colors.ssw.red'),
-        },
-        h2: {
-          fontSize: theme('fontSize.3xl'),
-          color: theme('colors.ssw.black'),
-        },
-        h3: {
-          fontSize: theme('fontSize.2xl'),
-          color: theme('colors.ssw.black'),
-        },
-        h4: {
-          fontSize: theme('fontSize.xl'),
-          color: theme('colors.ssw.black'),
-        },
-        h5: {
-          fontSize: theme('fontSize.lg'),
-          color: theme('colors.ssw.black'),
-        },
-        h6: {
-          fontSize: theme('fontSize.base'),
-          color: theme('colors.ssw.black'),
-        },
-        'h2 strong, h3 strong, h4 strong, h5 strong, h6 strong': {
-          color: theme('colors.ssw.red'),
-          fontWeight: theme('fontWeight.semibold'),
-        },
       });
     }),
   ],