mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-13 01:43:57 +02:00
Code Issues Releases Wiki Activity

♻️ ballonのサンプルを修正

Browse Source
This commit is contained in:
BcRikko
2018-09-29 17:45:17 +09:00
parent 547f32dcc8
commit 8c62eee7a6
3 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
css/nes.css
View File

@@ -570,16 +570,6 @@ dl.description > dd {
border: 4px solid #333; border: 4px solid #333;
} }
.field .input:-ms-input-placeholder {
font-weight: lighter;
color: rgba(51, 51, 51, 0.3);
}
.field .input::-ms-input-placeholder {
font-weight: lighter;
color: rgba(51, 51, 51, 0.3);
}
.field .input::placeholder { .field .input::placeholder {
font-weight: lighter; font-weight: lighter;
color: rgba(51, 51, 51, 0.3); color: rgba(51, 51, 51, 0.3);
@@ -754,4 +744,5 @@ dl.description > dd {
.icon.-large.-like::before { .icon.-large.-like::before {
box-shadow: 32px 4px 0 #1e77be,36px 4px 0 #1e77be,32px 8px 0 #1e77be,40px 8px 0 #1e77be,32px 12px 0 #1e77be,40px 12px 0 #1e77be,28px 16px 0 #1e77be,40px 16px 0 #1e77be,28px 20px 0 #1e77be,36px 20px 0 #1e77be,24px 24px 0 #1e77be,36px 24px 0 #1e77be,24px 28px 0 #1e77be,36px 28px 0 #1e77be,4px 32px 0 #1e77be,8px 32px 0 #1e77be,12px 32px 0 #1e77be,20px 32px 0 #1e77be,40px 32px 0 #1e77be,44px 32px 0 #1e77be,48px 32px 0 #1e77be,52px 32px 0 #1e77be,56px 32px 0 #1e77be,60px 32px 0 #1e77be,4px 36px 0 #1e77be,8px 36px 0 #1e77be,12px 36px 0 #1e77be,20px 36px 0 #1e77be,64px 36px 0 #1e77be,4px 40px 0 #1e77be,8px 40px 0 #1e77be,12px 40px 0 #1e77be,20px 40px 0 #1e77be,64px 40px 0 #1e77be,4px 44px 0 #1e77be,8px 44px 0 #1e77be,12px 44px 0 #1e77be,20px 44px 0 #1e77be,60px 44px 0 #1e77be,4px 48px 0 #1e77be,8px 48px 0 #1e77be,12px 48px 0 #1e77be,20px 48px 0 #1e77be,64px 48px 0 #1e77be,4px 52px 0 #1e77be,8px 52px 0 #1e77be,12px 52px 0 #1e77be,20px 52px 0 #1e77be,64px 52px 0 #1e77be,4px 56px 0 #1e77be,8px 56px 0 #1e77be,12px 56px 0 #1e77be,20px 56px 0 #1e77be,60px 56px 0 #1e77be,4px 60px 0 #1e77be,8px 60px 0 #1e77be,12px 60px 0 #1e77be,20px 60px 0 #1e77be,60px 60px 0 #1e77be,4px 64px 0 #1e77be,8px 64px 0 #1e77be,12px 64px 0 #1e77be,20px 64px 0 #1e77be,24px 64px 0 #1e77be,28px 64px 0 #1e77be,32px 64px 0 #1e77be,36px 64px 0 #1e77be,40px 64px 0 #1e77be,44px 64px 0 #1e77be,48px 64px 0 #1e77be,52px 64px 0 #1e77be,56px 64px 0 #1e77be;; box-shadow: 32px 4px 0 #1e77be,36px 4px 0 #1e77be,32px 8px 0 #1e77be,40px 8px 0 #1e77be,32px 12px 0 #1e77be,40px 12px 0 #1e77be,28px 16px 0 #1e77be,40px 16px 0 #1e77be,28px 20px 0 #1e77be,36px 20px 0 #1e77be,24px 24px 0 #1e77be,36px 24px 0 #1e77be,24px 28px 0 #1e77be,36px 28px 0 #1e77be,4px 32px 0 #1e77be,8px 32px 0 #1e77be,12px 32px 0 #1e77be,20px 32px 0 #1e77be,40px 32px 0 #1e77be,44px 32px 0 #1e77be,48px 32px 0 #1e77be,52px 32px 0 #1e77be,56px 32px 0 #1e77be,60px 32px 0 #1e77be,4px 36px 0 #1e77be,8px 36px 0 #1e77be,12px 36px 0 #1e77be,20px 36px 0 #1e77be,64px 36px 0 #1e77be,4px 40px 0 #1e77be,8px 40px 0 #1e77be,12px 40px 0 #1e77be,20px 40px 0 #1e77be,64px 40px 0 #1e77be,4px 44px 0 #1e77be,8px 44px 0 #1e77be,12px 44px 0 #1e77be,20px 44px 0 #1e77be,60px 44px 0 #1e77be,4px 48px 0 #1e77be,8px 48px 0 #1e77be,12px 48px 0 #1e77be,20px 48px 0 #1e77be,64px 48px 0 #1e77be,4px 52px 0 #1e77be,8px 52px 0 #1e77be,12px 52px 0 #1e77be,20px 52px 0 #1e77be,64px 52px 0 #1e77be,4px 56px 0 #1e77be,8px 56px 0 #1e77be,12px 56px 0 #1e77be,20px 56px 0 #1e77be,60px 56px 0 #1e77be,4px 60px 0 #1e77be,8px 60px 0 #1e77be,12px 60px 0 #1e77be,20px 60px 0 #1e77be,60px 60px 0 #1e77be,4px 64px 0 #1e77be,8px 64px 0 #1e77be,12px 64px 0 #1e77be,20px 64px 0 #1e77be,24px 64px 0 #1e77be,28px 64px 0 #1e77be,32px 64px 0 #1e77be,36px 64px 0 #1e77be,40px 64px 0 #1e77be,44px 64px 0 #1e77be,48px 64px 0 #1e77be,52px 64px 0 #1e77be,56px 64px 0 #1e77be;;
} }
/*# sourceMappingURL=nes.css.map */ /*# sourceMappingURL=nes.css.map */

19
index.html
View File

@@ -238,11 +238,22 @@
<section class="container"> <section class="container">
<h2 class="title -is-3">Balloons</h2> <h2 class="title -is-3">Balloons</h2>
<div class="balloon -right"> <div class="conversation">
<p>Good morning. Thou hast had a good night's sleep I hope.</p> <div class="avatar -left">
<img src="https://avatars0.githubusercontent.com/u/5305599?s=100">
</div>
<div class="balloon -left">
<p>Hello NES.css</p>
</div>
</div> </div>
<div class="balloon -left">
<p>Hello NES.css</p> <div class="conversation">
<div class="balloon -right">
<p>Good morning. Thou hast had a good night's sleep I hope.</p>
</div>
<div class="avatar -right">
<img src="https://avatars0.githubusercontent.com/u/5305599?s=100">
</div>
</div> </div>
</section> </section>

25
style.css
View File

@@ -44,6 +44,31 @@ body {
margin-top: 1rem; margin-top: 1rem;
} }
.conversation {
display: grid;
/* prettier-ignore */
grid-template:
".... message ....."
"left message right"
"left message right"
"left ....... right"
/ 100px 1fr 100px;
grid-gap: 2rem;
}
.conversation > .avatar.-left {
grid-area: left;
}
.conversation > .avatar.-right {
grid-area: right;
}
.conversation > .balloon {
grid-area: message;
}
.github-link { .github-link {
position: fixed; position: fixed;
top: 10px; top: 10px;