docs: add balloon samples

docs/script.js

@@ -294,6 +294,26 @@ const sampleCollection = [
 <img class="nes-avatar is-rounded is-medium" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
 <img class="nes-avatar is-rounded is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">`,
   },
+  {
+    title: 'balloons',
+    showCode: false,
+    code: `<section class="message-list">
+    <section class="message -left">
+  <i class="nes-bcrikko"></i>
+  <!-- Balloon -->
+  <div class="nes-balloon from-left">
+    <p>Hello NES.css</p>
+  </div>
+</section>
+
+<section class="message -right">
+  <!-- Balloon -->
+  <div class="nes-balloon from-right">
+    <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+  </div>
+  <i class="nes-bcrikko"></i>
+</section>`,
+  },
 ];
 
 const coreteam = [

docs/style.css

@@ -96,6 +96,34 @@ section.showcase > section.samplecode > pre code {
   max-width: 400px;
 }
 
+/* Balloons sample */
+section.message-list {
+  display: flex;
+  flex-direction: column;
+}
+.message-list > .message {
+  display: flex;
+  margin-top: 2rem;
+}
+.message-list > .message > .nes-balloon {
+  max-width: 550px;
+}
+.message-list > .message i {
+  align-self: flex-end;
+}
+.message-list > .message.-left {
+  align-self: flex-start;
+}
+.message-list > .message.-right {
+  align-self: flex-end;
+}
+.message-list > .message.-left i {
+  margin-right: 2rem;
+}
+.message-list > .message.-right i {
+  margin-left: 2rem;
+}
+
 /* Copied balloon */
 .nes-balloon.copied-balloon {
   position: absolute;