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;
}
body.dark .mermaid,
body.dark pre code.language-mermaid {
background: $white;
}
body.dark blockquote {
border-left: 3px solid $border-dark;
}

View File

@ -19,7 +19,7 @@ function myFunction(p1, p2) {
}
```
## Flow
## Flowchart
### Shortcode
@ -61,7 +61,7 @@ graph TD
C -->|Two| E[Result 2]
```
## Sequence
## Sequence diagram
{{< mermaid >}}
sequenceDiagram
@ -75,22 +75,7 @@ sequenceDiagram
Bob-->>John: Jolly good!
{{< /mermaid >}}
## Gantt
{{< 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
## Class diagram
{{< mermaid >}}
classDiagram
@ -111,7 +96,7 @@ classDiagram
}
{{< /mermaid >}}
## State
## State diagram
{{< mermaid >}}
stateDiagram-v2
@ -123,18 +108,16 @@ stateDiagram-v2
Crash --> [*]
{{< /mermaid >}}
## Pie
## Entity Relationship Diagram
{{< mermaid >}}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{< /mermaid >}}
## User Journey
## User Journey Diagram
{{< mermaid >}}
journey
@ -148,6 +131,52 @@ journey
Sit down: 3: Me
{{< /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
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 -}}
</div>
{{ 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 -}}