Add callout shortcode (#1167)

content/learn/quick-start/getting-started/_index.md

@@ -12,10 +12,13 @@ This section will help you get started on your Bevy journey as quickly as possib
 
 If you want to dive in immediately and you already have a working Rust setup, feel free to follow this "quick start" guide. Otherwise, move on to the next page.
 
-Note: depending on your platform, you may have to [install additional dependencies]. You can also speed up compile times by following the ["fast compiles"] section.
+{% callout() %}
+Depending on your platform, you may have to [install additional dependencies].
+You can also speed up compile times by following the ["fast compiles"] section.
 
 [install additional dependencies]: /learn/quick-start/getting-started/setup/#installing-os-dependencies
 ["fast compiles"]: /learn/quick-start/getting-started/setup/#enable-fast-compiles-optional
+{% end %}
 
 ### Try the Examples
 

content/learn/quick-start/introduction.md

@@ -29,13 +29,13 @@ Bevy is [built in the open by volunteers](/learn/quick-start/contributing) using
 
 For a more in-depth introduction, check out the [Introducing Bevy](/news/introducing-bevy/) blog post.
 
-<h2 class="warning">
-    Stability Warning
-</h2>
+{% callout(type="warning") %}
+## Stability Warning
 
 Bevy is still in the early stages of development. Important features are missing. Documentation is sparse. A new version of Bevy containing breaking changes to the API is released [approximately once every 3 months](https://bevyengine.org/news/bevy-0-6/#the-train-release-schedule). We provide [migration guides](https://bevyengine.org/learn/book/migration-guides/), but we can't guarantee migrations will always be easy. Use only if you are willing to work in this environment.
 
 If you are currently trying to pick an engine for your Next Big Project™, we recommend that you check out [Godot Engine](https://godotengine.org). It is currently much more feature-complete and stable. And it is also free, open-source, and [scriptable with Rust](https://github.com/godot-rust/gdext)!
+{% end %}
 
 The Quick Start Guide is not a comprehensive guide to Bevy and the next section [Getting Started](/learn/quick-start/getting-started/) will help you with the setup of Bevy and learning the basics, but it does not cover most of Bevy's features. In the future you can use the Bevy Book to gain a better understanding, until then see the last page [Next Steps](/learn/quick-start/next-steps) for more exhaustive and complex resources on Bevy.
 

sass/components/_callout.scss

@@ -0,0 +1,35 @@
+.callout {
+  margin-block: 32px;
+  padding: 16px;
+  border-radius: 4px;
+  background-color: var(--callout-bg-color);
+  border-top: 4px solid var(--callout-accent-color);
+  color: var(--callout-color);
+
+  >:first-child {
+    margin-top: 0;
+  }
+
+  >:last-child {
+    margin-bottom: 0;
+  }
+
+  &,
+  &--info {
+    --callout-accent-color: #5944e0;
+    --callout-bg-color: #2f2745;
+    --callout-color: #f0effb;
+  }
+
+  &--caution {
+    --callout-accent-color: #e82f5a;
+    --callout-bg-color: #591626;
+    --callout-color: #eed5db;
+  }
+
+  &--warning {
+    --callout-accent-color: #e4c151;
+    --callout-bg-color: #513903;
+    --callout-color: #fdfdec;
+  }
+}

sass/site.scss

@@ -28,6 +28,7 @@
 @import "components/docs-footer";
 @import "components/button-square";
 @import "components/button";
+@import "components/callout";
 @import "components/card";
 @import "components/container";
 @import "components/example";

templates/shortcodes/callout.html

@@ -0,0 +1,3 @@
+<div class="callout callout--{{ type | default(value="info") }}">
+  {{ body | markdown | safe }}
+</div>