diff --git a/underconstruction/stylus/style.stylus b/underconstruction/stylus/style.stylus new file mode 100644 index 0000000..237933a --- /dev/null +++ b/underconstruction/stylus/style.stylus @@ -0,0 +1,356 @@ +// 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 \ No newline at end of file