build(deps-dev): bump stylelint-config-standard-scss from 6.1.0 to 16.0.0

.github/workflows/lint.yml

@@ -207,6 +207,10 @@ jobs:
         run: |
           yarn
 
+      - name: Check SCSS formatting
+        run: |
+          npx prettier src/scss --check
+
       - name: Lint scss
         run: |
           yarn stylelint '**/*.scss'

.stylelintrc.json

@@ -2,13 +2,10 @@
   "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
   "plugins": ["stylelint-scss"],
   "rules": {
-    "indentation": 2,
     "color-hex-length": "long",
     "color-named": ["always-where-possible"],
     "max-nesting-depth": 6,
     "color-no-invalid-hex": true,
-    "function-parentheses-space-inside": ["never-single-line"],
-    "declaration-colon-newline-after": null,
     "selector-class-pattern": null
   }
 }

package.json

@@ -70,9 +70,9 @@
     "markdownlint-cli": "^0.45.0",
     "prettier": "^3.6.2",
     "remark-kroki": "^0.3.8",
-    "stylelint": "^14.16.1",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-config-standard-scss": "^6.0.0",
-    "stylelint-scss": "^5.3.2"
+    "stylelint": "^16.25.0",
+    "stylelint-config-standard": "^39.0.1",
+    "stylelint-config-standard-scss": "^16.0.0",
+    "stylelint-scss": "^6.12.1"
   }
 }

src/scss/card.scss

@@ -158,7 +158,7 @@
   width: 100%;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .col-md {
     flex: 1 0 0%;
   }
@@ -387,7 +387,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   background: var(--ifm-color-emphasis-800);
   border-radius: 10px;
   color: var(--ifm-color-emphasis-100);

src/scss/community.scss

@@ -50,7 +50,7 @@
   gap: 40px;
   max-width: 800px;
 
-  @media (max-width: 700px) {
+  @media (width <= 700px) {
     flex-flow: column wrap;
     align-items: center;
   }

src/scss/main.scss

@@ -52,7 +52,7 @@ html {
     display: flex;
     flex-direction: row-reverse;
 
-    @media (max-width: 996px) {
+    @media (width <= 996px) {
       position: absolute;
       right: 55px;
       top: 40px;
@@ -101,7 +101,7 @@ html {
   .navbar__items {
     font-size: 18px;
 
-    @media (max-width: 996px) {
+    @media (width <= 996px) {
       flex-direction: row-reverse;
 
       .navbar__brand {
@@ -163,12 +163,12 @@ html {
       flex: 0 0 100%;
       max-width: 100%;
 
-      @media (min-width: 320px) {
+      @media (width >= 320px) {
         flex: 0 0 50%;
         max-width: 50%;
       }
 
-      @media (min-width: 768px) {
+      @media (width >= 768px) {
         flex: 0 0 25%;
         max-width: 25%;
       }
@@ -272,7 +272,7 @@ svg {
   }
 }
 
-@media (max-width: 1400px) {
+@media (width <= 1400px) {
   .breadcrumbs {
     display: none;
   }