From 968fbd996dad802dead62ece53ffd2738a3a65b6 Mon Sep 17 00:00:00 2001
From: Anhgelus Morhtuuzh <william@herges.fr>
Date: Thu, 5 Feb 2026 11:20:07 +0100
Subject: feat(frontend): callout style

---
 frontend/scss/general.scss | 50 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/frontend/scss/general.scss b/frontend/scss/general.scss
index 13d2053..62dc361 100644
--- a/frontend/scss/general.scss
+++ b/frontend/scss/general.scss
@@ -19,7 +19,8 @@ article {
 
 h1,
 h2,
-h3 {
+h3,
+h4 {
   font-weight: 500;
   line-height: var(--line-height-smaller);
 
@@ -47,6 +48,10 @@ h3 {
   margin-top: calc(var(--margin-base) + 0.5rem);
 }
 
+h4 {
+  font-size: 1.25rem;
+}
+
 p {
   margin-bottom: var(--margin-base);
 }
@@ -248,3 +253,46 @@ article.large {
     margin-bottom: 2rem;
   }
 }
+
+.callout {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+
+  padding: var(--margin-base);
+  background: var(--callout-color-background);
+  color: var(--callout-color);
+
+  margin-bottom: var(--margin-base);
+
+  & h4 {
+    margin-bottom: 0;
+
+    font-weight: 600;
+  }
+
+  & div {
+    display: flex;
+    gap: 0.5rem;
+    flex-direction: column;
+  }
+
+  & div p {
+    margin-bottom: 0;
+  }
+}
+
+[data-kind="note"] {
+  --callout-color-background: hsl(201, 60%, 70%);
+  --callout-color: hsl(189, 20%, 15%);
+}
+
+[data-kind="warn"] {
+  --callout-color-background: hsl(39, 100%, 55%);
+  --callout-color: hsl(40, 40%, 15%);
+}
+
+[data-kind="danger"] {
+  --callout-color-background: hsl(345, 95%, 42%);
+  --callout-color: hsl(345, 10%, 95%);
+}
-- 
cgit v1.2.3