From 8c62eee7a6c646f6389a6a92be0ac537856bc67a Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Sat, 29 Sep 2018 17:45:17 +0900
Subject: [PATCH] =?UTF-8?q?:recycle:=20ballon=E3=81=AE=E3=82=B5=E3=83=B3?=
 =?UTF-8?q?=E3=83=97=E3=83=AB=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/nes.css | 11 +----------
 index.html  | 19 +++++++++++++++----
 style.css   | 25 +++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/css/nes.css b/css/nes.css
index ce2bc4b..26b4920 100644
--- a/css/nes.css
+++ b/css/nes.css
@@ -570,16 +570,6 @@ dl.description > dd {
   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 {
   font-weight: lighter;
   color: rgba(51, 51, 51, 0.3);
@@ -754,4 +744,5 @@ dl.description > dd {
 .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;;
 }
+
 /*# sourceMappingURL=nes.css.map */
\ No newline at end of file
diff --git a/index.html b/index.html
index 67a63ca..79e3edd 100644
--- a/index.html
+++ b/index.html
@@ -238,11 +238,22 @@
 
     <section class="container">
       <h2 class="title -is-3">Balloons</h2>
-      <div class="balloon -right">
-        <p>Good morning. Thou hast had a good night's sleep I hope.</p>
+      <div class="conversation">
+        <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 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>
     </section>
 
diff --git a/style.css b/style.css
index 9b3d5b1..94e770e 100644
--- a/style.css
+++ b/style.css
@@ -44,6 +44,31 @@ body {
   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 {
   position: fixed;
   top: 10px;