notes

content/games/minecraft/modpack.md

@@ -8,9 +8,12 @@ The modpack is currently distributed in `.mrpack` format, which allows you to di
 
 For questions or installation help, please [contact me](/contact).
 
+
 ## Releases
 
-> **NOTE:** All recent releases are backwards compatible with older Minecraft server versions.
+{% note(type="note") %}
+All recent releases are backwards compatible with older Minecraft server versions.
+{% end %}
 
 ### Minecraft Java Edition 1.20.4
 

sass/elements/quote.scss

@@ -1,9 +1,10 @@
-blockquote {
+blockquote,
+.text-note {
   margin: 0;
   padding: 0 1em;
   margin-bottom: 1em;
-  color: #57606a;
+  border-left-width: 0.25em;
-  border-left: 0.25em solid #d0d7de;
+  border-left-style: solid;
 
   & > :first-child {
     margin-top: 0;
@@ -12,3 +13,37 @@ blockquote {
     margin-bottom: 0;
   }
 }
+
+blockquote {
+  color: #57606a;
+  border-left-color: #d0d7de;
+}
+
+.text-note {
+  color: black;
+
+  .note-title {
+    margin-bottom: 0.5em;
+  }
+
+  &[data-type="info"] {
+    border-left-color: #0969da;
+    .note-title {
+      color: #0969da;
+    }
+  }
+
+  &[data-type="note"] {
+    border-left-color: #9a6700;
+    .note-title {
+      color: #9a6700;
+    }
+  }
+
+  &[data-type="warning"] {
+    border-left-color: #cf222e;
+    .note-title {
+      color: #cf222e;
+    }
+  }
+}

templates/shortcodes/note.html

@@ -0,0 +1,8 @@
+<div class="text-note" data-type="{{type | default(value='info')}}">
+    <div class="note-title">
+        {{type | default(value='info') | capitalize}}
+    </div>
+    <div class="note-content">
+        {{body | safe}}
+    </div>
+</div>