356 lines
8.4 KiB
Plaintext
356 lines
8.4 KiB
Plaintext
|
// Please respect a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. That means only share and adapt giving a fair credit and do not use for commercial projects. Thank you.
|
||
|
|
|
||
|
|
@import url('https://fonts.googleapis.com/css?family=Ubuntu')
|
||
|
|
|
||
|
|
$craneWidth = 260px
|
||
|
|
$craneHeight = $craneWidth / 1.53
|
||
|
|
$craneBorder = 1px
|
||
|
|
$teal = rgba(68, 192, 166, 1)
|
||
|
|
$purp = rgba(64, 42, 79, 1)
|
||
|
|
$cityColor = tomato
|
||
|
|
|
||
|
|
#outerCraneContainer
|
||
|
|
position absolute
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
bottom 0
|
||
|
|
overflow hidden
|
||
|
|
display flex
|
||
|
|
justify-content center
|
||
|
|
box-shadow inset 0 -60px 0 -30px $cityColor
|
||
|
|
|
||
|
|
.buildings
|
||
|
|
height ($craneHeight / 2)
|
||
|
|
width 100%
|
||
|
|
left 0
|
||
|
|
div
|
||
|
|
height inherit
|
||
|
|
width ($craneHeight / 4)
|
||
|
|
background $cityColor
|
||
|
|
position absolute
|
||
|
|
bottom 10%
|
||
|
|
&:after
|
||
|
|
content ''
|
||
|
|
width 80%
|
||
|
|
height 60%
|
||
|
|
left 10%
|
||
|
|
bottom 30%
|
||
|
|
background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAFElEQVQImWP4////fwYYIJKDEwAAfPsP8eFXG40AAAAASUVORK5CYII=') repeat
|
||
|
|
position absolute
|
||
|
|
|
||
|
|
.buildings div:nth-of-type(1)
|
||
|
|
width ($craneHeight / 4)
|
||
|
|
height ($craneHeight / 8)
|
||
|
|
right 37%
|
||
|
|
bottom 18%
|
||
|
|
&:after
|
||
|
|
bottom 11%
|
||
|
|
|
||
|
|
|
||
|
|
.buildings div:nth-of-type(2)
|
||
|
|
width ($craneHeight / 3.5)
|
||
|
|
height ($craneHeight / 6)
|
||
|
|
right 30%
|
||
|
|
bottom 35%
|
||
|
|
transform rotate(180deg)
|
||
|
|
&:after
|
||
|
|
width 60%
|
||
|
|
left 11%
|
||
|
|
|
||
|
|
.buildings div:nth-of-type(3)
|
||
|
|
width ($craneHeight / 7)
|
||
|
|
height ($craneHeight / 4.5)
|
||
|
|
left 40%
|
||
|
|
bottom 35%
|
||
|
|
&:after
|
||
|
|
bottom 0
|
||
|
|
width 20%
|
||
|
|
height 85%
|
||
|
|
left 70%
|
||
|
|
|
||
|
|
.buildings div:nth-of-type(4)
|
||
|
|
width ($craneHeight / 2)
|
||
|
|
height ($craneHeight / 8)
|
||
|
|
left 24%
|
||
|
|
bottom 20%
|
||
|
|
&:after
|
||
|
|
background none
|
||
|
|
|
||
|
|
.buildings div:nth-of-type(5)
|
||
|
|
width ($craneHeight / 2.75)
|
||
|
|
height ($craneHeight / 2.5)
|
||
|
|
left 47%
|
||
|
|
bottom 10%
|
||
|
|
&:after
|
||
|
|
bottom 0
|
||
|
|
width 40%
|
||
|
|
height 85%
|
||
|
|
left 20%
|
||
|
|
|
||
|
|
.crane, .buildings
|
||
|
|
position absolute
|
||
|
|
bottom 0
|
||
|
|
|
||
|
|
.crane div
|
||
|
|
border-radius 2px
|
||
|
|
position absolute
|
||
|
|
|
||
|
|
.crane .line
|
||
|
|
border none
|
||
|
|
background $cityColor
|
||
|
|
outline 1px solid transparent
|
||
|
|
z-index 0
|
||
|
|
|
||
|
|
.crane .lineOne
|
||
|
|
width 60%
|
||
|
|
left 11%
|
||
|
|
top 0
|
||
|
|
|
||
|
|
.crane .lineTwo
|
||
|
|
width 19%
|
||
|
|
right 8%
|
||
|
|
top 0
|
||
|
|
|
||
|
|
.crane .line.lineThree
|
||
|
|
height 30%
|
||
|
|
top 22%
|
||
|
|
left 9%
|
||
|
|
&:after
|
||
|
|
content ''
|
||
|
|
position absolute
|
||
|
|
height .2em
|
||
|
|
width 9000%
|
||
|
|
background lighten($cityColor, 20%)
|
||
|
|
display block
|
||
|
|
bottom 0
|
||
|
|
left -4500%
|
||
|
|
border solid $craneBorder $cityColor
|
||
|
|
|
||
|
|
.craneTwo .line.lineThree:after
|
||
|
|
height .1em
|
||
|
|
|
||
|
|
.craneThree .line.lineThree:after
|
||
|
|
height .05em
|
||
|
|
|
||
|
|
.stand
|
||
|
|
height 100%
|
||
|
|
width 5%
|
||
|
|
right 25%
|
||
|
|
z-index 1
|
||
|
|
background linear-gradient(to top, $cityColor, desaturate(lighten($cityColor, 30%), 20%))
|
||
|
|
|
||
|
|
.craneTwo .stand
|
||
|
|
background linear-gradient(to top, $cityColor, desaturate(lighten($cityColor, 25%), 20%))
|
||
|
|
|
||
|
|
.craneThree .stand
|
||
|
|
background linear-gradient(to top, $cityColor, desaturate(lighten($cityColor, 20%), 20%))
|
||
|
|
|
||
|
|
.weight
|
||
|
|
height 20%
|
||
|
|
width 8%
|
||
|
|
right 4%
|
||
|
|
top 12%
|
||
|
|
z-index 2
|
||
|
|
background desaturate(lighten($cityColor, 25%), 10%)
|
||
|
|
|
||
|
|
.craneTwo .weight
|
||
|
|
background desaturate(lighten($cityColor, 20%), 10%)
|
||
|
|
|
||
|
|
.craneThree .weight
|
||
|
|
background desaturate(lighten($cityColor, 15%), 10%)
|
||
|
|
|
||
|
|
.cabin
|
||
|
|
height 9%
|
||
|
|
width 12%
|
||
|
|
right 24%
|
||
|
|
top 20%
|
||
|
|
z-index 2
|
||
|
|
background desaturate(lighten($cityColor, 25%), 10%)
|
||
|
|
&:after
|
||
|
|
content ''
|
||
|
|
position absolute
|
||
|
|
height 10%
|
||
|
|
width 100%
|
||
|
|
background white
|
||
|
|
display block
|
||
|
|
top 60%
|
||
|
|
left 0
|
||
|
|
|
||
|
|
.craneTwo .cabin
|
||
|
|
background desaturate(lighten($cityColor, 20%), 10%)
|
||
|
|
|
||
|
|
.craneThree .cabin
|
||
|
|
background desaturate(lighten($cityColor, 15%), 10%)
|
||
|
|
|
||
|
|
.arm
|
||
|
|
height 7%
|
||
|
|
width 100%
|
||
|
|
top 15%
|
||
|
|
z-index 3
|
||
|
|
background desaturate(lighten($cityColor, 25%), 10%)
|
||
|
|
|
||
|
|
.craneTwo .arm
|
||
|
|
background desaturate(lighten($cityColor, 20%), 10%)
|
||
|
|
|
||
|
|
.craneThree .arm
|
||
|
|
background desaturate(lighten($cityColor, 15%), 10%)
|
||
|
|
|
||
|
|
.crane div.arm
|
||
|
|
border-top-left-radius 10px
|
||
|
|
|
||
|
|
.brick
|
||
|
|
height 6%
|
||
|
|
width 9%
|
||
|
|
bottom 0
|
||
|
|
left 40%
|
||
|
|
background lighten($cityColor, 10%)
|
||
|
|
|
||
|
|
.brickTwo
|
||
|
|
left 48%
|
||
|
|
|
||
|
|
.brickThree
|
||
|
|
bottom 5.5%
|
||
|
|
left 44%
|
||
|
|
|
||
|
|
.craneOne
|
||
|
|
width $craneWidth
|
||
|
|
height $craneHeight
|
||
|
|
left 20%
|
||
|
|
div
|
||
|
|
border solid $craneBorder $cityColor
|
||
|
|
.line
|
||
|
|
height $craneBorder
|
||
|
|
.lineThree
|
||
|
|
width $craneBorder
|
||
|
|
|
||
|
|
.craneTwo
|
||
|
|
width ($craneWidth / 1.3)
|
||
|
|
height ($craneHeight / 1.3)
|
||
|
|
transform scaleX(-1)
|
||
|
|
left 40%
|
||
|
|
z-index -1
|
||
|
|
div
|
||
|
|
border solid 1px $cityColor
|
||
|
|
.line
|
||
|
|
height ($craneBorder / 1.3)
|
||
|
|
.lineThree
|
||
|
|
width ($craneBorder / 1.4)
|
||
|
|
animation-delay 3s
|
||
|
|
.cabin, .arm, .picker, .weight
|
||
|
|
animation-delay 3s
|
||
|
|
|
||
|
|
.craneThree
|
||
|
|
width ($craneWidth / 2)
|
||
|
|
height ($craneHeight / 2)
|
||
|
|
left 60%
|
||
|
|
z-index -1
|
||
|
|
div
|
||
|
|
border solid 1px $cityColor
|
||
|
|
.line
|
||
|
|
height ($craneBorder / 2)
|
||
|
|
.lineThree
|
||
|
|
width ($craneBorder / 2)
|
||
|
|
animation-delay 1.5s
|
||
|
|
.brickThree
|
||
|
|
bottom 5%
|
||
|
|
.brickOne, .brickTwo
|
||
|
|
bottom 0
|
||
|
|
.cabin, .arm, .picker, .weight
|
||
|
|
animation-delay 1.5s
|
||
|
|
|
||
|
|
.crane
|
||
|
|
perspective 600px
|
||
|
|
|
||
|
|
.lineOne
|
||
|
|
transform-origin right 0
|
||
|
|
animation moveLineOne 12s infinite alternate
|
||
|
|
|
||
|
|
.lineTwo
|
||
|
|
transform-origin top left
|
||
|
|
animation moveLineTwo 12s infinite alternate
|
||
|
|
|
||
|
|
.lineThree
|
||
|
|
transform-origin right center
|
||
|
|
animation moveLineThree 12s ease-in-out infinite alternate
|
||
|
|
|
||
|
|
.cabin, .arm, .picker
|
||
|
|
transform-origin 80% center
|
||
|
|
animation moveCrane 12s infinite alternate
|
||
|
|
|
||
|
|
.weight
|
||
|
|
transform-origin 0 center
|
||
|
|
animation moveWeight 12s infinite alternate
|
||
|
|
|
||
|
|
@keyframes moveCrane
|
||
|
|
0%, 20%
|
||
|
|
transform rotateY(0)
|
||
|
|
70%, 100%
|
||
|
|
transform rotateY(45deg)
|
||
|
|
|
||
|
|
@keyframes moveWeight
|
||
|
|
0%, 20%
|
||
|
|
transform rotateY(0) translateX(0)
|
||
|
|
70%, 100%
|
||
|
|
transform rotateY(45deg) translateX(-50%)
|
||
|
|
|
||
|
|
@keyframes moveLineOne
|
||
|
|
0%, 20%
|
||
|
|
transform rotateY(0) rotateZ(-10deg)
|
||
|
|
70%, 100%
|
||
|
|
transform rotateY(45deg) rotateZ(-10deg)
|
||
|
|
|
||
|
|
@keyframes moveLineTwo
|
||
|
|
0%, 20%
|
||
|
|
transform rotateY(0) rotateZ(29deg)
|
||
|
|
70%, 100%
|
||
|
|
transform rotateY(15deg) rotateZ(29deg)
|
||
|
|
|
||
|
|
@keyframes moveLineThree
|
||
|
|
0%
|
||
|
|
transform translate(0, 0)
|
||
|
|
20%
|
||
|
|
transform translate(2500%, -18%)
|
||
|
|
60%
|
||
|
|
transform translate(11000%, -25%)
|
||
|
|
70%
|
||
|
|
transform translate(9100%, -25%)
|
||
|
|
height 30%
|
||
|
|
90%, 100%
|
||
|
|
transform translate(9100%, -15%)
|
||
|
|
height 80%
|
||
|
|
|
||
|
|
html
|
||
|
|
-ms-text-size-adjust 100%
|
||
|
|
-webkit-text-size-adjust 100%
|
||
|
|
-webkit-tap-highlight-color transparent
|
||
|
|
|
||
|
|
html, body
|
||
|
|
height 100%
|
||
|
|
|
||
|
|
*
|
||
|
|
box-sizing border-box
|
||
|
|
|
||
|
|
body
|
||
|
|
background linear-gradient(to top, lighten($cityColor, 40%), hue($cityColor, 40%))
|
||
|
|
-webkit-font-smoothing antialiased
|
||
|
|
-moz-osx-font-smoothing grayscale
|
||
|
|
text-shadow 1px 1px 1px rgba(0,0,0,0.004)
|
||
|
|
|
||
|
|
#content
|
||
|
|
height 100%
|
||
|
|
width 100%
|
||
|
|
display flex
|
||
|
|
flex-direction column
|
||
|
|
align-items center
|
||
|
|
justify-content center
|
||
|
|
font-family Ubuntu
|
||
|
|
color white
|
||
|
|
h1, p
|
||
|
|
margin -8rem 0 0 1rem
|
||
|
|
p
|
||
|
|
margin-top .5rem
|
||
|
|
|
||
|
|
#license
|
||
|
|
position absolute
|
||
|
|
bottom 0
|
||
|
|
right 5px
|