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-18 21:39:44 +09:00
parent b8ca4efdd3
commit e5162b7ab3
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/top-page/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

44
src/scss/modules/pc/_top-page.scss
View File

@ -35,6 +35,7 @@
top: calc(50% - 325px); left: calc(50% - 325px); top: calc(50% - 325px); left: calc(50% - 325px);
width: 650px; height: 650px; width: 650px; height: 650px;
border-radius: 50%; border-radius: 50%;
opacity: 0.6;
z-index: 1; z-index: 1;
.wrap { .wrap {
@ -180,15 +181,31 @@
position: absolute; top: 0; position: absolute; top: 0;
width: 200px; height: 50px; width: 200px; height: 50px;
border-radius: 30px; border-radius: 30px;
box-shadow: 0 0 3px rgba(255,255,255,1);
font-size: 17px; font-size: 17px;
font-weight: bold; font-weight: bold;
color: transparent; color: transparent;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
overflow: hidden;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
&::before,
&::after {
content: ""; display: block;
position: absolute;
width: 60%; height: 1px;
background-color: #fff;
opacity: 0.6;
transition: all 0.5s ease 0s;
}
&::before { top: 5px; left: 5px; transform: translateX(calc(-100% + -5px)); }
&::after { bottom: 5px; right: 5px; transform: translateX(calc(100% + 5px)); }
}
a:hover {
transform: scale(1.2); border-radius: 0;
&::before,
&::after { transform: translateX(0); }
} }
a:hover { transform: scale(1.2); }
a:nth-child(1) { left: 0; } a:nth-child(1) { left: 0; }
a:nth-child(2) { right: 0; } a:nth-child(2) { right: 0; }
} }
@ -208,7 +225,7 @@
width: 0px; height: 50px; width: 0px; height: 50px;
border-radius: 30px; border-radius: 30px;
background-color: $theme-purple; background-color: $theme-purple;
box-shadow: 0 0 3px rgba(255,255,255,1); box-shadow: 0 0 3px rgba(255,255,255,0.5);
overflow: hidden; overflow: hidden;
h3 { h3 {
@ -222,6 +239,24 @@
} }
} }
/*** logo ***/
.top-page__logo {
position: absolute;
top: calc(50% - 50px); left: 0;
width: 100%; height: 100px;
background-color: rgba(255,255,255,0.5);
opacity: 0;
z-index: 1;
img {
position: absolute;
left: calc(50% - 150px); top: 0;
display: block;
background-color: rgba(255,255,255,0.2);
height: 100px;
}
}
.top-page[data-state="start"] { .top-page[data-state="start"] {
/*** ring ***/ /*** ring ***/
.top-page__ring { .top-page__ring {
@ -248,6 +283,9 @@
} }
} }
/*** logo ***/
.top-page__logo { animation: fadein 2s ease 2.7s forwards; }
/*** global-nav ***/ /*** global-nav ***/
.top-page__global-nav { .top-page__global-nav {
.nav-box { .nav-box {