SCSS
//-------- Variables --------
$font: Arvo; // Google Font to load
$ms: 100; // Flash interval in ms
$size: 100; // Element size
$tcolor: #FFF; // Text & shadow tint color
$color1: #3498db; // Shadow color 1
$color2: #2980b9; // Shadow color 2
//-------- Basics --------
* {
margin: 0; padding: 0;
box-sizing: border-box;
text-align: center;
}
html, body {
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
a {
position: absolute;
top: 0.3em; left: 0.3em;
text-decoration: none;
color: rgba(white, 0.1);
}
//-------- Font Import --------
@import url('http://fonts.googleapis.com/css?family=#{$font}');
//-------- Background --------
body {
padding: ( $size * 0.05 ) + vw;
background-color: #333;
}
//-------- Text Styles --------
h1 {
color: $tcolor;
font: 700 ( $size * 0.18 ) + vw $font;
margin:
( $size * 0.007 ) + vw
0
0
( $size * -0.06 ) + vw
;
text-transform: uppercase;
letter-spacing: ( $size * -0.001 ) + vw;
span {
letter-spacing: ( $size * 0.005 ) + vw
}
animation: $ms + ms ease-in infinite flash;
}
@function makelongshadow($scolor, $ssize) {
$val: 0px 0px $scolor;
@for $i from 1 through $ssize {
$v: $i/15;
$val: #{$val}, #{$v}vw #{$v}vw #{$scolor};
}
@return $val;
}
@mixin longshadow ($scolor, $ssize) {
text-shadow:
( $size * 0.005 ) + vw
( $size * 0.01 ) + vw
0.3em
rgba($tcolor, 0.4),
( $size * 0.005 ) + vw
( $size * 0.01 ) + vw
0.5em
rgba($tcolor, 0.3),
( $size * 0.005 ) + vw
( $size * 0.01 ) + vw
0.9em
rgba($tcolor, 0.2),
makelongshadow($scolor, $ssize);
}
@keyframes flash {
0% {
@include longshadow($color1, $size);
}
100% {
@include longshadow($color2, $size);
}
}
