feat: add callouts

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**
+{% callout(type="quote") %}
-> dolendi viscera, est tangit. Taedia pater quid, per venasque Hister praesens
+Si praeceps: maiora doluit velit nec *dente fecundus septem* arbore et **hic**
-> precibus Europaei.
+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\*.
+{% 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 %}

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: "~ "

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", "");
+}

sass/styles.scss

@@ -1 +1,2 @@
 @use 'base';
+@use 'shortcodes/callout'

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>