deck-of-cards/css/index.styl

HTML5 Deck of Cards

@import 'nib'

*
  box-sizing: border-box
  margin: 0
  padding: 0

html, body
  height: 100%

body
  background-color: hsl(150, 40, 45)
  color: #333
  font-family: 'Open Sans', sans-serif
  user-select: none
  overflow: hidden
  text-size-adjust: 100%

#container
  position: fixed
  top: calc(50% + 1.5rem)
  left: 50%
  transform: translate3d(-50%, -50%, 0)

#topbar
  position: fixed
  top: 0
  left: 0
  width: 100%
  background-color: hsl(152, 20, 25)
  padding: .25rem
  text-align: center

  button
    background: none
    border: 1px solid #fff
    outline: none
    margin: .1rem
    padding: .4rem
    font: inherit
    font-size: .75rem
    line-height: 1
    color: #fff
    cursor: pointer

    &:hover
      background-color: #fff
      color: #444

.message
  position: fixed
  top: 2.5rem
  left: 0
  width: 100%
  padding: 1rem .5rem
  font-size: .5rem
  text-align: center

@import 'card'

@media (max-width: 540px)
  #topbar
    text-align: left

  .gh-ribbon
    transform: scale(.5)
    transform-origin: 100% 0

@media (min-width: 640px)
  html
    font-size: 125%