Commit b195efcc authored by Adrien's avatar Adrien
Browse files

Implement a new standar for troubleshooting sections

parent 458a5b21
......@@ -162,6 +162,31 @@ lalalalalalalala
tututututu
pouet
== Troubleshooting
[.troubleshooting-section]
--
[.symptom]
I can't wake up in the morning, 9AM is too early for me!!!
This is probably because I often go to bed at 3AM :'( +
I should just stop watchign netflix for hours...
--
[.troubleshooting-section]
--
[.symptom]
My teeth are painfull.
It might happen because I do not brush correctly my teeth.
[source, JSON]
----
I could by a new tooth brush, or maybe ensure that I brush my teeth for at least 3 minutes?
The kind of thing we teach to children...
----
--
== Test code
Check that the small code block `toto` is correctly highlighted in the call out of the block code.
......@@ -173,3 +198,4 @@ while (true) {
}
----
<1> The word `toto` is commonly used in examples, it probably refers to our inner self.
<?xml version="1.0" ?><svg height="48" id="thunder" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><defs><style>
.vi-primary {
fill: #000;
}
.vi-accent {
fill: #000;
}
</style></defs><path class="vi-primary" d="M33,8H20.842L14,22h6L12,40,36,21H27Z"/><path class="vi-accent" d="M28.421,27L12,40l5.778-13H28.421Z"/></svg>
.troubleshooting-section {
border-left: 2px solid var(--color-troobleshooting-border);
padding-left: 1em;
margin-top: 2em;
.symptom {
color: var(--color-higlight);
font-weight: var(--body-font-weight-bold);
::before {
content: "";
display: inline-block;
height: 30px;
width: 30px;
margin-right: 0.5em;
background: url(../img/fire.svg) no-repeat;
background-size: contain;
vertical-align: middle;
filter: var(--filter-fire-icon);
}
}
}
......@@ -48,6 +48,7 @@
--color-card-border: #ebf2f2;
--color-code-background: #f9f2f4;
--color-code-font: #c7254e;
--color-troobleshooting-border: var(--color-admonition-important-bg);
// Search colors
--docsearch-primary-color: var(--color-blue-bonita);
......@@ -174,6 +175,7 @@
// Light icon set
--filter-icon: invert(0%) sepia(98%) saturate(9%) hue-rotate(152deg) brightness(100%) contrast(102%); // black
--filter-logo-footer: invert(0); // keep it as it is
--filter-fire-icon: invert(9%) sepia(91%) saturate(5800%) hue-rotate(2deg) brightness(101%) contrast(115%);
}
......@@ -226,12 +228,14 @@ html[data-theme='dark'] {
--color-card-border: #9ba9c6;
--color-code-background: #30334b;
--color-code-font: #f7962e;
--color-troobleshooting-border: #f5c80071;
//Icon filter definitions, generated from https://codepen.io/sosuke/pen/Pjoqqp
// Dark icon set
--filter-icon: invert(100%) sepia(0%) saturate(7500%) hue-rotate(39deg) brightness(112%) contrast(112%); // white
--filter-icon-search: invert(100%) sepia(0%) saturate(7500%) hue-rotate(39deg) brightness(112%) contrast(112%); // White
--filter-logo-footer: brightness(0) invert(1); // full white
--filter-fire-icon: invert(72%) sepia(92%) saturate(1187%) hue-rotate(3deg) brightness(100%) contrast(100%);
// Search colors
--color-search-mark-highlight: var(--color-higlight);
......
......@@ -14,6 +14,7 @@
@import "header.scss";
@import "footer.scss";
@import "print.scss";
@import "components/cards";
@import "components/cards.scss";
@import "search.scss";
@import "loader.scss";
@import "components/troubleshooting.scss";
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment