SCSS
$color: #864;
$color-d2: darken($color, 5%);
$color-d3: darken($color, 10%);
$color-d5: darken($color, 15%);
$color-d8: darken($color, 20%);
$color-d10: darken($color, 25%);
$sun: #ff9;
$h: darken($color, 18%);
$v: darken($color, 8%);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:before, *:after {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
}
html, body {
height: 100vh;
background: $color-d10;
overflow: hidden;
}
.landscape {
position: relative;
height: 600px;
background: $color;
overflow: hidden;
}
.landscape * {
position: absolute;
bottom: 0;
}
.sun {
left: 60%;
bottom: 350px;
width: 120px;
height: 120px;
border-radius: 50%;
background: $sun;
box-shadow: 0 0 150px $sun;
}
.hills {
left: 50%;
}
.hills div {
overflow: hidden;
border-radius: 2%;
transform: rotate(45deg);
}
.hills div:nth-child(1),
.hills div:nth-child(2) {
bottom: -450px;
width: 700px;
height: 700px;
background: $color-d2;
}
.hills div:nth-child(1) {
left: -600px;
}
.hills div:nth-child(2) {
left: 0;
}
.hills div:nth-child(3),
.hills div:nth-child(4),
.hills div:nth-child(5) {
bottom: -350px;
width: 500px;
height: 500px;
background: $color-d3;
}
.hills div:nth-child(3) {
left: -750px;
}
.hills div:nth-child(4) {
left: -250px;
}
.hills div:nth-child(5) {
left: 250px;
}
.hills div:nth-child(6),
.hills div:nth-child(7) {
bottom: -400px;
left: -600px;
width: 500px;
height: 500px;
background: $color-d5;
}
.hills div:nth-child(6) {
left: -500px;
}
.hills div:nth-child(7) {
left: 0;
}
.building {
left: 50%;
width: 250px;
height: 520px;
margin-left: -125px;
}
.tower {
background: linear-gradient(to bottom, $color-d5 0%, lighten($color-d10, 2%) 100%);
box-shadow:
inset 0 5px 0 $color-d8,
inset 0 -1px 0 $color-d8,
inset 0 -5px 0 $color-d10,
inset 1px 0 0 $color-d8,
inset -1px 0 0 $color-d8;
overflow: hidden;
}
.t1 {
left: 110px;
width: 30px;
height: 520px;
}
.t2 {
left: 80px;
width: 60px;
height: 380px;
}
.t3 {
left: 120px;
width: 60px;
height: 230px;
}
.t4 {
left: 60px;
width: 60px;
height: 140px;
}
.t5 {
left: 250px;
width: 55px;
height: 150px;
}
.t6 {
left: 175px;
width: 80px;
height: 30px;
}
.t7 {
left: -50px;
width: 125px;
height: 55px;
}
.t8 {
left: -160px;
width: 80px;
height: 200px;
}
.t9 {
left: -300px;
width: 100px;
height: 30px;
}
.t10 {
left: 350px;
width: 120px;
height: 50px;
}
@function winv($c) {
$val: 0px 0px $c;
@for $i from 1 through 25 {
$val: #{$val}, #{$i*5}px 0 $v;
}
@return $val;
}
@mixin wv($c) {
box-shadow: winv($c);
}
.tower:before {
top: 5px;
left: 0;
width: 1px;
height: calc(100% - 11px);
@include wv($v);
}
@function winh($c) {
$val: 0px 0px $c;
@for $j from 1 through 50 {
$val: #{$val}, 0 #{$j*-10}px $h;
}
@return $val;
}
@mixin wh($c) {
box-shadow: winh($c);
}
.tower:after {
bottom: 5px;
left: 0;
width: 100%;
height: 1px;
@include wh($h);
}
.d {
left: 50%;
z-index: 1;
margin-left: -5px;
width: 11px;
height: 12px;
border: 1px solid $color-d10;
border-bottom: 0;
background: $color-d8;
}
.d:before {
left: 4px;
width: 1px;
height: 12px;
background: $color-d10;
}
.d:after {
top: 4px;
left: 2px;
width: 5px;
height: 3px;
border-left: 1px solid $color-d10;
border-right: 1px solid $color-d10;
}
.radio {
width: 2px;
background: $color-d8;
}
.r1 {
left: 124px;
height: 70px;
bottom: 520px;
}
.r2 {
left: 95px;
height: 40px;
bottom: 380px;
}
.radio:after {
left: -4px;
bottom: 0;
width: 10px;
height: 4px;
background: $color-d8;
}
/* Codepen Preview Mode */
@media only screen and (max-height: 450px) {
.landscape {
margin-top: -220px;
}
.sun {
bottom: 180px;
}
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
