From 5f6d05d772bfeddafcdf311f05c1fd1eb452fad2 Mon Sep 17 00:00:00 2001
From: Ungol <ungol@ungol.fr>
Date: Tue, 23 Dec 2025 22:27:51 +0100
Subject: [PATCH] feat: add callouts

---
 content/blog/example.md           | 48 +++++++++++++++++++++---
 sass/_base.scss                   | 30 ---------------
 sass/shortcodes/_callout.scss     | 61 +++++++++++++++++++++++++++++++
 sass/styles.scss                  |  1 +
 templates/shortcodes/callout.html |  4 ++
 5 files changed, 108 insertions(+), 36 deletions(-)
 create mode 100644 sass/shortcodes/_callout.scss
 create mode 100644 templates/shortcodes/callout.html

diff --git a/content/blog/example.md b/content/blog/example.md
index 476860a..0dcfda6 100644
--- a/content/blog/example.md
+++ b/content/blog/example.md
@@ -138,9 +138,13 @@ decutit sed probat figuram, digna aegre, diu virgo superabat Hersilien
 repetenda. [Dignabitur](http://tenuique-levibus.org/necdictis) fecit optari
 subiere flammas.
 
-> Si praeceps: maiora doluit velit nec *dente fecundus septem* arbore et **hic**
-> dolendi viscera, est tangit. Taedia pater quid, per venasque Hister praesens
-> precibus Europaei.
+{% callout(type="quote") %}
+Si praeceps: maiora doluit velit nec *dente fecundus septem* arbore et **hic**
+dolendi viscera, est tangit. Taedia pater quid, per venasque Hister praesens
+precibus Europaei.
+
+<cite>Some random guy</cite>
+{% end %}
 
 ## Sub territa
 
@@ -215,8 +219,40 @@ movere herbas? Perterrita terrore ipse nec parente maciem.
 - [ ] this is an incomplete item
 
 
-# Ignoring Markdown formatting
+# Callouts
 
-You can tell GitHub to ignore (or escape) Markdown formatting by using \ before the Markdown character.
+{% callout(type="info") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
 
-Let's rename \*our-new-project\* to \*our-old-project\*.
\ No newline at end of file
+{% callout(type="warning") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
+
+{% callout(type="danger") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
+
+{% callout(type="error") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
+
+{% callout(type="tip") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
+
+{% callout(type="note") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
+
+{% callout(type="question") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
+
+{% callout(type="example") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
+
+{% callout(type="bug") %}
+Quae architecto veniam nemo optio voluptatibus voluptatem asperiores. Repudiandae sapiente aliquam consequatur illo et. Odio consequatur explicabo saepe quidem numquam dolores. Impedit minima natus qui nisi.
+{% end %}
\ No newline at end of file
diff --git a/sass/_base.scss b/sass/_base.scss
index f58ac3f..cd147ce 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -245,36 +245,6 @@ hr {
   border-width: 1px;
 }
 
-blockquote {
-  position: relative;
-  margin-inline: 0;
-  margin-block-end: 2rem;
-  padding-inline-start: 2em;
-  overflow: hidden;
-  quotes: "“" "”" "‘" "’";
-
-  &::before,
-  &::after {
-    position: absolute;
-  }
-
-  &::before {
-    content: "❞";
-    left: .2rem;
-    font-size: 2rem;
-    color: var(--overlay1);
-  }
-
-  &::after {
-    content: "";
-    left: .6rem;
-    top: 2rem;
-    width: 1px;
-    height: 100%;
-    background-color: var(--overlay1);
-  }
-}
-
 cite {
   &::before {
     content: "~ "
diff --git a/sass/shortcodes/_callout.scss b/sass/shortcodes/_callout.scss
new file mode 100644
index 0000000..4ee9900
--- /dev/null
+++ b/sass/shortcodes/_callout.scss
@@ -0,0 +1,61 @@
+@mixin callout-customization($type, $color, $text-icon) {
+    &[type="#{$type}"] {
+        &>.callout-content {
+            border-color: var(#{$color});
+            background-color: color-mix(in srgb, var(#{$color}), transparent 90%);
+        }
+
+        &::before {
+            content: $text-icon;
+            color: var(#{$color});
+        }
+    }
+}
+
+.callout {
+    text-align: center;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+
+    &::before {
+        display: inline-block;
+        width: 14%;
+        font-size: 3rem;
+        margin: auto;
+        vertical-align: middle;
+    }
+
+    &>.callout-title {
+        display: none;
+    }
+
+    &>.callout-content {
+        text-align: initial;
+        vertical-align: middle;
+        display: inline-block;
+        width: 85%;
+        padding: 1.25rem;
+
+        &>p {
+            margin: 0;
+        }
+
+        border: {
+            style: dashed;
+            width: 1px;
+            radius: var(--standard-border-radius)
+        }
+    }
+
+    @include callout_customization("info", "--sapphire", "");
+    @include callout_customization("success", "--green", "");
+    @include callout_customization("warning", "--yellow", "");
+    @include callout_customization("danger", "--red", "󰈸");
+    @include callout-customization("error", "--red", "");
+    @include callout_customization("tip", "--teal", "󰌵");
+    @include callout_customization("note", "--lavender", "");
+    @include callout_customization("question", "--sky", "");
+    @include callout_customization("example", "--mauve", "");
+    @include callout_customization("bug", "--maroon", "");
+    @include callout_customization("quote", "--overlay1", "");
+}
\ No newline at end of file
diff --git a/sass/styles.scss b/sass/styles.scss
index a17da31..73f805c 100644
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -1 +1,2 @@
 @use 'base';
+@use 'shortcodes/callout'
\ No newline at end of file
diff --git a/templates/shortcodes/callout.html b/templates/shortcodes/callout.html
new file mode 100644
index 0000000..84c71b6
--- /dev/null
+++ b/templates/shortcodes/callout.html
@@ -0,0 +1,4 @@
+<div class="callout" type="{{ type | safe }}">
+    <div class="callout-title">{{ title | default(value=type | title) | safe}}</div>
+    <div class="callout-content">{{ body | markdown | safe }}</div>
+</div>