kwand-stack/src/client/styles/main.styl

Koa + WebSockets + Angular + Node + Dokku

@import 'normalize'
@import 'util'
@import 'hljs-solarized-dark'
@import 'colors-solarized'
//@import fonts

//--- mobile-first default 20em (320px) portrait------//

// also see hljs-solarized-dark.styl
code
  border-radius .33em
  padding .15em .5em .12em .5em
  margin .1em 0 0 0

aside,
pre > code
  border-radius .33em
  padding .3em 1.25em .4em 1.33em

aside
  font-style italic
  display inline-block
  color black
  background lightgrey

a:hover
  font-size 1.1em

a:visited
  color black

section
  text-align left

section, article
  margin 2.5em 0 0 0
  >h1,>h2,>h3
    margin-left -1em

.container
  text-align center
  width 50%
  margin 0 auto
  font-family Helvetica, Tahoma, Verdana, Arial, sans-serif

  img
    display inline-block

.credits, .credits a
  color lightgrey

.youtyped
  font-size 2em
  font-weight bold
  padding-left: 1em


//------------- small (every 2em) ----------------//

//@media only screen and (min-width:20.063em) // >320
//@media only screen and (min-width:22.063em) // >352
//@media only screen and (min-width:24.063em) // >384
//@media only screen and (min-width:26.063em) // >416
//@media only screen and (min-width:28.063em) // >448

//----------- medium (every 3em) ----------------//

//@media only screen and (min-width:30.063em) // >480
//@media only screen and (min-width:33.063em) // >528
//@media only screen and (min-width:36.063em) // >576
//@media only screen and (min-width:39.063em) // >624
//@media only screen and (min-width:42.063em) // >672

//------------ large (every 4em) ---------------//

//@media only screen and (min-width:45.063em) // >720
//@media only screen and (min-width:49.063em) // >784
//@media only screen and (min-width:53.063em) // >848
//@media only screen and (min-width:57.063em) // >912
//@media only screen and (min-width:61.063em) // >976
//@media only screen and (min-width:65.063em) // >1040

//------------ huge (every 5em) ---------------//

//@media only screen and (min-width:70.063em) // >1120
//@media only screen and (min-width:75.063em) // >1200
//@media only screen and (min-width:80.063em) // >1280
//@media only screen and (min-width:85.063em) // >1360
//@media only screen and (min-width:90.063em) // >1440
//@media only screen and (min-width:95.063em) // >1520
//@media only screen and (min-width:100.063em) // >1600
//@media only screen and (min-width:105.063em) // >1680
//@media only screen and (min-width:110.063em) // >1760
//@media only screen and (min-width:115.063em) // >1840

//----------------- ginormous  ----------------//

//@media only screen and (min-width:120.063em) // >1920