diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 810381a09..384baecc2 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -70,7 +70,7 @@ jobs:
- name: Install docs dependencies
run: poetry install --with docs
- - name: Check markdown, toml formatting
+ - name: Check markdown, toml, css formatting
uses: dprint/check@v2.2
if: runner.os == 'Linux'
diff --git a/docs/docs/developer/contributing.md b/docs/docs/developer/contributing.md
index 5eb775e94..b38423192 100644
--- a/docs/docs/developer/contributing.md
+++ b/docs/docs/developer/contributing.md
@@ -18,6 +18,10 @@ Our configuration can be found in [KPOps](https://github.com/bakdata/kpops)' top
To ensure a consistent markdown style, we use [dprint](https://dprint.dev)'s [Markdown code formatter](https://dprint.dev/plugins/markdown/). Our configuration can be found [here](https://github.com/bakdata/kpops/blob/main/dprint.json).
+### CSS
+
+To ensure a consistent CSS style, we use the [malva](https://github.com/g-plane/malva) [dprint](https://dprint.dev)'s plugin. Our configuration can be found [here](https://github.com/bakdata/kpops/blob/main/dprint.json).
+
### TOML
To ensure a consistent TOML style, we use [dprint](https://dprint.dev)'s [TOML code formatter](https://dprint.dev/plugins/toml/). Our configuration can be found [here](https://github.com/bakdata/kpops/blob/main/dprint.json).
diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css
index 24d84f6c4..9028d83fd 100644
--- a/docs/docs/stylesheets/extra.css
+++ b/docs/docs/stylesheets/extra.css
@@ -1,41 +1,65 @@
:root > * {
- /* The primary color of KPOps docs */
- --md-primary-fg-color: #a599ff;
+ /* The primary color of KPOps docs */
+ --md-primary-fg-color: #a599ff;
- /* The second color of KPOps docs */
- --md-accent-fg-color: #B0A5FF;
+ /* The second color of KPOps docs */
+ --md-accent-fg-color: #b0a5ff;
- /* Create custom color variable to use for the buttons */
- --kpops-button-color: #7068AD;
+ /* Create custom color variable to use for the buttons */
+ --kpops-button-color: #7068ad;
- /* The footer color needs to be set sparately */
- --md-footer-bg-color: var(--md-primary-fg-color);
+ /* The footer color needs to be set sparately */
+ --md-footer-bg-color: var(--md-primary-fg-color);
- /* Color the links with the primary color */
- --md-typeset-a-color: var(--md-primary-fg-color);
+ /* Color the links with the primary color */
+ --md-typeset-a-color: var(--md-primary-fg-color);
- --md-admonition-icon--wip: url('data:image/svg+xml;charset=utf-8,')
+ --md-admonition-icon--wip: url("data:image/svg+xml;charset=utf-8,");
}
.md-typeset .md-button, .md-button--primary {
- background-color: var(--kpops-button-color);
+ background-color: var(--kpops-button-color);
}
.md-typeset .md-button:hover, .md-button--primary:hover {
- border-color: white;
+ border-color: white;
}
-.md-typeset .admonition.wip,
-.md-typeset details.wip {
-border-color: rgb(160, 45, 0);
+.md-typeset .admonition.wip, .md-typeset details.wip {
+ border-color: rgb(160, 45, 0);
}
-.md-typeset .wip > .admonition-title,
-.md-typeset .wip > summary {
-background-color: rgb(255, 195, 172);
+.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
+ background-color: rgb(255, 195, 172);
}
.md-typeset .wip > .admonition-title::before,
.md-typeset .wip > summary::before {
-background-color: rgb(255, 77, 6);
--webkit-mask-image: var(--md-admonition-icon--wip);
- mask-image: var(--md-admonition-icon--wip);
+ background-color: rgb(255, 77, 6);
+ -webkit-mask-image: var(--md-admonition-icon--wip);
+ mask-image: var(--md-admonition-icon--wip);
+}
+
+.md-typeset .admonition.wip, .md-typeset details.wip {
+ border-color: rgb(160, 45, 0);
+}
+.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
+ background-color: rgb(255, 195, 172);
+}
+.md-typeset .wip > .admonition-title::before,
+.md-typeset .wip > summary::before {
+ background-color: rgb(255, 77, 6);
+ -webkit-mask-image: var(--md-admonition-icon--wip);
+ mask-image: var(--md-admonition-icon--wip);
+}
+
+.md-typeset .admonition.wip, .md-typeset details.wip {
+ border-color: rgb(160, 45, 0);
+}
+.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
+ background-color: rgb(255, 195, 172);
+}
+.md-typeset .wip > .admonition-title::before,
+.md-typeset .wip > summary::before {
+ background-color: rgb(255, 77, 6);
+ -webkit-mask-image: var(--md-admonition-icon--wip);
+ mask-image: var(--md-admonition-icon--wip);
}
diff --git a/dprint.json b/dprint.json
index 296f5b2f9..e0a8652e6 100644
--- a/dprint.json
+++ b/dprint.json
@@ -3,9 +3,11 @@
"incremental": true,
"markdown": {},
"toml": {},
+ "malva": {},
"includes": [
"**/*.{md}",
- "**/*.{toml}"
+ "**/*.{toml}",
+ "**/*.{css}"
],
"excludes": [
".pytest_cache/**",
@@ -18,6 +20,7 @@
],
"plugins": [
"https://plugins.dprint.dev/markdown-0.16.0.wasm",
- "https://plugins.dprint.dev/toml-0.5.4.wasm"
+ "https://plugins.dprint.dev/toml-0.5.4.wasm",
+ "https://plugins.dprint.dev/g-plane/malva-v0.1.2.wasm"
]
}