@@ -344,21 +344,45 @@ const sampleCollection = [
344
344
{
345
345
title : 'balloons' ,
346
346
showCode : false ,
347
- code : `<section class="message-list">
348
- <section class="message -left">
349
- <i class="nes-bcrikko"></i>
350
- <!-- Balloon -->
351
- <div class="nes-balloon from-left">
352
- <p>Hello NES.css</p>
353
- </div>
347
+ code : `<section class="nes-container">
348
+ <section class="message-list">
349
+ <section class="message -left">
350
+ <i class="nes-bcrikko"></i>
351
+ <!-- Balloon -->
352
+ <div class="nes-balloon from-left">
353
+ <p>Hello NES.css</p>
354
+ </div>
355
+ </section>
356
+
357
+ <section class="message -right">
358
+ <!-- Balloon -->
359
+ <div class="nes-balloon from-right">
360
+ <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
361
+ </div>
362
+ <i class="nes-bcrikko"></i>
363
+ </section>
354
364
</section>
365
+ </section>
355
366
356
- <section class="message -right">
357
- <!-- Balloon -->
358
- <div class="nes-balloon from-right">
359
- <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
360
- </div>
361
- <i class="nes-bcrikko"></i>
367
+ <!-- Balloon 'is-dark' -->
368
+ <section class="nes-container is-dark">
369
+ <section class="message-list">
370
+ <section class="message -left">
371
+ <i class="nes-bcrikko"></i>
372
+ <!-- Balloon -->
373
+ <div class="nes-balloon from-left is-dark">
374
+ <p>Hello NES.css</p>
375
+ </div>
376
+ </section>
377
+
378
+ <section class="message -right">
379
+ <!-- Balloon -->
380
+ <div class="nes-balloon from-right is-dark">
381
+ <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
382
+ </div>
383
+ <i class="nes-bcrikko"></i>
384
+ </section>
385
+ </section>
362
386
</section>
363
387
</section>` ,
364
388
} ,
0 commit comments