#title
#mug
#mug-inside
#coffee-border
.spot
.spot-part
xxxxxxxxxx
@import url(http://fonts.googleapis.com/css?family=Amatic+SC);
$size: 15em;
$border: 2em;
$ear: 4.5em;
$mug-color: #C73B0B;
$mug-inside-color: #1F0505;
$spot-size: random();
html, body {
margin: 0;
padding: 0;
background-color: #E7A136
}
#title {
font: 7em Amatic SC;
position: absolute;
top: 5%;
left: 50%;
margin-left: -.8em;
}
#mug {
position: absolute;
left: 50%;
margin-left: -$size / 2;
top: 50%;
margin-top: -$size / 2;
width: $size;
height: $size;
background-color: $mug-color;
border-radius: 100%;
box-shadow: 8px 9px #222;
#coffee-border {
position: absolute;
left: 50%;
margin-left: -$size / 2;
top: 50%;
margin-top: -$size / 2;
height: $size - $border;
width: $size - $border;
border: $border / 2 $mug-color solid;
border-radius: 100%;
}
&::before {
position: absolute;
top: ($size / 2) - (($ear / 4) / 2);
left: -$ear + .1;
content: "";
width: $ear;
height: $ear / 3;
background-color: $mug-color;
border-radius: 8px 0 0 8px;
box-shadow: 5px 10px 0 0 #222;
z-index: 0;
}
#mug-inside {
position: absolute;
left: $border / 2;
top: $border / 2;
height: $size - $border;
width: $size - $border;
background-color: $mug-inside-color;
border-radius: 100%;
box-shadow: 15px 10px 0 #161616 inset;
}
}
.spot {
height: $size - $border;
width: $size - $border;
box-shadow: 10px 20px 0 3px $mug-inside-color;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -$size / 2 + 5;
margin-left: -$size / 2 + 4;
z-index: -1;
/* This is a part of the spot, but if you uncomment it, it's gonna be ugly.
.spot-part {
position: relative;
top: -1.3em;
right: 0em;
height: $size - $border;
width: $size - $border;
box-shadow: 5px 10px 0 3px $mug-inside-color;
border-radius: 100%;
}*/
}