MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: プロフィールページにスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-19 15:56:35 +09:00
parent e14fa5cf68
commit 6fd4e4d1f2
3 changed files with 111 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/profile/yuki540.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

27
src/scss/modules/pc/_page-box.scss
View File

@ -6,6 +6,7 @@
background-color: $theme-pink;
transform-origin: right top;
transform: rotate(90deg);
overflow: hidden;
z-index: 1002;
}
@ -51,6 +52,32 @@
overflow: auto;
opacity: 0;
transition: all 0.35s ease 0s;
.page-title {
position: relative;
margin: 50px auto;
width: 600px; 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 ***/

84
src/scss/modules/pc/_profile.scss Normal file
View File

@ -0,0 +1,84 @@
@include pc-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: 12px;
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%;
}
}
}
}
}