enabled Biome CSS formatter and linter, applied

biome.json

@@ -42,6 +42,18 @@
       "attributePosition": "multiline"
     }
   },
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space"
+    },
+    "linter": {
+      "enabled": true
+    },
+    "parser": {
+      "cssModules": true
+    }
+  },
   "overrides": [
     {
       "include": [

src/styles/css-config/base.css

@@ -1,6 +1,6 @@
 html {
-  font-family: "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
+  font-family: "Rubik Variable", Inter, system-ui, Avenir,
-    sans-serif;
+    Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.272;
   font-weight: 400;

src/styles/docs/nav/nav-tree.css

@@ -11,7 +11,9 @@
     align-items: center;
     gap: 0.3em;
 
-    & svg { color: hsl(var(--text)) }
+    & svg {
+      color: hsl(var(--text));
+    }
   }
 }
 

src/styles/docs/nav/search.css

@@ -265,20 +265,10 @@
 
 /* default styles */
 site-search {
-  --shadow-lg:
+  --shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px
-    0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(
+    hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33),
-      0,
+    0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px
-      0%,
+    hsla(0, 0%, 0%, 0.25);
-      0%,
-      0.1
-    ),
-    0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(
-      0,
-      0%,
-      0%,
-      0.75
-    ),
-    0px 4px 2px hsla(0, 0%, 0%, 0.25);
   display: contents;
 }
 

src/styles/docs/toc/toc.css

@@ -25,7 +25,7 @@
   font-size: 1.614rem;
   max-height: 500px;
 
-  &>svg {
+  & > svg {
     height: 100%;
     width: 24px;
   }
@@ -56,8 +56,7 @@
       display: none;
     }
 
-    transition: width 0.3s ease,
+    transition: width 0.3s ease, padding 0.3s ease;
-    padding 0.3s ease;
 
     &.shown {
       & .toc-content {
@@ -123,7 +122,7 @@
       list-style: none;
 
       &.active {
-        &>.toc_a {
+        & > .toc_a {
           color: hsl(var(--green) 72 60);
         }
       }

src/styles/global.css

@@ -146,10 +146,12 @@ footer {
     left: -1rem;
     height: 1px;
     width: calc(100% + 1rem);
-    background: linear-gradient(90deg,
+    background: linear-gradient(
-        transparent 0%,
+      90deg,
-        hsl(var(--footer-bkg-border)) 50%,
+      transparent 0%,
-        transparent 100%);
+      hsl(var(--footer-bkg-border)) 50%,
+      transparent 100%
+    );
   }
 
   & a {

src/styles/main-page.css

@@ -176,10 +176,12 @@
   &:nth-child(1),
   &:nth-child(2) {
     &::before {
-      background: linear-gradient(115deg,
+      background: linear-gradient(
-          hsla(var(--green) 20 15 / 0.7) 25%,
+        115deg,
-          hsla(var(--green) 25 25 / 0.8) 50%,
+        hsla(var(--green) 20 15 / 0.7) 25%,
-          hsla(var(--green) 60 60 / 0.6) 80%);
+        hsla(var(--green) 25 25 / 0.8) 50%,
+        hsla(var(--green) 60 60 / 0.6) 80%
+      );
     }
 
     &:hover {
@@ -194,10 +196,12 @@
   &:nth-child(3),
   &:nth-child(4) {
     &::before {
-      background: linear-gradient(115deg,
+      background: linear-gradient(
-          hsla(var(--blue) 10 15 / 0.7) 25%,
+        115deg,
-          hsla(var(--blue) 15 25 / 0.8) 50%,
+        hsla(var(--blue) 10 15 / 0.7) 25%,
-          hsla(var(--blue) 60 60 / 0.6) 80%);
+        hsla(var(--blue) 15 25 / 0.8) 50%,
+        hsla(var(--blue) 60 60 / 0.6) 80%
+      );
     }
 
     &:hover {