Hint box sous Hugo - Zarchbox 📦

🎨 Le CSS

Copié le code .css dans un fichier, exemple hintbox.css et que vous mettrez dans static/css/.

/* Hint */

.hint-warn {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #FFF6DD none repeat scroll 0% 0%;
border: 1px solid rgb(255, 239, 170);
color: rgb(150, 105, 0);
margin-bottom: 12px;
margin-top: 12px; 
}

.hint-warn a {
    color: rgb(150, 105, 0);
    font-weight: bold;
}

.hint-valid {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #CEF6D8 none repeat scroll 0% 0%;
border: 1px solid rgb(187, 235, 200);
color: rgb(29, 125, 63);
margin-bottom: 12px;
margin-top: 12px; 
}

.hint-valid a {
    color: rgb(29, 125, 63);
    font-weight: bold;
}

.hint-danger {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #FAACA8 none repeat scroll 0% 0%;
border: 1px solid rgb(255, 221, 221);
color: rgb(206, 55, 55);
margin-bottom: 12px;
margin-top: 12px; 
}

.hint-danger a {
    color: rgb(206, 55, 55);
    font-weight: bold;
}

.hint-info {
font-style: normal;
font-weight: 400;
text-rendering: optimizelegibility;
letter-spacing: normal;
font-family: "Roboto", sans-serif;
font-size: .9rem;
line-height: 1.44;
border-radius: 2px;
padding: 13px;
background: #aed6f1  none repeat scroll 0% 0%;
border: 1px solid rgb(93, 173, 226);
color: rgb(59, 107, 151);
margin-bottom: 12px;
margin-top: 12px; 
}

.hint-info a {
    color: rgb(59, 107, 151);
    font-weight: bold;
}

Ensuite on va appeler ce fichier dans le <head> :

<link rel="stylesheet" href="/css/hintbox.css">

🧾 Les shortcodes

Puis dans le dossier de votre site, créez le dossier shortcodes dans layouts (si celui-ci n’existe pas). Copiez le code dans un fichier .html, qu’on l’on nommera par exemple hint.html.

<div class="hint-{{ .Get 0 }}">
  {{ .Inner | markdownify }}
</div>

🏷 Appeler le shortcodes

Il ne vous restera plus qu’a faire appel au shortcode en nommant ce dernier et mettre votre texte entre les balises.

Vous pourrez utiliser le markdown dans votre texte.

{{< hint info/danger/warn/valid >}}
Votre texte.
{{< /hint >}}

Kazuky Akayashi/Hint box sous Hugo

🎨 Le CSS

🧾 Les shortcodes

🏷 Appeler le shortcodes