style: reformat and improve CSS structure

- Add Tailwind source scanning for color utilities
- Implement icon masking support
- Reformat CSS for better readability and consistency
- Expand utility definitions into multi-line blocks

src/styles.css

@@ -1,51 +1,63 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+@source inline("bg-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
+
 /* icon */
-icon, pull, pull-2{
+icon,
+pull,
+pull-2 {
     @apply inline-block;
     width: 1.5em;
     height: 1.28em;
     vertical-align: text-bottom;
-    --icon-src: '';
+    --icon-src: "";
     background-image: var(--icon-src);
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
+}
+icon.masked {
     mask-image: var(--icon-src);
     mask-size: contain;
     mask-position: center;
     mask-repeat: no-repeat;
+    background-image: unset;
 }
 icon.big {
     width: 2em;
     height: 2em;
 }
 pull {
-    margin-right: -.5em;
+    margin-right: -0.5em;
     width: 0;
 }
 pull-2 {
     margin-right: -1em;
     width: 0;
 }
-icon.big .icon-label, icon.big .icon-label-stroke{
+icon.big .icon-label,
+icon.big .icon-label-stroke {
     line-height: 2;
 }
-.icon-label, .icon-label-stroke{
+.icon-label,
+.icon-label-stroke {
     position: absolute;
     font-weight: bold;
     text-align: center;
     line-height: 1.28;
-    left: 0; right: 0; top: 0; bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
 }
 .icon-label {
     color: white;
 }
 .icon-label-stroke {
     color: black;
-    -webkit-text-stroke: .14em black;
+    -webkit-text-stroke: 0.14em black;
 }
 
 /* prose */
@@ -55,8 +67,8 @@ icon.big .icon-label, icon.big .icon-label-stroke{
     code {
         background: #0001;
         @apply rounded;
-        padding: .2em .4em;
-        margin: 0 .2em;
+        padding: 0.2em 0.4em;
+        margin: 0 0.2em;
         &::before,
         &::after {
             content: none;
@@ -78,8 +90,7 @@ icon.big .icon-label, icon.big .icon-label-stroke{
     @apply hidden;
 }
 
-.markdown-alert-title + *
-{
+.markdown-alert-title + * {
     @apply mt-0;
 }
 
@@ -109,9 +120,21 @@ icon.big .icon-label, icon.big .icon-label-stroke{
 
 /* cols */
 
-.cols{ @apply lg:flex lg:gap-4; }
-.col{ @apply lg:flex-1; }
-.col-2{ @apply lg:flex-2; }
-.col-3{ @apply lg:flex-3; }
-.col-4{ @apply lg:flex-4; }
-.col-5{ @apply lg:flex-5; }
+.cols {
+    @apply lg:flex lg:gap-4;
+}
+.col {
+    @apply lg:flex-1;
+}
+.col-2 {
+    @apply lg:flex-2;
+}
+.col-3 {
+    @apply lg:flex-3;
+}
+.col-4 {
+    @apply lg:flex-4;
+}
+.col-5 {
+    @apply lg:flex-5;
+}