master.sass

@import "mixins.sass"
@import "colors.sass"

// Variables

$content-width: 37em

$border-style: 1px dashed $border-color

// Reset

*
  margin: 0
  padding: 0

// Typography

@mixin text-shadow
  text-shadow: 0 2px 3px #ddd

body
  font: ($base-font * 1.05) Georgia, serif
  line-height: $vertical-rhythm
  color: $base-color

header[role=banner]
  h1,
  h2
    margin: 0
    line-height: 1.2em
    font-weight: normal
  h1
    font-size: 327%
    @include text-shadow
  h2
    color: $meta-color
    font-size: 1em

h1, h2, h3, h4, h5, h6
  font-family: Georgia, serif
h1
  @include adjust-font-size($h1-scale, 0.6, 0.4)
  font-weight: normal
h2
  @include adjust-font-size($h2-scale, 1.5, 0.5)
  font-weight: normal
h3
  @include adjust-font-size($h3-scale, 1.5, 0.5)
  font-weight: normal
h4
  @include adjust-font-size($h4-scale, 2, 0)

ol,
p,
pre,
ul
  margin: 0
  margin-bottom: $base-vertical-margin

li
  @include adjust-font-size(1, 0, 0)

blockquote
  margin: $base-vertical-margin 0
  padding: 0 $base-vertical-margin
  
  font-style: italic
  color: $base-color + #555
  
pre
  padding: ($vertical-rhythm / 2) 1em
  overflow: auto

img
  border: none

nav.breadcrumb
  margin-top: $vertical-rhythm
  color: $meta-color
  padding: 0.5em 0

  font-size: 0.909em

// Layout

article, aside, footer, header, nav, section
  display: block

div#container
  width: 54em
  margin: 0 auto
  padding: 1em 1em 0 1em

  div#content
    position: relative
    width: $content-width
    float: left
    padding: 1px 0

  div#sidebar
    width: 12em
    margin-left: 40em
    padding: 0 1em
  
  footer.branding
    clear: both
    color: $meta-color
    @include adjust-font-size($base-scale)
    p
      width: $content-width
      margin: 0
      padding: 1em 0

// The visuals

a
  border-bottom: 1px dotted $link-color
  text-decoration: none
  color: $link-color
  @include transition(color 0.25s 0 ease)
  &:visited
    color: $visited-link-color
    border-bottom-color: $visited-link-color
  &:hover
    color: $hover-link-color
    border-bottom-color: $hover-link-color
  &:active
    color: $active-link-color
    border-bottom-color: $active-link-color

nav.breadcrumb    
  ul
    margin: 0
  li
    display: inline
    list-style: none
    &::after
      content: " > "
    &:last-child::after
      content: ""

nav.breadcrumb,
nav.categories,
div.feed,
article p.meta
  a
    color: $nav-link-color
  &:hover a
    color: $link-color
  a:hover
    color: $hover-link-color

nav.categories,
div.feed,
article p.meta
  a
    border-bottom-color: $background-color

article p.meta
  a
    @include transition(border-bottom-color 0.5s 0 ease)
  a:hover
    border-bottom-color: $hover-link-color

article h1 a
  border-bottom: none

body
  background: $background-color
  
article
  img
    max-width: 100%
    margin-bottom: $base-vertical-margin

  code,
  pre
    background-color: $tint
  code
    padding: 1px 3px
  pre
    border-left: $border-style
    background-color: $tint
    code
      padding: 0

  footer
    border-top: $border-style
    p.meta
      @include adjust-font-size(0.909, 0.1, 1.9)
      font-style: italic
      color: $meta-color

// Pages of content
article[role="main"]
  h1, h2
    @include text-shadow

  div#disqus_thread
    img
      max-width: none
    ul#dsq-comments
      margin-left: 0
  
// Pages/articles assigned to this page
section.pages,
section.articles
  & > ol
    margin-left: 0
    li
      position: relative
      list-style: none
    article
      ol li
        list-style: decimal
      ul li
        list-style: disc

  header[role=main] h1
    @include adjust-font-size($h1-scale, 1.5, 0.5)
  header h1
    @include adjust-font-size($h2-scale, 1.5, 0.5)

  article
    h1
      text-shadow: none
    p.read_more
      @include adjust-font-size(1, 0, 0)
      margin-top: -$base-vertical-margin
    footer
      border-top: none

nav.categories
  h1
    @include adjust-font-size(1, 2, 0)

  ul.menu
    list-style: none
    ul
      list-style: disc
      margin: 0 0 0 1.25em
    & > ul
      @include adjust-font-size(0.909, 0, 0)

div.feed
  margin: $base-vertical-margin 0