Compare commits

...

2 commits

7 changed files with 1288 additions and 15 deletions

1
.gitignore vendored
View file

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

3
.stylelintignore Normal file
View file

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

14
.stylelintrc.json Normal file
View file

@ -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
}
}

View file

@ -24,3 +24,18 @@ Examples:
- `[TIDY] CI: Move common parts to own job` - `[TIDY] CI: Move common parts to own job`
- `Style: Make navbar sticky` - `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
```

13
package.json Normal file
View file

@ -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"
}
}

1232
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load diff

View file

@ -24,10 +24,9 @@ header {
h6 { h6 {
margin-bottom: 0; margin-bottom: 0;
} }
} }
body>footer { body > footer {
padding-top: var(--spacing); padding-top: var(--spacing);
padding-bottom: var(--spacing); padding-bottom: var(--spacing);
nav { nav {
@ -38,7 +37,7 @@ body>footer {
} }
} }
body>main { body > main {
padding-bottom: var(--spacing); padding-bottom: var(--spacing);
} }
@ -90,12 +89,12 @@ body>main {
border-radius: 0; border-radius: 0;
} }
&:first-child>a { &:first-child > a {
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius);
border-bottom-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-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
} }
@ -124,10 +123,9 @@ body>main {
// Room State in Menu // Room State in Menu
#roomstate { #roomstate {
font-size: 0.9em; font-size: 0.9em;
line-height: 1.0em; line-height: 1em;
max-width: 8em; max-width: 8em;
padding: 5px; padding: 5px;
color: $roomstate_color_unknown; color: $roomstate_color_unknown;
&.open { &.open {
@ -155,7 +153,6 @@ body>main {
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--code-background-color); background: var(--code-background-color);
padding: 10px 15px; padding: 10px 15px;
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
header { header {
@ -195,8 +192,9 @@ body>main {
img.groups-img { img.groups-img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4 // (250px - 2*var(--grid-spacing-horizontal)) * 3/4
max-height: (222px * 3/4); max-height: (222px * 3 / 4);
} }
// 2*250px + 2*var(--spacing) + 1px // 2*250px + 2*var(--spacing) + 1px
@ -205,7 +203,7 @@ body>main {
img.groups-img { img.groups-img {
// (150px - 2*var(--grid-spacing-horizontal)) * 3/4 // (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 { img.groups-img {
// (350px - 2*var(--grid-spacing-horizontal)) * 3/4 // (350px - 2*var(--grid-spacing-horizontal)) * 3/4
max-height: (322px*3/4); max-height: (322px * 3 / 4);
} }
// 2*350px + 2*var(--spacing) + 1px // 2*350px + 2*var(--spacing) + 1px
@ -224,12 +222,10 @@ body>main {
img.groups-img { img.groups-img {
// (250px - 2*var(--grid-spacing-horizontal)) * 3/4 // (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 // Blog Overview: Categories list
div.nav-aside { div.nav-aside {
ul { ul {