SCSS
$color: #661a1a;
$color-d3: darken($color, 5%);
$color-d5: darken($color, 10%);
$color-d8: darken($color, 15%);
$color-d10: darken($color, 20%);
$sun: lighten($color, 30%);
$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: linear-gradient(to bottom, $color-d3 0%, $color 100%);
overflow: hidden;
}
.landscape * {
position: absolute;
bottom: 0;
}
.sun {
left: 60%;
bottom: 150px;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(to bottom, $sun 0%, rgba($sun, 0) 100%);
}
.hills {
left: 50%;
}
.hills div {
overflow: hidden;
border-radius: 8%;
transform: rotate(45deg);
}
.hills div:nth-child(1),
.hills div:nth-child(2),
.hills div:nth-child(3) {
bottom: -350px;
width: 500px;
height: 500px;
background: $color-d3;
}
.hills div:nth-child(1) {
left: -750px;
}
.hills div:nth-child(2) {
left: -250px;
}
.hills div:nth-child(3) {
left: 250px;
}
.hills div:nth-child(4),
.hills div:nth-child(5) {
bottom: -400px;
left: -600px;
width: 500px;
height: 500px;
background: $color-d5;
}
.hills div:nth-child(4) {
left: -500px;
}
.hills div:nth-child(5) {
left: 0;
}
.treeset {
left: 50%;
}
.tree {
width: 4px;
height: 10px;
background: $color-d8;
}
.tree:before {
left: -5px;
bottom: 100%;
width: 14px;
height: 14px;
border-radius: 10px 0 10px 0;
background: $color-d8;
transform: rotate(-45deg);
}
.tree:nth-child(1) { left: -310px; }
.tree:nth-child(2) { left: -290px; }
.tree:nth-child(3) { left: 40px; }
.tree:nth-child(4) { left: 60px; }
.tree:nth-child(5) { left: 80px; }
.tree:nth-child(6) { left: 100px; }
.tree:nth-child(7) { left: 120px; }
.tree:nth-child(8) { left: 140px; }
.tree:nth-child(9) { left: 160px; }
.tree:nth-child(10) { left: 180px; }
.tree:nth-child(11) { left: 200px; }
.tree:nth-child(12) { left: 220px; }
.tree:nth-child(13) { left: 240px; }
.tree:nth-child(14) { left: 260px; }
.tree:nth-child(15) { left: 280px; }
.building {
left: 50%;
width: 250px;
height: 520px;
margin-left: -250px;
}
.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: 55px;
width: 60px;
height: 230px;
}
.t4 {
left: 110px;
width: 60px;
height: 140px;
}
.t5 {
left: 0;
width: 55px;
height: 40px;
}
.t6 {
left: 170px;
width: 80px;
height: 30px;
}
@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;
}
}
