feat: add callouts

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'