articles.sass

// sass
//Var
//colors
$base: #e3dcd5
$primary: #6cb4b8
$accent: #f3f3f6
$secondary: #a9a9a9
$width: 200px
$height:  $width / 3
//mixins
=fhover($color)
  &:hover
    transition: 350ms ease-in-out
    color:  $color
    transform: scale(1.4)
=flex()
  display: flex
  align-items: center
  justify-content: center
  flex-direction: row
  flex-wrap: wrap
   
=center()
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  
=align()
  top: 50%
  transform: translateY(-50%)

// reset
*
  margin: 0
  box-sizing: border-box
  padding: 0
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
h1,h2,h3,h4,h5,h6,a,p,span
  //margin: 10px 10px 0 0
  padding-bottom: 0.714em !important
  padding-top: 0.714em !important
  text-transform: uppercase
  letter-spacing: 0.1em
  font-weight: 400
  color: $accent
  font-weight: bold
  text-align: center
  
footer
  bottom: 0
  right: 0
  left: 0
  margin: 0 auto
  position: fixed
  width: 100%
  background: $base
  text-align: center
  //padding: 10px 20px
  
  .content
    border-radius: 5px
    +flex
    //flex-direction: column
    justify-content: space-evenly
    //background-color: $primary
    height: 80px
    .bottom
      padding: 0
      margin: 0
      top: 10%
      .beat
        color: red
        animation: beat .30s infinite alternate
        
    .top
      font-size: 25px
      .fa-twitter
        +fhover(#55acee)
      .fa-youtube
        +fhover(#cd201f)
      .fa-instagram
        +fhover(#e4405f)
      .fa-codepen
        +fhover(#FFDD40)
        
      a
        padding: 10px
      i
        transition: 500ms ease-in-out
      
    
body
  background: $base
  font-family: 'Raleway', sans-serif
  text-align: center
  
.noselect
  user-select: none
//main code 
.artboard
  +flex
  +center
  &:hover 
    .button
      transform: rotate(-75deg)
.button, .links
  display: inline-block
  width: $width
  height: $height
  background: $primary
  i,a 
    +center
    color: white
  i
   
    font-size: 25px
  
.button
 
  z-index: 11
  transition: 950ms cubic-bezier(.89,.03,.06,1.50)
  transform-origin: top left
  
.links
  position: absolute
  z-index: 9
  background: #da7015
  a
    text-decoration: none
    
    
    
  


//animation
@keyframes beat
  to 
    transform: scale(1.4)