From fae07e97b08917853066ad345cf8da241ffda5a9 Mon Sep 17 00:00:00 2001 From: yuki540 Date: Thu, 19 Apr 2018 16:14:52 +0900 Subject: [PATCH 1/3] =?UTF-8?q?add:=20=E3=82=BF=E3=83=96=E3=83=AC=E3=83=83?= =?UTF-8?q?=E3=83=88=E7=89=88=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=82=B7=E3=83=BC=E3=83=88=E3=82=92=E3=82=B3=E3=83=94=E3=83=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scss/modules/sp/_page-box.scss | 165 +++++++++++++++++++++++++++++ src/scss/modules/sp/_profile.scss | 84 +++++++++++++++ 2 files changed, 249 insertions(+) create mode 100644 src/scss/modules/sp/_page-box.scss create mode 100644 src/scss/modules/sp/_profile.scss diff --git a/src/scss/modules/sp/_page-box.scss b/src/scss/modules/sp/_page-box.scss new file mode 100644 index 0000000..c81333e --- /dev/null +++ b/src/scss/modules/sp/_page-box.scss @@ -0,0 +1,165 @@ +@include tablet-layout { + .page-box { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background-color: $theme-pink; + transform-origin: right top; + transform: rotate(90deg); + overflow: hidden; + z-index: 1002; + } + + /*** bg ***/ + .page-box__bg { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + + div { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + transform-origin: right top; + transform: rotate(90deg); + } + div:nth-child(1) { + background-color: $theme-light-pink; + } + div:nth-child(2) { + background-color: $theme-bg; + + &::after { + content: ""; display: block; + width: 100%; height: 100%; + background-size: 15px; + background-image: url(../images/bg.png); + opacity: 0.4; + } + } + } + + /*** content ***/ + .page-box__content { + position: absolute; + top: 20px; left: 20px; + width: calc(100% - 40px); height: calc(100% - 40px); + border: solid 10px $theme-pink; + box-sizing: border-box; + background-color: $theme-bg; + border-radius: 15px; + box-shadow: 0 0 15px rgba(0,0,0,0.6) inset; + overflow: auto; + opacity: 0; + transition: all 0.35s ease 0s; + + .page-title { + position: relative; + margin: 50px auto; + width: 500px; height: 45px; + + div { + position: absolute; + right: 0; top: 0; + height: 100%; + } + div:nth-child(1) { width: 100%; background-color: $theme-gray; } + div:nth-child(2) { width: calc(100% - 15px); background-color: $theme-light-purple; } + div:nth-child(3) { width: calc(100% - 30px); background-color: $theme-light-pink; } + div:nth-child(4) { width: calc(100% - 45px); background-color: $theme-pink; } + + h2 { + position: absolute; + top: 0; left: 0; + width: 100%; height: 45px; + font-size: 20px; + color: #fff; + text-align: center; + line-height: 45px; + } + } + } + + /*** close-btn ***/ + .page-box__close-btn { + position: absolute; + top: 5px; right: 5px; + width: 100px; height: 100px; + display: block; + transform: translate(calc(100% + 20px), calc(-100% + -20px)); + z-index: 5; + + section { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + box-shadow: 0 0 5px rgba(0,0,0,0.4); + border-radius: 3px; + transition: all 0.35s ease 0s; + } + section:nth-child(1) { + background-color: $theme-pink; + transform: rotate(0deg); + } + section:nth-child(2) { + background-color: $theme-bg; + + &::before, + &::after { + content: ""; display: block; + position: absolute; + top: 49px; left: 20px; + width: 60px; height: 1px; + border-top: dashed 2px $theme-purple; + box-sizing: border-box; + opacity: 0.7; + } + &::before { transform: rotate(45deg); } + &::after { transform: rotate(-45deg); } + } + } + .page-box__close-btn:hover { + section:nth-child(1) { background-color: $theme-purple; } + section:nth-child(2) { background-color: #eee; } + } + .page-box__close-btn:hover ~ .page-box__content { border-color: $theme-purple; } + + .page-box[data-state="true"] { + animation: page-box__show 0.35s ease 0s forwards; + + /*** bg ***/ + .page-box__bg { + div:nth-child(1) { animation: page-box__show 0.35s ease 0.1s forwards; } + div:nth-child(2) { animation: page-box__show 0.35s ease 0.2s forwards; } + } + + /*** content ***/ + .page-box__content { + animation: page-box__show-content 0.6s ease 0.55s forwards; + } + + /*** close-btn ***/ + .page-box__close-btn { + animation: page-box__show-close-btn 0.6s ease 0.9s forwards; + section:nth-child(1) { animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; } + } + } + + .page-box[data-state="false"] { + transform: rotate(0deg); + animation: page-box__hidden 0.35s ease-in-out 0.2s forwards; + + /*** bg ***/ + .page-box__bg { + div { transform: rotate(0deg); } + div:nth-child(1) { animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; } + div:nth-child(2) { animation: page-box__hidden 0.35s ease-in-out 0s forwards; } + } + + /*** content ***/ + .page-box__content, + .page-box__close-btn { + animation: fadeout 0.2s ease 0s forwards; + } + } +} diff --git a/src/scss/modules/sp/_profile.scss b/src/scss/modules/sp/_profile.scss new file mode 100644 index 0000000..c20aafb --- /dev/null +++ b/src/scss/modules/sp/_profile.scss @@ -0,0 +1,84 @@ +@include tablet-layout { + .profile-page {} + + /*** body ***/ + .profile-page__body { + width: 600px; + margin: 0 auto; + + .icon { + position: relative; + width: 150px; height: 150px; + margin: 0 auto; + border: solid 5px $theme-purple; + background-color: $theme-purple; + border-radius: 50%; + box-sizing: border-box; + + &:after { + position: absolute; + top: 0; left: 0; + content: ""; display: block; + width: 100%; height: 100%; + border-radius: 50%; + background-image: url(../images/profile/yuki540.png); + background-size: cover; + background-position: center; + } + + div { + position: absolute; + background-color: $theme-purple; + } + div:nth-child(1) { width: 25px; height: 100px; left: 0; bottom: -5px; border-radius: 20px; } + div:nth-child(2) { width: 10px; height: 80px; left: 40px; bottom: -10px; border-radius: 4px; } + div:nth-child(3) { width: 18px; height: 80px; left: calc(50% - 6px); bottom: -50px; border-radius: 10px; } + div:nth-child(4) { width: 12px; height: 80px; right: 0px; bottom: -3px; border-radius: 8px; } + } + + .name { + margin: 0 auto; + margin-top: 60px; + width: 150px; height: 40px; + border-left: solid 15px $theme-purple; + background-color: #fff; + padding: 0 5px; + box-shadow: 0 0 5px rgba(0,0,0,0.4); + font-size: 25px; + color: #555; + font-weight: bold; + text-align: center; + line-height: 40px; + transform: rotate(-5deg); + } + + .info { + margin: 0 auto; + margin-top: 40px; + + .info-li { + position: relative; + width: 400px; + padding: 0 10px; + margin: 0 auto; + margin-bottom: 15px; + border-bottom: solid 1px $theme-light-pink; + + span { + font-size: 14px; + color: $theme-light-purple; + margin-right: 5px; + } + + &::after { + position: absolute; + left: -15px; bottom: -5px; + content: ""; display: block; + width: 10px; height: 10px; + background-color: $theme-light-pink; + border-radius: 50%; + } + } + } + } +} From cc4c00f2f3a155e0e57230ac6a1153a109d5f3cb Mon Sep 17 00:00:00 2001 From: yuki540 Date: Thu, 19 Apr 2018 16:27:56 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20sp=E3=81=AE=E3=81=9F=E3=82=81?= =?UTF-8?q?=E6=96=87=E3=82=92=E5=B0=91=E3=81=97=E7=9F=AD=E3=81=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 1d2ce20..1ef9a1a 100644 --- a/public/index.html +++ b/public/index.html @@ -413,7 +413,7 @@ Job：ニート（通う理由がなく、専門学校退学した）
- Love：アニメ, 由比ヶ浜結衣, ミライアカリ, ココロヤミ + Love：由比ヶ浜結衣, ミライアカリ, ココロヤミ
From 52eecf99aa31375ab60e1b04d422511fc67e3fcc Mon Sep 17 00:00:00 2001 From: yuki540 Date: Thu, 19 Apr 2018 16:28:27 +0900 Subject: [PATCH 3/3] =?UTF-8?q?update:=20sp=E7=94=A8=E3=81=AB=E3=82=B9?= =?UTF-8?q?=E3=82=BF=E3=82=A4=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 --- src/scss/modules/sp/_page-box.scss | 26 +++++++++++++------------- src/scss/modules/sp/_profile.scss | 9 +++------ src/scss/modules/sp/_top-page.scss | 2 +- 3 files changed, 17 insertions(+), 20 deletions(-) diff --git a/src/scss/modules/sp/_page-box.scss b/src/scss/modules/sp/_page-box.scss index c81333e..f6d09a8 100644 --- a/src/scss/modules/sp/_page-box.scss +++ b/src/scss/modules/sp/_page-box.scss @@ -1,4 +1,4 @@ -@include tablet-layout { +@include sp-layout { .page-box { position: absolute; top: 0; left: 0; @@ -42,9 +42,9 @@ /*** content ***/ .page-box__content { position: absolute; - top: 20px; left: 20px; - width: calc(100% - 40px); height: calc(100% - 40px); - border: solid 10px $theme-pink; + top: 8px; left: 8px; + width: calc(100% - 16px); height: calc(100% - 16px); + border: solid 5px $theme-pink; box-sizing: border-box; background-color: $theme-bg; border-radius: 15px; @@ -56,7 +56,7 @@ .page-title { position: relative; margin: 50px auto; - width: 500px; height: 45px; + width: 280px; height: 40px; div { position: absolute; @@ -64,18 +64,18 @@ height: 100%; } div:nth-child(1) { width: 100%; background-color: $theme-gray; } - div:nth-child(2) { width: calc(100% - 15px); background-color: $theme-light-purple; } - div:nth-child(3) { width: calc(100% - 30px); background-color: $theme-light-pink; } - div:nth-child(4) { width: calc(100% - 45px); background-color: $theme-pink; } + div:nth-child(2) { width: calc(100% - 10px); background-color: $theme-light-purple; } + div:nth-child(3) { width: calc(100% - 20px); background-color: $theme-light-pink; } + div:nth-child(4) { width: calc(100% - 30px); background-color: $theme-pink; } h2 { position: absolute; top: 0; left: 0; - width: 100%; height: 45px; + width: 100%; height: 40px; font-size: 20px; color: #fff; text-align: center; - line-height: 45px; + line-height: 40px; } } } @@ -84,7 +84,7 @@ .page-box__close-btn { position: absolute; top: 5px; right: 5px; - width: 100px; height: 100px; + width: 50px; height: 50px; display: block; transform: translate(calc(100% + 20px), calc(-100% + -20px)); z-index: 5; @@ -108,8 +108,8 @@ &::after { content: ""; display: block; position: absolute; - top: 49px; left: 20px; - width: 60px; height: 1px; + top: 24px; left: 10px; + width: 30px; height: 1px; border-top: dashed 2px $theme-purple; box-sizing: border-box; opacity: 0.7; diff --git a/src/scss/modules/sp/_profile.scss b/src/scss/modules/sp/_profile.scss index c20aafb..c7e13ef 100644 --- a/src/scss/modules/sp/_profile.scss +++ b/src/scss/modules/sp/_profile.scss @@ -1,11 +1,8 @@ -@include tablet-layout { +@include sp-layout { .profile-page {} /*** body ***/ .profile-page__body { - width: 600px; - margin: 0 auto; - .icon { position: relative; width: 150px; height: 150px; @@ -58,14 +55,14 @@ .info-li { position: relative; - width: 400px; + width: 80%; padding: 0 10px; margin: 0 auto; margin-bottom: 15px; border-bottom: solid 1px $theme-light-pink; span { - font-size: 14px; + font-size: 10px; color: $theme-light-purple; margin-right: 5px; } diff --git a/src/scss/modules/sp/_top-page.scss b/src/scss/modules/sp/_top-page.scss index a5c22fc..ccf244a 100644 --- a/src/scss/modules/sp/_top-page.scss +++ b/src/scss/modules/sp/_top-page.scss @@ -5,7 +5,7 @@ width: 100%; height: 100%; background-color: $theme-bg; overflow: hidden; - z-index: 996; + z-index: 1001; &::after { content: ""; display: block;