55 行
3.3 KiB
SCSS
55 行
3.3 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 { padding: 8px; }
|
|
|
|
/// 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: -4px -4px 0 $suwa04, -4px -3px 0 $suwa04, -4px -2px 0 $suwa04, -4px -1px 0 $suwa04, -4px 0px 0 $suwa04, -4px 1px 0 $suwa04, -4px 2px 0 $suwa04, -4px 3px 0 $suwa04, -4px 4px 0 $suwa04, -3px -4px 0 $suwa04, -3px -3px 0 $suwa04, -3px -2px 0 $suwa04, -3px -1px 0 $suwa04, -3px 0px 0 $suwa04, -3px 1px 0 $suwa04, -3px 2px 0 $suwa04, -3px 3px 0 $suwa04, -3px 4px 0 $suwa04, -2px -4px 0 $suwa04, -2px -3px 0 $suwa04, -2px -2px 0 $suwa04, -2px -1px 0 $suwa04, -2px 0px 0 $suwa04, -2px 1px 0 $suwa04, -2px 2px 0 $suwa04, -2px 3px 0 $suwa04, -2px 4px 0 $suwa04, -1px -4px 0 $suwa04, -1px -3px 0 $suwa04, -1px -2px 0 $suwa04, -1px -1px 0 $suwa04, -1px 0px 0 $suwa04, -1px 1px 0 $suwa04, -1px 2px 0 $suwa04, -1px 3px 0 $suwa04, -1px 4px 0 $suwa04, 0px -4px 0 $suwa04, 0px -3px 0 $suwa04, 0px -2px 0 $suwa04, 0px -1px 0 $suwa04, 0px 0px 0 $suwa04, 0px 1px 0 $suwa04, 0px 2px 0 $suwa04, 0px 3px 0 $suwa04, 0px 4px 0 $suwa04, 1px -4px 0 $suwa04, 1px -3px 0 $suwa04, 1px -2px 0 $suwa04, 1px -1px 0 $suwa04, 1px 0px 0 $suwa04, 1px 1px 0 $suwa04, 1px 2px 0 $suwa04, 1px 3px 0 $suwa04, 1px 4px 0 $suwa04, 2px -4px 0 $suwa04, 2px -3px 0 $suwa04, 2px -2px 0 $suwa04, 2px -1px 0 $suwa04, 2px 0px 0 $suwa04, 2px 1px 0 $suwa04, 2px 2px 0 $suwa04, 2px 3px 0 $suwa04, 2px 4px 0 $suwa04, 3px -4px 0 $suwa04, 3px -3px 0 $suwa04, 3px -2px 0 $suwa04, 3px -1px 0 $suwa04, 3px 0px 0 $suwa04, 3px 1px 0 $suwa04, 3px 2px 0 $suwa04, 3px 3px 0 $suwa04, 3px 4px 0 $suwa04, 4px -4px 0 $suwa04, 4px -3px 0 $suwa04, 4px -2px 0 $suwa04, 4px -1px 0 $suwa04, 4px 0px 0 $suwa04, 4px 1px 0 $suwa04, 4px 2px 0 $suwa04, 4px 3px 0 $suwa04, 4px 4px 0 $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; }
|
|
} |