[TIDY] run stylelint for the first time and fix config

.gitignore

@@ -19,3 +19,4 @@ hugo.linux
 # End of https://www.toptal.com/developers/gitignore/api/hugo
 
 data/
+/node_modules/

.stylelintignore

@@ -0,0 +1,3 @@
+static/
+public/
+data/

.stylelintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-stylistic/config"
+  ],
+  "plugins": [
+    "stylelint-scss",
+    "stylelint-stylistic"
+  ],
+  "rules": {
+    "media-feature-range-notation": "prefix",
+    "stylistic/max-empty-lines": 2
+  }
+}

CONTRIBUTING.md

@@ -24,3 +24,18 @@ Examples:
 
 - `[TIDY] CI: Move common parts to own job`
 - `Style: Make navbar sticky`
+
+## Style guide
+We use stylelint to lint the (s)css, please run before you commit
+```shell
+(p)npm lint-fix
+```
+### Who to setup
+We would recommend using pnpm. [Install Guide](https://pnpm.io/installation)
+```shell
+pnpm i
+``` 
+You can also use npm if you want
+```shell
+npm i
+```

package.json

@@ -0,0 +1,13 @@
+{
+  "devDependencies": {
+    "stylelint": "^15.11.0",
+    "stylelint-codeguide": "^0.3.2",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-scss": "^5.3.0",
+    "stylelint-stylistic": "^0.4.3"
+  },
+  "scripts": {
+    "lint": "stylelint '**/*.scss' '**/*.css'",
+    "lint-fix": "stylelint '**/*.scss' '**/*.css' --fix"
+  }
+}

themes/ccchh/assets/sass/main.scss

@@ -24,7 +24,6 @@ header {
   h6 {
     margin-bottom: 0;
   }
-
 }
 
 body > footer {
@@ -124,10 +123,9 @@ body>main {
 // Room State in Menu
 #roomstate {
   font-size: 0.9em;
-  line-height: 1.0em;
+  line-height: 1em;
   max-width: 8em;
   padding: 5px;
-
   color: $roomstate_color_unknown;
 
   &.open {
@@ -155,7 +153,6 @@ body>main {
   border-radius: var(--border-radius);
   background: var(--code-background-color);
   padding: 10px 15px;
-
   margin-bottom: var(--typography-spacing-vertical);
 
   header {
@@ -195,6 +192,7 @@ body>main {
     img.groups-img {
       display: block;
       margin: 0 auto;
+
       // (250px - 2*var(--grid-spacing-horizontal)) * 3/4
       max-height: (222px * 3 / 4);
     }
@@ -228,8 +226,6 @@ body>main {
         }
       }
     }
-
-
   }
 }
 
@@ -255,7 +251,6 @@ body>main {
 }
 
 
-
 // Blog Overview: Categories list
 div.nav-aside {
   ul {