.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,10 +24,9 @@ header {
   h6 {
     margin-bottom: 0;
   }
-
 }
 
-body>footer {
+body > footer {
   padding-top: var(--spacing);
   padding-bottom: var(--spacing);
   nav {
@@ -38,7 +37,7 @@ body>footer {
   }
 }
 
-body>main {
+body > main {
   padding-bottom: var(--spacing);
 }
 
@@ -90,12 +89,12 @@ body>main {
       border-radius: 0;
     }
 
-    &:first-child>a {
+    &:first-child > a {
       border-top-left-radius: var(--border-radius);
       border-bottom-left-radius: var(--border-radius);
     }
 
-    &:last-child>a {
+    &:last-child > a {
       border-top-right-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
     }
@@ -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,8 +192,9 @@ body>main {
     img.groups-img {
       display: block;
       margin: 0 auto;
+
       // (250px - 2*var(--grid-spacing-horizontal)) * 3/4
-      max-height: (222px * 3/4);
+      max-height: (222px * 3 / 4);
     }
 
     // 2*250px + 2*var(--spacing) + 1px
@@ -205,7 +203,7 @@ body>main {
 
       img.groups-img {
         // (150px - 2*var(--grid-spacing-horizontal)) * 3/4
-        max-height: (122px*3/4);
+        max-height: (122px * 3 / 4);
       }
     }
 
@@ -215,7 +213,7 @@ body>main {
 
       img.groups-img {
         // (350px - 2*var(--grid-spacing-horizontal)) * 3/4
-        max-height: (322px*3/4);
+        max-height: (322px * 3 / 4);
       }
 
       // 2*350px + 2*var(--spacing) + 1px
@@ -224,12 +222,10 @@ body>main {
 
         img.groups-img {
           // (250px - 2*var(--grid-spacing-horizontal)) * 3/4
-          max-height: (222px*3/4);
+          max-height: (222px * 3 / 4);
         }
       }
     }
-
-
   }
 }
 
@@ -255,7 +251,6 @@ body>main {
 }
 
 
-
 // Blog Overview: Categories list
 div.nav-aside {
   ul {