quill/guide/template/public/kss.styl

@import 'node_modules/typographic/typographic'
@import 'node_modules/stylus-normalize/normalize'

// Typography, fonts
kss-ratio               = major-third

kss-font-body           = helvetica
kss-font-code           = Inconsolata-dz, Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace

kss-vertical-rhythm     = t-scale(1, kss-ratio)

// Colors
kss-colors-background   = #fff

kss-colors-foreground   = #444
kss-colors-heading      = #111
kss-colors-quotes       = #666

kss-colors-link         = #0645ad
kss-colors-link-visited = #0645ad
kss-colors-link-hover   = lighten(kss-colors-link, 20%)
kss-colors-link-active  = #faa700

html
  font-family: kss-font-body
  font-size: 10px
  @media (min-width: 600px)
    font-size: 12px
  @media (min-width: 800px)
    font-size: 14px
  @media (min-width: 1000px)
    font-size: 16px

h1, h2, h3, h4, h5, h6
  margin-top:    0
  margin-bottom: t-scale(0.5, kss-ratio)

h1
  font-size:     t-scale(1.5, kss-ratio)
  font-weight:   300
  line-height:   t-scale(1.5, kss-ratio)

h2
  font-size:     t-scale(1.25, kss-ratio)
  font-weight:   300
  line-height:   t-scale(1.25, kss-ratio)
h3
  font-size:     t-scale(1.0, kss-ratio)
  font-weight:   300
  line-height:   t-scale(1.0, kss-ratio)
h4
  font-size:     t-scale(0.75, kss-ratio)
  line-height:   t-scale(0.75, kss-ratio)
h5
  font-size:     t-scale(0.50, kss-ratio)
  line-height:   t-scale(0.50, kss-ratio)
h6
  font-size:     t-scale(0.25, kss-ratio)
  line-height:   t-scale(0.25, kss-ratio)

// Base
p, ul, ol, label, input, textarea, fieldset, dl, blockquote
  margin-top:    0
  margin-bottom: t-scale(1, kss-ratio)

label
  margin-bottom: 0
ul
  padding-left: t-scale(1.2, kss-ratio)
ol
  padding-left: t-scale(1.3, kss-ratio)
li, dd
  margin-bottom: t-scale(.25, kss-ratio)
dt
  font-weight: bold
dd
  margin-left: 0

blockquote
  margin-left: 0
  cite
    display: block

// ------------------------------------------------------------------------------
// Wrap all of this template's base HTML styling inside a .kss-style selector.
// ------------------------------------------------------------------------------

#overview
  margin-top: 0
  line-height: t-scale(kss-ratio, 1.5)

.kss-style
  color: kss-colors-foreground

  a
    color: kss-colors-link
    text-decoration: none
    transition-property: color
    transition-duration: 0.5s

    &:visited
      color: kss-colors-link-visited
    &:hover, &:focus
      color: kss-colors-link-hover
    &:active
      color: kss-colors-link-active
    &:hover, &:active
      outline: 0

  h1, h2, h3, h4, h5, h6
    color: kss-colors-heading

  blockquote
    color: kss-colors-quotes
    margin: 0
    padding-left: kss-vertical-rhythm
    border-left: 0.5em mix(kss-colors-quotes, kss-colors-background, 25%) solid

  hr
    display: block
    height: 2px
    border: 0
    border-top: 1px solid lighten(kss-colors-foreground, 60%)
    border-bottom: 1px solid darken(kss-colors-background, 10%)
    margin: kss-vertical-rhythm 0
    padding: 0

  pre, code, kbd, samp
    font-family: kss-font-code
    color: mix(kss-colors-foreground, kss-colors-heading, 50%)
    font-size: 13px
    line-height: 1em

  pre
    white-space: pre
    white-space: pre-wrap
    word-wrap:   break-word

  ins
    color: kss-colors-heading
    background: #ff9
    text-decoration: none

  mark
    color: kss-colors-heading
    background: #ff0
    font-weight: bold

  sub, sup
    position: relative
    vertical-align: baseline

  sup { top: -0.5em     }
  sub { bottom: -0.25em }

  ul, ol
    // margin: kss-vertical-rhythm 0
    // padding: 0 0 0 kss-vertical-rhythm

  li p:last-child
    margin: 0

  dd
    margin: 0 0 0 kss-vertical-rhythm

  img
    max-width:100%
    border: 0
    -ms-interpolation-mode: bicubic
    vertical-align: middle

  table
    border-collapse: collapse
    border-spacing: 0

  td
    vertical-align: top

  @media print
    a, a:visited
      text-decoration: underline

    hr
      height: 1px
      border:0
      border-bottom:1px solid black

    a[href]:after
      content: " (" attr(href) ")"

    a[href^="javascript:"]:after, a[href^="#"]:after
      content: ""

    abbr[title]:after
      content: " (" attr(title) ")"

    pre, blockquote
      border: 1px solid #999
      padding-right: 1em
      page-break-inside: avoid

    tr, img
      page-break-inside: avoid

    img
      max-width: 100% !important

    p, h2, h3
      orphans: 3
      widows: 3

    h2, h3
      page-break-after: avoid

// ------------------------------------------------------------------------------
// Layout and page background
// ------------------------------------------------------------------------------

#kss-node
  margin: 0
  padding: 20px
  background: #fff

  @media screen and (min-width: 769px)
    padding: 20px

    background: #eee
    background: linear-gradient(to right, #eee, #e5e5e5 50%, #d7d7d7 100%) 20% 0 / 5px 1px repeat-y,
                linear-gradient(to right, #eee, #eee 20%, #fff 20%) 0 0 / 100% 1px

    .kss-main, .kss-sidebar
      float: left
      margin-right: -100%
      box-sizing: border-box

  .kss-main
    width: 100%
    margin: 0 auto

    @media screen and (min-width: 769px)
      width: 80%
      margin-left: 20%
      padding: 0 20px 0 30px

  .kss-sidebar
    border-bottom:1px solid #ddd

    @media screen and (min-width: 769px)
      width: 20%
      padding: 0 10px 0 20px
      border-bottom: 0

// ------------------------------------------------------------------------------
// Sidebar-area components
// ------------------------------------------------------------------------------

#kss-node

  .kss-doc-title
    font-size: t-scale(0.75, kss-ratio)
    margin-bottom: t-scale(0.5, kss-ratio)

  .kss-nav__menu
    padding: 0
    list-style-type: none

  .kss-nav__menu-item
    font-size: t-scale(kss-ratio, 0.6)
    display: inline-block
    padding-right: kss-vertical-rhythm
    margin-bottom: 10px

    @media screen and (min-width: 769px)
      display: list-item
      padding-right: 0

  .kss-nav__menu-child
    .kss-nav__menu-item
      margin-bottom: 0px

    display: none

    @media screen and (min-width: 769px)
      display: block
      margin: 10px 0
      border-top: 1px solid #ccc
      border-bottom: 1px solid #ccc
      padding: 10px 0
      list-style-type: none

  .kss-nav__ref
    color: #333
    font-weight: bold

    &:after
      content: ' '

  .kss-nav__menu-child .kss-nav__ref
    font-weight: normal

// ------------------------------------------------------------------------------
// Content-area components
// ------------------------------------------------------------------------------

#kss-node
  .kss-section
    max-width: 48em

  .kss-title__ref
    display: block
    margin: 0
    color: #666
    font-size: 50%

    &:before
      content: 'Section '

  .kss-title__permalink
    display: block
    color: #000
    text-decoration: none

    &:hover, &:focus, &:active
      color: kss-colors-link

      @media screen and (min-width: 607px)
        .kss-title__permalink-hash
          display: inline

  .kss-title__permalink-hash
    display: none
    color: #ccc

  .kss-parameters
    display: table
    list-style-type: none
    margin-left: 0
    padding-left: 0

  .kss-parameters__item
    display: table-row

  .kss-parameters__name
    display: table-cell
    padding-right: 20px

  .kss-parameters__description
    display: table-cell

  .kss-modifier__wrapper
    border: 1px solid #ccc
    padding: 10px

  .kss-modifier__heading
    margin: -10px -10px 10px -10px
    padding: 10px
    border-bottom: 1px solid #ccc
    background-color: #eee
    font-weight: bold

  .kss-modifier__default-name
    font-weight: bold
    margin-bottom: t-scale(0.5, kss-ratio)

  .kss-modifier__name
    float: left
    padding-right: 10px
    font-weight: bold

  .kss-modifier__description
    margin-bottom: t-scale(0.5, kss-ratio)

  .kss-modifier__example
    margin-bottom: t-scale(0.5, kss-ratio)

    clear: left

    &:last-child
      margin: 0

  .kss-markup
    margin: -1px 0 kss-vertical-rhythm 0
    border: 1px solid #ccc

  .kss-markup pre
    margin: 0

  .kss-color__swatch
    display: inline-block
    width: 40px
    height: 40px
    border-radius: 20px
    border: 2px solid #000
    margin-right: 10px
    vertical-align: middle

  .kss-color__variable
    margin-right: 10px

  .kss-github
    display:none

    @media screen and (min-width: 501px)
      display: block
      position: absolute
      top: 0
      right: 0

    img
      border: 0

  // Pretty printing styles. Used with prettify.js.

  // SPAN elements with the classes below are added by prettyprint.
  .pln { color: #000 }              // plain text
  .str { color: #080 }              // string content
  .kwd { color: #008 }              // a keyword
  .com { color: #800 }              // a comment
  .typ { color: #606 }              // a type name
  .lit { color: #066 }              // a literal value
  .pun, .opn, .clo { color: #660 } // punctuation, lisp open bracket, lisp close bracket
  .tag { color: #008 }             // a markup tag name
  .atn { color: #606 }             // a markup attribute name
  .atv { color: #080 }             // a markup attribute value
  .dec, .var { color: #606 }       // a declaration a variable name
  .fun { color: red }              // a function name

  // Use higher contrast and text-weight for printable form.
  @media print, projection
    .str { color: #060 }
    .kwd { color: #006; font-weight: bold }
    .com { color: #600; font-style: italic }
    .typ { color: #404; font-weight: bold }
    .lit { color: #044 }
    .pun, .opn, .clo { color: #440 }
    .tag { color: #006; font-weight: bold }
    .atn { color: #404 }
    .atv { color: #060 }

  // Specify class=linenums on a pre to get line numbering
  ol.linenums
    background-color: #fdfdfd
    margin: 0
    padding: 0 0 3px 0
    list-style-type: none

    li
      padding: 0 10px

      &:first-child
        padding-top: 10px