Pure CSS Cards Against Developers(Tap to choose!) 😈😅 #CodePenChallenge

index.pug

input(type='radio', name='choice', id='spaces', checked)
input(type='radio', name='choice', id='tabs')
mixin card(content, answer, id)
  .card(class=`${answer ? 'card--answer' : ''} ${id ? `card--${id}` : ''}`)
    .card__content= content
    footer.card__footer
      -if(answer)
        img(src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Small.png")
      -else
        img(src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Small.png")
      span Cards Against Developers

label(for='tabs')
label(for='spaces')
+card('_______ are better than _______.')
+card('Tabs.', true, 'tabs')
+card('Spaces.', true, 'spaces')

pure-css-cards-against-developers-tap-to-choose-codepenchallenge.markdown

Pure CSS Cards Against Developers(Tap to choose!) 😈😅 #CodePenChallenge

The great debate 😅

Not exactly a blog card but this is what sprang to mind first. I'll try get some blog cards done.

Click to toggle choice of order!

Best viewed in full screen

A Pen by Jhey on CodePen.

License.

style.stylus

*
  box-sizing border-box

input
  visibility hidden

body
html
  align-items center
  background #db0a5b
  display flex
  font-size 10px
  justify-content center
  margin 0
  min-height 100vh
  padding 0

  @media(min-width 768px)
    font-size 14px

  @media(min-width 992px)
    font-size 16px

$cardWidth = 20rem
.card
  background #000
  border-radius 1.25rem
  color #fff
  filter drop-shadow(5px 5px 5px black)
  flex-shrink 0
  font-family 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
  font-size 1.5rem
  font-weight bolder
  height ($cardWidth * 1.4)
  padding 2.5rem
  position absolute
  transition transform .25s ease-out
  width $cardWidth


  &:nth-of-type(1)
    transform translate(-40%, 0) rotate(-15deg)

  &__footer
    align-items center
    bottom 30px
    display flex
    font-size .75rem
    left 2.5rem
    position absolute
    right 2.5rem

    img
      height 2rem
      margin-right 6px
      width 2rem

  &--answer
    color #000
    background #fff


#spaces:checked
  ~ .card--spaces
    transform translate(40%, 0) rotate(15deg) translate(0, 10%)
    z-index 2
  ~ .card--tabs
    transform translate(40%, 0) rotate(15deg) translate(0, -10%)
    z-index 1
  ~ label[for='tabs']
    z-index 3

#tabs:checked
  ~ .card--tabs
    transform translate(40%, 0) rotate(15deg) translate(0, 10%)
    z-index 2
  ~ .card--spaces
    transform translate(40%, 0) rotate(15deg) translate(0, -10%)
    z-index 1
  ~ label[for='spaces']
    z-index 3

label
  cursor pointer
  height ($cardWidth * 1.4) * 1.2
  position absolute
  transform translate(40%, 0) rotate(15deg)
  width $cardWidth