♻️ Refactor: Autogen classes and use consistent naming

- This should greatly improve consistency
- This mainly targets one of my PRs https://github.com/nunocoracao/blowfish/pull/2211

assets/css/compiled/main.css

@@ -284,18 +284,33 @@ body.zen-mode-enable {
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
+    left: calc(max(-50vw, -800px) + 50%);
+  }
+  .-z-10 {
+    z-index: calc(10 * -1);
+  }
+  .z-2 {
+    z-index: 2;
+  }
   .z-10 {
     z-index: 10;
   }
   .z-30 {
     z-index: 30;
   }
+  .z-80 {
+    z-index: 80;
+  }
+  .z-100 {
+    z-index: 100;
+  }
+  .z-500 {
+    z-index: 500;
+  }
   .z-\[1\] {
     z-index: 1;
   }
-  .z-\[2\] {
-    z-index: 2;
-  }
   .z-\[999\] {
     z-index: 999;
   }
@@ -826,6 +841,12 @@ body.zen-mode-enable {
   .\!mt-0 {
     margin-top: calc(var(--spacing) * 0) !important;
   }
+  .-mt-\[2px\] {
+    margin-top: calc(2px * -1);
+  }
+  .-mt-\[15px\] {
+    margin-top: calc(15px * -1);
+  }
   .mt-0 {
     margin-top: calc(var(--spacing) * 0);
   }
@@ -859,18 +880,21 @@ body.zen-mode-enable {
   .mt-20 {
     margin-top: calc(var(--spacing) * 20);
   }
-  .mt-\[-2px\] {
-    margin-top: -2px;
-  }
   .mt-\[0\.1rem\] {
     margin-top: 0.1rem;
   }
+  .mt-\[0\.5rem\] {
+    margin-top: 0.5rem;
+  }
   .-mr-48 {
     margin-right: calc(var(--spacing) * -48);
   }
   .-mr-\[100\%\] {
     margin-right: calc(100% * -1);
   }
+  .mr-0 {
+    margin-right: calc(var(--spacing) * 0);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -883,6 +907,9 @@ body.zen-mode-enable {
   .mr-5 {
     margin-right: calc(var(--spacing) * 5);
   }
+  .mr-\[10px\] {
+    margin-right: 10px;
+  }
   .mr-auto {
     margin-right: auto;
   }
@@ -934,6 +961,9 @@ body.zen-mode-enable {
   .-ml-12 {
     margin-left: calc(var(--spacing) * -12);
   }
+  .ml-0 {
+    margin-left: calc(var(--spacing) * 0);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -1743,6 +1773,15 @@ body.zen-mode-enable {
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
+  .pt-\[2px\] {
+    padding-top: 2px;
+  }
+  .pt-\[5px\] {
+    padding-top: 5px;
+  }
+  .pr-0 {
+    padding-right: calc(var(--spacing) * 0);
+  }
   .pr-\[24px\] {
     padding-right: 24px;
   }
@@ -1761,6 +1800,12 @@ body.zen-mode-enable {
   .pb-32 {
     padding-bottom: calc(var(--spacing) * 32);
   }
+  .pb-\[3px\] {
+    padding-bottom: 3px;
+  }
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -3698,42 +3743,6 @@ pre {
   height: 0px;
   visibility: hidden;
 }
-.center-relative-left {
-  left: calc(max(-50vw, -800px) + 50%);
-}
-.margin-0 {
-  margin: 0;
-}
-.margin-top-\[-15px\] {
-  margin-top: -15px;
-}
-.margin-top-\[0\.5rem\] {
-  margin-top: 0.5rem;
-}
-.margin-right-\[10px\] {
-  margin-right: 10px;
-}
-.margin-left-\[0px\] {
-  margin-left: 0px;
-}
-.padding-main-menu {
-  padding: 2px 0 3px 0;
-}
-.padding-top-\[5px\] {
-  padding-top: 5px;
-}
-.z-index-\[-10\] {
-  z-index: -10;
-}
-.z-index-80 {
-  z-index: 80;
-}
-.z-index-100 {
-  z-index: 100;
-}
-.z-index-500 {
-  z-index: 500;
-}
 [id^="fn"], [id^="fnref"] {
   scroll-margin-top: 145px;
 }