ux: update for dark mode

This commit is contained in:
Henk Verlinde 2021-07-02 09:07:05 +02:00
parent fa2096da39
commit 6e00bc86da
3 changed files with 62 additions and 28 deletions

View File

@ -246,6 +246,11 @@ body.dark code:not(.hljs):not(.language-mermaid) {
color: $body-color-dark; color: $body-color-dark;
} }
body.dark .mermaid,
body.dark pre code.language-mermaid {
background: $white;
}
body.dark blockquote { body.dark blockquote {
border-left: 3px solid $border-dark; border-left: 3px solid $border-dark;
} }

View File

@ -19,7 +19,7 @@ function myFunction(p1, p2) {
} }
``` ```
## Flow ## Flowchart
### Shortcode ### Shortcode
@ -61,7 +61,7 @@ graph TD
C -->|Two| E[Result 2] C -->|Two| E[Result 2]
``` ```
## Sequence ## Sequence diagram
{{< mermaid >}} {{< mermaid >}}
sequenceDiagram sequenceDiagram
@ -75,22 +75,7 @@ sequenceDiagram
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
{{< /mermaid >}} {{< /mermaid >}}
## Gantt ## Class diagram
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
{{< /mermaid >}}
## Class
{{< mermaid >}} {{< mermaid >}}
classDiagram classDiagram
@ -111,7 +96,7 @@ classDiagram
} }
{{< /mermaid >}} {{< /mermaid >}}
## State ## State diagram
{{< mermaid >}} {{< mermaid >}}
stateDiagram-v2 stateDiagram-v2
@ -123,18 +108,16 @@ stateDiagram-v2
Crash --> [*] Crash --> [*]
{{< /mermaid >}} {{< /mermaid >}}
## Pie ## Entity Relationship Diagram
{{< mermaid >}} {{< mermaid >}}
pie erDiagram
title Key elements in Product X CUSTOMER ||--o{ ORDER : places
"Calcium" : 42.96 ORDER ||--|{ LINE-ITEM : contains
"Potassium" : 50.05 CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
"Magnesium" : 10.01
"Iron" : 5
{{< /mermaid >}} {{< /mermaid >}}
## User Journey ## User Journey Diagram
{{< mermaid >}} {{< mermaid >}}
journey journey
@ -148,6 +131,52 @@ journey
Sit down: 3: Me Sit down: 3: Me
{{< /mermaid >}} {{< /mermaid >}}
## Gantt chart
{{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
{{< /mermaid >}}
## Pie chart
{{< mermaid >}}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{{< /mermaid >}}
## Requirement Diagram
```mermaid
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
## Requirements ## Requirements
Doks uses npm to centralize dependency management, making it [easy to update]({{< relref "how-to-update" >}}) resources, build tooling, plugins, and build scripts: Doks uses npm to centralize dependency management, making it [easy to update]({{< relref "how-to-update" >}}) resources, build tooling, plugins, and build scripts:

View File

@ -4,5 +4,5 @@
{{ replaceRE "(```\\s+$)" "" $data -}} {{ replaceRE "(```\\s+$)" "" $data -}}
</div> </div>
{{ else -}} {{ else -}}
{{ errorf "Set `mermaid = true` in `./config/_default/params.toml`" }} {{ errorf "Failed to process mermaid shortcode(s). Set `mermaid = true` in `./config/_default/params.toml`." }}
{{ end -}} {{ end -}}