- title = 'Paróquia'
- reference_post = 'https://masp.org.br/exposicoes/tarsila-popular'
- reference_post_title = 'Capivari'
- author_name = 'Tarsila do Amaral'
- author_profile = 'https://pt.wikipedia.org/wiki/Tarsila_do_Amaral'

figure
  .figure-content
    .ground
      
      #tower.block
        .face-top
        .face-front
          .window
          .door
        .face-side
          .window
        
      #tower-roof.pyramid
        .face-top
        .face-front
        .face-side
      
      #left-wall.block
        .face-top
        .face-front
        .face-side
          .window
          .window
          .window
      
      #right-wall.block
        .face-top
        .face-front
          .window
          .window
          .window
        .face-side
        
      #tree-1.tree
      #tree-2.tree
      #tree-3.tree
      #tree-4.tree
      
    .overlay


  br
  
  figcaption
    strong.figcaption-title= title
    br
    .figcaption-description
      | inspired in
      |
      a.figcaption-hyperlink(href=reference_post target='_blank')
        = reference_post_title
      |
      | by
      |
      a.figcaption-hyperlink(href=author_profile target='_blank')
        = author_name

#tower
  --sX: 60px
  --sY: 60px
  --sZ: 140px
  --cF: #FFF
  --cS: #F6F6F6
  
  .face-front
    border-top: 7px solid #E6E6E6
    border-bottom: 10px solid #F6F6F6
    display: flex
    flex-direction: column
    justify-content: space-between
    align-items: center
    
    .window
      width: 40px
      height: 40px
      margin-top: 10px
      background-color: #888
      border-top: 2px solid #AAA
      border-right: 7px solid #BBB
      border-radius: 23px 23px 0 0
    
    .door
      width: 30px
      height: 40px
      margin-bottom: -10px
      background-color: #B96
      border-top: 1px solid #CCC
      border-right: 5px solid #DDD
      border-radius: 15px 15px 0 0
      
  .face-side
    border-right: 7px solid #BBB
    border-left: 10px solid #DDD
    display: flex
    justify-content: flex-end
    align-items: center
    
    .window
      width: 40px
      height: 40px
      margin-right: 10px
      background-color: #666
      border-top: 7px solid #BBB
      border-right: 2px solid #AAA
      border-radius: 0 23px 23px 0
    
#tower-roof
  --sX: 70px
  --sY: 70px
  --sZ: 100px
  --pZ: 135px
  --cF: #F96
  --cS: #E74

#left-wall
  --sX: 80px
  --sY: 240px
  --sZ: 100px
  --pX: 40px
  --pY: -150px
  --cS: #EEE
  --cT: #E74
  
  .face-side
    padding: 45px 0
    border-right: 5px solid #CCC
    border-left: 10px solid #DDD
    display: flex
    flex-direction: column
    justify-content: space-around
    align-items: center
    
    .window
      width: 30px
      height: 63px
      background-color: #666
      border-top: 2px solid #AAA
      border-left: 7px solid #BBB
      border-radius: 15px 15px 0 0
      transform: rotate(90deg)
  
  .face-top
    transform: translateZ(var(--sZ)) rotateY(-45deg) translateZ(33px)
  
#right-wall
  --sX: 340px
  --sY: 80px
  --sZ: 60px
  --pX: 200px
  --pY: -40px
  --cT: #F96
  --cF: #FFF
  
  .face-front
    padding: 0 45px
    display: flex
    border-top: 7px solid #DDD
    border-bottom: 10px solid #EEE
    justify-content: space-around
    align-items: center
    
    .window
      width: 30px
      height: 33px
      background-color: #888
      border-top: 2px solid #BBB
      border-right: 7px solid #CCC
      border-radius: 15px 15px 0 0
  
  .face-top
    transform: translateZ(var(--sZ)) rotateX(-45deg) translateZ(33px)

#tree-1
  --sX: 80px
  --sZ: 200px
  --pX: -210px
  --pY: -330px
  
#tree-2
  --sX: 30px
  --sZ: 75px
  --pX: -130px
  --pY: -130px
  
#tree-3
  --sX: 60px
  --sZ: 250px
  --pX: 110px
  --pY: -330px
  
#tree-4
  --sX: 30px
  --sZ: 75px
  --pX: 200px
  --pY: -200px

  
// Figure Layout 📰

*
  box-sizing: border-box

.figure-content
  background-image: linear-gradient(125deg, #BEF, #FEB)
  display: flex
  justify-content: center
  align-items: center
  perspective: 500px
  transition: perspective 300ms
  
  &:hover
    perspective: 750px
  
    .ground
      transform: rotateX(100deg) translate3D(0, 50px, -155px) rotateZ(7deg)
  
.ground
  width: 1000px
  height: 1000px
  background-color: #FEB
  display: flex
  justify-content: center
  align-items: center
  transform: rotateX(110deg) translate3D(0, 100px, -180px)
  transform-style: preserve-3d
  transition: transform 300ms
  flex: 0 0 auto
  
  
.block, .pyramid
  --pX: 0px
  --pY: 0px
  --pZ: 0px
  width: var(--sX)
  height: var(--sY)
  transform: rotateZ(-45deg) translate3d(var(--pX), var(--pY), var(--pZ))
  transform-style: preserve-3d
  position: absolute
  
  .face-top
    width: var(--sX)
    height: var(--sY)
    background-color: var(--cT, none)
    transform: translateZ(var(--sZ))
    
  .face-front
    width: var(--sX)
    height: var(--sZ)
    margin-top: calc(var(--sZ) * -1)
    background-color: var(--cF, none)
    transform: rotateX(-90deg)
    transform-origin: bottom center
    
  .face-side
    width: var(--sZ)
    height: var(--sY)
    margin-top: calc(var(--sY) * -1)
    background-color: var(--cS, none)
    transform: rotateY(-90deg)
    transform-origin: center left
    
.pyramid
  .face-top
    opacity: 0
    
  .face-front
    clip-path: polygon(0 100%, 50% 0, 100% 100%)
    transform: rotateX(-69.4deg)
    
  .face-side
    clip-path: polygon(0 100%, 0 0, 100% 50%)
    transform: rotateY(-69.4deg)
    
.tree
  --pX: 0
  --pY: 0
  --pZ: 0
  width: var(--sX)
  height: var(--sZ)
  background: var(--c, #8C5)
  border-top: 1px solid #AE7
  border-right: 3px solid #AE7
  border-bottom: 5px solid #7B4
  border-top-left-radius: 50% 90%
  border-top-right-radius: 50% 90%
  border-bottom-left-radius: 50% 10%
  border-bottom-right-radius: 50% 10%
  transform: translate3d(var(--pX), var(--pY), var(--pZ)) rotateX(-90deg)
  transform-origin: bottom center
  position: absolute
  
.overlay
  width: 550px
  height: 400px
  background-image: linear-gradient(125deg, #24F, #F92)
  mix-blend-mode: soft-light
  position: absolute

  
// Page layout 📰

body
  height: 100vh
  background-color: #FFF
  overflow: hidden
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
 
figcaption
  margin: 0 5px
  color: #111
  font-size: 16px
  font-weight: 300
  font-family: 'Roboto', sans-serif
  position: absolute
  
.figcaption-title
  font-size: 1.3em

.figcaption-hyperlink
  color: #29F
  
.figure-content
  width: 550px
  height: 400px
  overflow: hidden
  user-select: none
  cursor: default
 

// Looking for something?