thebespokepixel/documentation-theme-bespoke

View on GitHub
src/style.styl

Summary

Maintainability
Test Coverage
@import 'nib'
@require "github"
@require "vars"

a
  text-decoration none
  &:hover
    cursor pointer

.quiet
  opacity 0.7

.sidebar
  background url(../images/logo-vertical.svg) right 4px bottom 4px no-repeat, linear-gradient(130deg, palette-sidebar-background, lighten(palette-sidebar-background, 20))
  color palette-sidebar-foreground
  box-shadow 0px 2px 12px palette-page-shadow
  h3
    min-width 240px
    max-width 300px
  a
    color palette-sidebar-foreground
    &:hover
      color palette-sidebar-hilite

.sidespace
  h3
    min-width 240px
    max-width 300px
    white-space nowrap

.documentation
  font-family 'TypoPRO Fira Sans', sans-serif
  color palette-page-foreground
  line-height 1.5
  background palette-page-background
  a[href]:hover
    text-decoration underline

.pre, pre, code, .code
  overflow auto
  font-family 'TypoPRO Hack', monospace

.prose
  code, .code
    font-size 1rem
  td
    code, .code
      font-size 0.875rem


.panel-title
  font-size 1.5rem
  line-height 2.5rem
  span
    color palette-page-hilite
    a
      color palette-page-hilite

.minishadow
  box-shadow 0px 2px 6px palette-page-shadow

.signature
  box-shadow inset 0px 1px 4px palette-page-shadow

.border-bottom
  border-bottom 1px solid palette-page-hilite

a.github
  background url(../images/github.svg) left 8px center no-repeat lighten(palette-github-background, 20)
  background-size 1rem
  font-size 0.9rem
  font-weight 200
  color palette-github-foreground
  transition background-color 0.4s
  &[href]:hover
      text-decoration none
      background-color palette-github-background

.anchorjs-link
  margin-left 0em !important
  transition all .25s linear

*:hover
  & > .anchorjs-link
    margin-left -1em !important

.badges
  p
    margin 0
    &:empty
      display: none
  br:last-of-type
    display: none

.note
  h3
    margin-top 0
  pre
    background-color lighten(palette-page-background, 10)
    padding 0.5rem
    border-radius 4px
    box-shadow 0 1px 4px palette-page-shadow

.gutter
  background-color: lighten(palette-sidebar-background, 20)
  background-repeat: no-repeat
  background-position: 50%
  &.gutter-vertical
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=')
    cursor: ns-resize
  &.gutter-horizontal
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')
    cursor: ew-resize