master.sass

@import compass/typography/lists/horizontal-list
@import compass/css3/box-sizing
@import compass/css3/transition
@import compass/css3/text-shadow
@import compass/css3/images
@import compass/css3/columns
@import compass/css3/box-shadow
@import url(http://fonts.googleapis.com/css?family=Alegreya:400,700)

// Variables

$content-width: 83%

// grayscale (essentially)
$tint: #D3D4D8
$base-color: $tint - #888
$dark-tint: $tint - #333
$background-tint: $tint + #222
$border-color: $tint + #111
$base-light: lighten($base-color, 50%)

// color (from http://www.colourlovers.com/palette/53148/immersed)
$page-background: #C4BFD6
$link: #98AA9C
$link-visited: #B8C79E
$link-border: #EAD78A
$link-highlight: #F1ECCF

$h1-scale: 2.18
$h2-scale: 1.64
$h3-scale: 1.45
$h4-scale: 1.18

$default-transition-duration: 500ms

// Mixins

=dark-tint-text
  color: $dark-tint

=default-links
  a
    color: $link
    +border-radius(0.3em)
    padding: 0 2px
    &:visited
      color: $link-visited
    &:hover, &:focus
      outline: none
      background-color: $link-highlight
      margin: -1px
      border: 1px solid $link-border
      color: $link
    &:active
      background-image: url(/immerse/images/lines.png)
      +box-shadow(0 0 3px $page-background inset)


// Reset

*
  margin: 0
  padding: 0

// Typography

$base-scale: 1
$base-font: $base-scale * 1em
$vertical-rhythm: 1.5em
$base-vertical-margin: 1.5em

@mixin adjust-font-size($scale, $top-weight: 1, $bottom-weight: 1)
  $average-margin: $base-vertical-margin / $scale
  margin-top: $average-margin * $top-weight
  margin-bottom: $average-margin * $bottom-weight

  $line-height: $vertical-rhythm / $scale
  @if $line-height < 1
    line-height: $line-height * 2
  @else
    line-height: $line-height

  font-size: 100% * $scale

@mixin border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

body
  font: $base-font Cambria, Georgia, sans-serif
  line-height: $vertical-rhythm
  color: $base-color
  background: transparent url(/immerse/images/texture.png) fixed

h1, h2, h3, h4
  font-family: Alegreya, Georgia, sans-serif
h1
  @include adjust-font-size($h1-scale, 0, 0)
  font-weight: normal
h2
  @include adjust-font-size($h2-scale, 0, 0)
  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)
.main-nav-page #content h1
  display: none

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

blockquote
  margin: $base-vertical-margin 0
  border-left: 1px solid $tint
  padding-left: 1em
  color: lighten($base-color, 8%)

pre
  padding: ($vertical-rhythm / 2) 1em
  overflow: auto

img
  border: none

// Layout

nav#main
  width: 100%
  margin-bottom: 1em
  +clearfix
  line-height: 2.5em
  font-size: 1.5em
  text-align: center
  border-bottom: 1px solid transparent
  +transition
  +transition-property(border)
  +transition-duration(1s)
  *
    height: 100%
    font-family: Alegreya, serif

  header
    +clearfix
    h1
      font-size: 2em
      line-height: 1em
      margin: 0
    h2
      font-size: 0.4em
      margin: 0
        top: -1em

  ul
    +horizontal-list-container
    width: 100%
    float: left
  li
    +horizontal-list-item
    width: 15%
    padding: 0
    &.feed
      float: right
      background: transparent url(/immerse/images/lines.png)
    &.header
      width: 20%
      min-width: 6.5em
  a
    text-decoration: none
    display: block
    width: 100%
    color: $base-light
    border: 1px solid transparent
    border-width: 0 1px
    +transition
    &:hover, &:focus
      border-color: $base-color
      color: $base-color
  li.current a
    color: $base-color

  &:hover, &:focus
    border-bottom: 1px solid $base-color

#container
  width: 100%
  margin: 0

  .breadcrumb
    padding: 0.5em 1.1em

    font-size: 0.909em

  #content, #sidebar
    float: left
    padding: 0
    margin: 0

  #content
    width: $content-width - 6%
    margin-left: 3%
    #column-wrap-wrap
      position: relative
      .border
        height: 100%
        width:  10px
        position: absolute
        top: 0
        z-index: 1
        &:first-child
          left: 0
          //+background-image(linear-gradient(left, rgba(white, 1), rgba(255, 255, 255, 0)))
        &:last-child
          right: 0
          //+background-image(linear-gradient(right, rgba(white, 1), rgba(255, 255, 255, 0)))
      #column-wrap
        width: 100%
        height: 100%
        overflow-x: scroll
        #columns
          padding: 0 12px
          +column-count(1)
          +column-gap(50px)
          p
            text-align: justify

  #sidebar
    width: 100% - $content-width
    float: right

  #footer
    +default-links

    font-size: 0.75em
    clear: both
    padding: 0 1em
    border-top: 1px solid #fff
    border-color: rgba(255,255,255,0)
    text-align: center
    +transition
    p
      margin: 0
      padding: 1em 0
    &:hover, &:focus
      border-color: $base-color

  #article-titles
    padding-right: 5%
    ol
      +no-bullets
      margin-left: 1.5em
      li
        .date
          color: transparent
          +transition
          text-indent: 1em
          &:before
            content: '('
          &:after
            content: ')'
        &:hover, &:focus
          .date
            +dark-tint-text
        a
          color: $base-light
          text-decoration: none
          +transition
        &:hover, &.current, &:focus
          a
            color: $base-color
        &.current
          list-style-type: disc
          .date
            +dark-tint-text
    h2
      @include adjust-font-size(1, 0, 0)

// The visuals

body
  &.home h1
    @include adjust-font-size($h1-scale, 1, -1)

#header
  p.title,
  p.subtitle
    margin: 0
    line-height: 1.2em
    font-weight: normal
  p.title
    font-size: 327%
    text-shadow: -1px 2px 1px $tint
  p.subtitle
    font-size: 1em
    @include dark-tint-text

#content
  +default-links

  h2
    text-shadow: 0 1px 0 $tint + #333

  ol,
  ul
    margin-left: 1.5em

  .media, img
    max-width: 100%
    margin-bottom: $base-vertical-margin
    border: none

  code
    padding: 1px 3px
  pre
    border-left: 0.4em solid $border-color
    code
      padding: 0

  // Pages/articles assigned to this page
  ol.pages
    margin-left: 0
    li
      position: relative

      margin-left: -1.5em
      padding-left: 1.5em
      background-color: rgba(255, 255, 255, 0.8)

      list-style: none

      h2
        margin-left: 0
        margin-right: 0
        padding: 0
        background: none

      div.date
        top: $vertical-rhythm * 2.5
        right: 39em
      h3 + div.date
        top: $vertical-rhythm * 1.5

  p.read_more
    @include adjust-font-size(0.909, 0, 0)

  .categories
    margin-left: -1em
    margin-right: -1em
    border-top: 1px solid $background-tint - #0a0a0a
    padding: 0.5em 1em
    background: $background-tint
    a
      margin-right: 0.25em

#disqus_thread
  width: 100%
  margin-top: 4em
  img
    max-width: none
  #dsq-content
    padding-left: 2%
  ul#dsq-comments
    margin-left: 0
  #dsq-global-toolbar
    a
      background-color: transparent
      border: none
      margin: 0