fix some bugs with ::after and ::before

Author: bjohansebas

apps/site/components/Common/Preview/index.module.css

@@ -2,6 +2,7 @@
 
 .root {
   @apply @container/preview
+    after:bg-gradient-radial
     relative
     flex
     aspect-[1.90/1]
@@ -12,32 +13,39 @@
     bg-neutral-950;
 
   &::after {
-    @apply bg-gradient-radial
+    @apply @md/preview:blur-3xl
       absolute
       inset-0
       m-auto
       aspect-square
       w-1/3
       rounded-full
       blur-2xl
-      content-['']
-      @md/preview:blur-3xl;
+      content-[''];
+  }
 
-    &.announcements {
-      @apply from-green-700/90;
-    }
+  &.announcements {
+    @apply after:from-green-700/90;
+  }
 
-    &.release {
-      @apply from-info-600/90;
-    }
+  &.release {
+    @apply after:from-info-600/90;
+  }
 
-    &.vulnerability {
-      @apply from-warning-600/90;
-    }
+  &.vulnerability {
+    @apply after:from-warning-600/90;
   }
 
   .container {
-    @apply z-10
+    @apply @sm/preview:text-base
+      @md/preview:gap-6
+      @md/preview:text-lg
+      @lg/preview:gap-8
+      @lg/preview:text-xl
+      @xl/preview:gap-12
+      @xl/preview:text-2xl
+      @2xl/preview:text-3xl
+      z-10
       mx-auto
       flex
       w-2/3
@@ -47,37 +55,29 @@
       text-center
       text-xs
       font-semibold
-      text-white
-      @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl;
+      text-white;
 
     .hexagon {
-      @apply absolute
-        inset-0
-        m-auto
-        size-full
-        @md/preview:h-3/5
+      @apply @md/preview:h-3/5
         @md/preview:w-3/5
         @lg/preview:h-2/3
         @lg/preview:w-2/3
         @xl/preview:h-3/5
         @xl/preview:w-3/5
         @2xl/preview:h-2/3
-        @2xl/preview:w-2/3;
+        @2xl/preview:w-2/3
+        absolute
+        inset-0
+        m-auto
+        size-full;
     }
 
     .logo {
-      @apply mx-auto
-        size-6
-        @md/preview:size-14
+      @apply @md/preview:size-14
         @lg/preview:size-16
-        @xl/preview:size-20;
+        @xl/preview:size-20
+        mx-auto
+        size-6;
     }
   }
 }

apps/site/components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css

@@ -14,41 +14,42 @@
       -left-1
       flex
       flex-col
-      gap-2;
+      gap-2
+      after:bg-neutral-200
+      dark:after:bg-neutral-800;
 
     &::after {
       @apply absolute
-        top-0
         left-[0.45rem]
+        top-0
         z-10
         h-full
         w-px
-        bg-neutral-200
-        content-['']
-        dark:bg-neutral-800;
+        content-[''];
     }
 
     a {
+      @apply first:before:bg-white
+        last:after:bg-white
+        first:dark:before:bg-neutral-950
+        last:dark:after:bg-neutral-950;
+
       &:first-child::before {
         @apply absolute
           bottom-[calc(50%+0.25rem)]
           left-0
           h-20
           w-4
-          bg-white
-          content-['']
-          dark:bg-neutral-950;
+          content-[''];
       }
 
       &:last-child::after {
         @apply absolute
-          top-[calc(50%+0.25rem)]
           left-0
+          top-[calc(50%+0.25rem)]
           h-20
           w-4
-          bg-white
-          content-['']
-          dark:bg-neutral-950;
+          content-[''];
       }
     }
   }