deck-of-cards/css/card.styl

HTML5 Deck of Cards

.card
  position: absolute
  display: inline-block
  left: unit(-31 / 16, 'rem')
  top: unit(-44 / 16, 'rem')
  width: unit(62 / 16, 'rem')
  height: unit(88 / 16, 'rem')
  background-color: #fff
  border-radius: 4px
  box-shadow: 0 1px 1px rgba(#000, .15)
  cursor: default

  &:before, &:after
    position: absolute
    font-size: .7rem
    text-align: center
    line-height: .7rem
    font-family: 'Ubuntu Condensed', sans-serif
    white-space: pre-line
    width: .55rem
    letter-spacing: -.1rem

  &:before
    top: .15rem
    left: 0

  &:after
    bottom: .1rem
    right: 0
    transform: rotate(180deg)

  .face
    height: 100%
    background-position: 50% 50%
    background-size: 100% 100%
    background-repeat: no-repeat

  .back
    position: absolute
    background-image: url(faces/back.png)
    background-position: 50% 50%
    background-size: 100% 100%
    background-repeat: no-repeat
    width: 100%
    height: 100%
    top: 0
    left: 0

  &.spades, &.clubs, &.joker
    color: #000000

  &.hearts, &.diamonds, &.joker.rank3
    color: #d40000

  &.joker
    &.rank1, &.rank2, &.rank3
      &:before, &:after
        content: "J\a O\a K\a E\a R"
        letter-spacing: 0
        font-size: .4rem
        line-height: .4rem
        padding: .15rem .05rem
        width: .5rem

  &.rank1
    &:before, &:after
      content: "A"
  &.rank2
    &:before, &:after
      content: "2"
  &.rank3
    &:before, &:after
      content: "3"
  &.rank4
    &:before, &:after
      content: "4"
  &.rank5
    &:before, &:after
      content: "5"
  &.rank6
    &:before, &:after
      content: "6"
  &.rank7
    &:before, &:after
      content: "7"
  &.rank8
    &:before, &:after
      content: "8"
  &.rank9
    &:before, &:after
      content: "9"
  &.rank10
    &:before, &:after
      content: "10"
  &.rank11
    &:before, &:after
      content: "J"
  &.rank12
    &:before, &:after
      content: "Q"
  &.rank13
    &:before, &:after
      content: "K"

  &.spades
    &.rank1
      .face
        background-image: url(faces/0_1.svg)
    &.rank2
      .face
        background-image: url(faces/0_2.svg)
    &.rank3
      .face
        background-image: url(faces/0_3.svg)
    &.rank4
      .face
        background-image: url(faces/0_4.svg)
    &.rank5
      .face
        background-image: url(faces/0_5.svg)
    &.rank6
      .face
        background-image: url(faces/0_6.svg)
    &.rank7
      .face
        background-image: url(faces/0_7.svg)
    &.rank8
      .face
        background-image: url(faces/0_8.svg)
    &.rank9
      .face
        background-image: url(faces/0_9.svg)
    &.rank10
      .face
        background-image: url(faces/0_10.svg)
    &.rank11
      .face
        background-image: url(faces/0_11.svg)
    &.rank12
      .face
        background-image: url(faces/0_12.svg)
    &.rank13
      .face
        background-image: url(faces/0_13.svg)

  &.hearts
    &.rank1
      .face
        background-image: url(faces/1_1.svg)
    &.rank2
      .face
        background-image: url(faces/1_2.svg)
    &.rank3
      .face
        background-image: url(faces/1_3.svg)
    &.rank4
      .face
        background-image: url(faces/1_4.svg)
    &.rank5
      .face
        background-image: url(faces/1_5.svg)
    &.rank6
      .face
        background-image: url(faces/1_6.svg)
    &.rank7
      .face
        background-image: url(faces/1_7.svg)
    &.rank8
      .face
        background-image: url(faces/1_8.svg)
    &.rank9
      .face
        background-image: url(faces/1_9.svg)
    &.rank10
      .face
        background-image: url(faces/1_10.svg)
    &.rank11
      .face
        background-image: url(faces/1_11.svg)
    &.rank12
      .face
        background-image: url(faces/1_12.svg)
    &.rank13
      .face
        background-image: url(faces/1_13.svg)

  &.clubs
    &.rank1
      .face
        background-image: url(faces/2_1.svg)
    &.rank2
      .face
        background-image: url(faces/2_2.svg)
    &.rank3
      .face
        background-image: url(faces/2_3.svg)
    &.rank4
      .face
        background-image: url(faces/2_4.svg)
    &.rank5
      .face
        background-image: url(faces/2_5.svg)
    &.rank6
      .face
        background-image: url(faces/2_6.svg)
    &.rank7
      .face
        background-image: url(faces/2_7.svg)
    &.rank8
      .face
        background-image: url(faces/2_8.svg)
    &.rank9
      .face
        background-image: url(faces/2_9.svg)
    &.rank10
      .face
        background-image: url(faces/2_10.svg)
    &.rank11
      .face
        background-image: url(faces/2_11.svg)
    &.rank12
      .face
        background-image: url(faces/2_12.svg)
    &.rank13
      .face
        background-image: url(faces/2_13.svg)

  &.diamonds
    &.rank1
      .face
        background-image: url(faces/3_1.svg)
    &.rank2
      .face
        background-image: url(faces/3_2.svg)
    &.rank3
      .face
        background-image: url(faces/3_3.svg)
    &.rank4
      .face
        background-image: url(faces/3_4.svg)
    &.rank5
      .face
        background-image: url(faces/3_5.svg)
    &.rank6
      .face
        background-image: url(faces/3_6.svg)
    &.rank7
      .face
        background-image: url(faces/3_7.svg)
    &.rank8
      .face
        background-image: url(faces/3_8.svg)
    &.rank9
      .face
        background-image: url(faces/3_9.svg)
    &.rank10
      .face
        background-image: url(faces/3_10.svg)
    &.rank11
      .face
        background-image: url(faces/3_11.svg)
    &.rank12
      .face
        background-image: url(faces/3_12.svg)
    &.rank13
      .face
        background-image: url(faces/3_13.svg)

  &.joker
    &.rank1
      .face
        background-image: url(faces/4_1.svg)
    &.rank2
      .face
        background-image: url(faces/4_2.svg)
    &.rank3
      .face
        background-image: url(faces/4_3.svg)