114 lines
2.5 KiB
SCSS
114 lines
2.5 KiB
SCSS
//@import "compass/css3";
|
|
|
|
//Variables here:
|
|
//(alongside with commented suggestions)
|
|
$foreground-color:#b85b3f;//black;
|
|
$background-color:#e8e3c7;//white
|
|
$shadow-color:#ba9186;//$foreground-color;
|
|
$distance:8px;
|
|
$cut-distance:3px;//$distance/4;
|
|
$strips-size:6px; //10px
|
|
$strips-ratio:50%;//70%
|
|
$strips-angle:45deg;//90deg;
|
|
|
|
//cray stuff yo. be sure to try (if you please)
|
|
$animate:false;//true
|
|
$fixed:false;//true
|
|
|
|
body{
|
|
font-family: 'Open Sans Condensed', sans-serif;
|
|
font-size:85pt;
|
|
background-color:$background-color;
|
|
text-align:center;
|
|
line-height:1.2em;
|
|
padding-top:70px;
|
|
}
|
|
.dashed-shadow{
|
|
position:relative;
|
|
top:$distance;
|
|
left:$distance;
|
|
display:inline-block;
|
|
color:$shadow-color;
|
|
}
|
|
.dashed-shadow:before{
|
|
content:" ";
|
|
display:block;
|
|
|
|
position:absolute;
|
|
$bleeding-horizontal:10px;
|
|
$bleeding-vertical:0px;
|
|
top:-$bleeding-vertical - $distance;
|
|
left:-$bleeding-vertical - $distance;
|
|
bottom:-$bleeding-horizontal + $distance;
|
|
right:-$bleeding-horizontal + $distance;
|
|
z-index:1;
|
|
$color:$background-color;
|
|
$size:$strips-ratio/2;
|
|
$halfSize:$size/2;
|
|
$p1:$halfSize;
|
|
$p2:50%-$halfSize;
|
|
$p3:50%+$halfSize;
|
|
$p4:100%-$halfSize;
|
|
$transparent:transparentize($color,1);
|
|
@include background-image(linear-gradient($strips-angle,$color $p1, $transparent $p1, $transparent $p2,$color $p2, $color $p3, $transparent $p3, $transparent $p4, $color $p4));
|
|
background-size:$strips-size $strips-size;
|
|
@if($animate){
|
|
animation:dash-animation 30s infinite linear;
|
|
}
|
|
@if($fixed){
|
|
background-attachment:fixed;
|
|
}
|
|
}
|
|
.dashed-shadow:hover:before{
|
|
animation:dash-animation 30s infinite linear;
|
|
}
|
|
|
|
.dashed-shadow:after{
|
|
z-index:2;
|
|
content:attr(data-text);
|
|
position:absolute;
|
|
left:-$distance;
|
|
top:-$distance;
|
|
color:$foreground-color;
|
|
text-shadow:$cut-distance $cut-distance $background-color;
|
|
}
|
|
|
|
//fancy stuff - just useless fluff, don't mind from here onwards
|
|
|
|
.hello{
|
|
font-family:'Cookie',cursive;
|
|
font-size:140pt;
|
|
}
|
|
.sorta-block{
|
|
font-size:50pt;
|
|
line-height:1.1em;
|
|
@include transform(skew(0,-5deg));
|
|
z-index:3;
|
|
position:relative;
|
|
margin-top:20px;
|
|
margin-bottom:10px;
|
|
}
|
|
.sorta{
|
|
border-top:4px solid $foreground-color;
|
|
border-bottom:4px solid $foreground-color;
|
|
|
|
text-transform:uppercase;
|
|
z-index:3;
|
|
//position:relative;
|
|
//display:block;
|
|
//width:300px;
|
|
font-style:italic;
|
|
}
|
|
.hipsterish{
|
|
font-family: 'Sancreek', cursive;
|
|
font-size:70pt;
|
|
}
|
|
.dashed-shadow-text{
|
|
font-size:140pt;
|
|
line-height:0.7em;
|
|
//left:-10px;
|
|
}
|
|
.shadow{
|
|
font-size:120pt;
|
|
line-height:0.8em;
|
|
}
|