101 行
1.9 KiB
SCSS
101 行
1.9 KiB
SCSS
.logo-img {
|
|
border: 2px solid $suwa03;
|
|
box-shadow: 0 0 7px 3px $suwa04;
|
|
}
|
|
|
|
.logo-sns {
|
|
transition: background 0.3s, color 0.3s;
|
|
background-color: $black2;
|
|
border: 1px solid $white2;
|
|
padding: 8px;
|
|
margin: 4px 10px;
|
|
}
|
|
|
|
.logo-sns:hover {
|
|
background-color: $white2;
|
|
border: 1px solid $black2;
|
|
}
|
|
|
|
.logo-play {
|
|
transition: background 0.3s, color 0.3s;
|
|
background-color: transparent;
|
|
border-radius: 25%;
|
|
padding: 2px;
|
|
}
|
|
|
|
.logo-play:hover {
|
|
background-color: $ng4;
|
|
}
|
|
|
|
.logo-br {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 16px;
|
|
}
|
|
|
|
/// Stroke font-character
|
|
/// @param {Integer} $stroke - Stroke width
|
|
/// @param {Color} $color - Stroke color
|
|
/// @return {List} - text-shadow list
|
|
@function stroke($stroke, $color) {
|
|
$shadow: ();
|
|
$from: $stroke*-1;
|
|
@for $i from $from through $stroke {
|
|
@for $j from $from through $stroke {
|
|
$shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
|
|
}
|
|
}
|
|
@return $shadow;
|
|
}
|
|
/// Stroke font-character
|
|
/// @param {Integer} $stroke - Stroke width
|
|
/// @param {Color} $color - Stroke color
|
|
/// @return {Style} - text-shadow
|
|
@mixin stroke($stroke, $color) {
|
|
text-shadow: stroke($stroke, $color);
|
|
}
|
|
|
|
@keyframes sitenamehover {
|
|
0% { text-shadow: stroke(4, $suwa04); }
|
|
25% { text-shadow: stroke(4, $suwa03); }
|
|
50% { text-shadow: stroke(4, $suwa00); }
|
|
75% { text-shadow: stroke(4, $suwa03); }
|
|
100% { text-shadow: stroke(4, $suwa04); }
|
|
}
|
|
|
|
.logo-c {
|
|
font-size: 64px;
|
|
font-weight: bolder;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-shadow: stroke(4, $suwa04);
|
|
}
|
|
|
|
.logo-c:hover {
|
|
animation: sitenamehover 2s linear infinite;
|
|
}
|
|
|
|
@media (max-width : 1200px) {
|
|
.logo-c {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width : 968px) {
|
|
.logo-c {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.logo-br, .nomobile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width : 525px) {
|
|
.logo-br, .nomobile {
|
|
display: none;
|
|
}
|
|
}
|