mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-24 22:55:48 +02:00
Code Issues Releases Wiki Activity

docs: add balloon samples

Browse Source
This commit is contained in:
BcRikko
2019-02-23 11:15:58 +09:00
parent 6170ba6c16
commit a17365b43d
2 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/script.js
View File

@@ -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 = [

28
docs/style.css
View File

@@ -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;