From 5c2da76e745d6933ff32f41ff75e828a863ca652 Mon Sep 17 00:00:00 2001
From: sKawashima <bysk.333@gmail.com>
Date: Thu, 27 Sep 2018 12:56:08 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF?=
 =?UTF-8?q?=E3=81=AB=E5=8F=8D=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Member.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/Member.vue b/components/Member.vue
index aa16e83..1be6053 100644
--- a/components/Member.vue
+++ b/components/Member.vue
@@ -1,18 +1,33 @@
 <template lang='pug'>
 #member
-  #CHARLII_k.item
+  #CHARLII_k.item(@click='charlii')
     img(src='~/assets/memberCHARLII_k.svg')
     p CHARLII_k
-  #ryu-g.item
+  #ryu-g.item(@click='ryu')
     img(src='~/assets/memberryu-g.svg')
     p ryu-g
-  #by_sK.item
+  #by_sK.item(@click='sk')
     img(src='~/assets/memberby_sK.svg')
     p by_sK
 </template>
 
 <script>
 export default {
+  data: () => {
+    return {
+    }
+  },
+  methods: {
+    charlii: () => {
+      console.log('cha')
+    },
+    ryu: () => {
+      console.log('ryu')
+    },
+    sk: () => {
+      console.log('sk')
+    }
+  }
 }
 </script>
 

From fd034350fab5efd1514fddb075669ad1450235bd Mon Sep 17 00:00:00 2001
From: sKawashima <bysk.333@gmail.com>
Date: Thu, 27 Sep 2018 13:08:29 +0900
Subject: [PATCH 2/4] refact to flex

---
 components/Member.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/components/Member.vue b/components/Member.vue
index 1be6053..6194868 100644
--- a/components/Member.vue
+++ b/components/Member.vue
@@ -32,23 +32,41 @@ export default {
 </script>
 
 <style lang='sass' scoped>
+// pc
+$cha-w: .92
+$ryu-w: 1
+$sk-w: .94
+
+// sp
+$cha-h: .92
+$ryu-h: 1
+$sk-h: 90
+
 #member
   height: 100vh
-  display: grid
-  grid-template-columns: .92fr 1fr .94fr
+  display: flex
+  flex-direction: row
   @media screen and ( max-width : 768px )
-    grid-template-columns: none
-    grid-template-rows: .92fr 1fr .90fr
+    flex-direction: column
 
 #CHARLII_k
   background-color: #FFCC00
   color: #FFCC00
+  flex-grow: $cha-w
+  @media screen and ( max-width : 768px )
+    flex-grow: $cha-h
 #ryu-g
   background-color: #E95513
   color: #E95513
+  flex-grow: $ryu-w
+  @media screen and ( max-width : 768px )
+    flex-grow: $ryu-h
 #by_sK
   background-color: lighten(#4e1a68, 25%)
   color: lighten(#4e1a68, 25%)
+  flex-grow: $sk-w
+  @media screen and ( max-width : 768px )
+    flex-grow: $sk-h
 
 .item
   position: relative

From d7e33a094235f014605db8b8eb0b75b67d500ad1 Mon Sep 17 00:00:00 2001
From: sKawashima <bysk.333@gmail.com>
Date: Thu, 27 Sep 2018 13:34:16 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E3=81=A8=E3=82=8A=E3=81=82=E3=81=88?=
 =?UTF-8?q?=E3=81=9A=E6=9E=A0=E3=81=8C=E5=BA=83=E3=81=8C=E3=82=8B=E3=81=A8?=
 =?UTF-8?q?=E3=81=93=E3=82=8D=E3=81=BE=E3=81=A7=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Member.vue | 59 +++++++++++++++++++++++++++++++++----------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/components/Member.vue b/components/Member.vue
index 6194868..c10d3ea 100644
--- a/components/Member.vue
+++ b/components/Member.vue
@@ -1,12 +1,12 @@
 <template lang='pug'>
 #member
-  #CHARLII_k.item(@click='charlii')
+  #CHARLII_k.item(@click='charlii', :class='{active: isCha}')
     img(src='~/assets/memberCHARLII_k.svg')
     p CHARLII_k
-  #ryu-g.item(@click='ryu')
+  #ryu-g.item(@click='ryu', :class='{active: isRyu}')
     img(src='~/assets/memberryu-g.svg')
     p ryu-g
-  #by_sK.item(@click='sk')
+  #by_sK.item(@click='sk', :class='{active: isK}')
     img(src='~/assets/memberby_sK.svg')
     p by_sK
 </template>
@@ -15,17 +15,26 @@
 export default {
   data: () => {
     return {
+      isCha: false,
+      isRyu: false,
+      isK: false
     }
   },
   methods: {
-    charlii: () => {
-      console.log('cha')
+    charlii: function () {
+      this.isCha = true
+      this.isRyu = false
+      this.isK = false
     },
-    ryu: () => {
-      console.log('ryu')
+    ryu: function () {
+      this.isCha = false
+      this.isRyu = true
+      this.isK = false
     },
-    sk: () => {
-      console.log('sk')
+    sk: function () {
+      this.isCha = false
+      this.isRyu = false
+      this.isK = true
     }
   }
 }
@@ -40,7 +49,10 @@ $sk-w: .94
 // sp
 $cha-h: .92
 $ryu-h: 1
-$sk-h: 90
+$sk-h: .90
+
+// too
+$size: 5
 
 #member
   height: 100vh
@@ -55,23 +67,42 @@ $sk-h: 90
   flex-grow: $cha-w
   @media screen and ( max-width : 768px )
     flex-grow: $cha-h
+  &.active
+    flex-grow: $cha-w * $size
+    @media screen and ( max-width : 768px )
+      flex-grow: $cha-h * $size
+    &:hover
+      img
 #ryu-g
   background-color: #E95513
   color: #E95513
   flex-grow: $ryu-w
   @media screen and ( max-width : 768px )
     flex-grow: $ryu-h
+  &.active
+    flex-grow: $ryu-w * $size
+    @media screen and ( max-width : 768px )
+      flex-grow: $ryu-h * $size
+    &:hover
+      img
 #by_sK
   background-color: lighten(#4e1a68, 25%)
   color: lighten(#4e1a68, 25%)
   flex-grow: $sk-w
   @media screen and ( max-width : 768px )
     flex-grow: $sk-h
+  &.active
+    flex-grow: $sk-w * $size
+    @media screen and ( max-width : 768px )
+      flex-grow: $sk-h * $size
+    &:hover
+      img
 
 .item
   position: relative
   // text-align: center
   overflow: hidden
+  transition: .2s
   img
     position: absolute
     bottom: -1rem
@@ -80,7 +111,7 @@ $sk-h: 90
     right: 50%
     transform: translateX(-50%)
     z-index: 1
-    // transition: .2s
+    transition: .2s
     @media screen and ( max-width : 768px )
       transition: none
       top: -70vh
@@ -101,7 +132,7 @@ $sk-h: 90
       left: 1rem
       top: 1rem
       font-size: 1.2rem
-  // &:hover
-  //   img
-  //     bottom: 0rem
+  &:hover
+    img
+      bottom: 0rem
 </style>

From 6ef08290e567e7adacacc1fcf7eb245fbab0b756 Mon Sep 17 00:00:00 2001
From: sKawashima <bysk.333@gmail.com>
Date: Mon, 17 Dec 2018 21:48:37 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=E6=96=87=E5=AD=97=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=E3=81=99=E3=82=8B=E6=BA=96=E5=82=99=E3=82=92=E3=81=97?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Member.vue | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/components/Member.vue b/components/Member.vue
index c10d3ea..dcbba91 100644
--- a/components/Member.vue
+++ b/components/Member.vue
@@ -2,13 +2,16 @@
 #member
   #CHARLII_k.item(@click='charlii', :class='{active: isCha}')
     img(src='~/assets/memberCHARLII_k.svg')
-    p CHARLII_k
+    h3 CHARLII_k
+    p やばいやつです。
   #ryu-g.item(@click='ryu', :class='{active: isRyu}')
     img(src='~/assets/memberryu-g.svg')
-    p ryu-g
+    h3 ryu-g
+    p やばいやつです。
   #by_sK.item(@click='sk', :class='{active: isK}')
     img(src='~/assets/memberby_sK.svg')
-    p by_sK
+    h3 by_sK
+    p やばいやつです。
 </template>
 
 <script>
@@ -65,9 +68,13 @@ $size: 5
   background-color: #FFCC00
   color: #FFCC00
   flex-grow: $cha-w
+  p
+    background-color: #FFCC00
+    color: #000
   @media screen and ( max-width : 768px )
     flex-grow: $cha-h
   &.active
+    @extend .active
     flex-grow: $cha-w * $size
     @media screen and ( max-width : 768px )
       flex-grow: $cha-h * $size
@@ -77,9 +84,13 @@ $size: 5
   background-color: #E95513
   color: #E95513
   flex-grow: $ryu-w
+  p
+    background-color: #E95513
+    color: #000
   @media screen and ( max-width : 768px )
     flex-grow: $ryu-h
   &.active
+    @extend .active
     flex-grow: $ryu-w * $size
     @media screen and ( max-width : 768px )
       flex-grow: $ryu-h * $size
@@ -89,15 +100,29 @@ $size: 5
   background-color: lighten(#4e1a68, 25%)
   color: lighten(#4e1a68, 25%)
   flex-grow: $sk-w
+  p
+    background-color: lighten(#4e1a68, 25%)
+    color: #000
   @media screen and ( max-width : 768px )
     flex-grow: $sk-h
   &.active
+    @extend .active
     flex-grow: $sk-w * $size
     @media screen and ( max-width : 768px )
       flex-grow: $sk-h * $size
     &:hover
       img
 
+.active
+  img
+    left: 0
+  p
+    display: block
+    position: absolute
+    top: 50%
+    left: 50%
+    z-index: 100
+
 .item
   position: relative
   // text-align: center
@@ -118,7 +143,7 @@ $size: 5
       bottom: auto
       height: 220vh
       left: 25%
-  p
+  h3
     position: absolute
     left: 2rem
     bottom: 2rem
@@ -132,6 +157,8 @@ $size: 5
       left: 1rem
       top: 1rem
       font-size: 1.2rem
+  p
+    display: none
   &:hover
     img
       bottom: 0rem