Styles used on effectif.com.

master.sass

@import "mixins.sass"
@import "normalize"

body
  font: $size1 Bitter, serif
  line-height: 1.6
  color: $base-color

div#container
  position: relative
  margin: 0 1em

header[role=banner]
  h1,
  h2
    margin: 0
    font-weight: normal

  h1
    margin-top: 0.5em
    font-size: $size2

  h2
    color: $meta-color
    font-size: $size0

footer[role=contentinfo]
  padding-top: 2em

+respond-to(medium-screens)
  div#container
    margin: 0 auto
    max-width: $measure

+respond-to(wide-screens)
  div#container
    max-width: $full-page-width

  div#content
    float: left
    width: 37em

  div#sidebar
    float: right
    width: $sidebar-width

  footer[role="contentinfo"]
    clear: both

h1, h2, h3, h4
  margin: 1em 0 0.5em

h1
  font-size: $size4
h2
  font-size: $size3
h3
  font-size: $size2
h4
  font-size: $size2

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

li
  margin: 0

blockquote
  margin: $vertical-margin 0
  padding: 0 $vertical-margin / 2
  border-left: 5px solid $tint
  
  font-style: italic
  color: $base-color + #555
  
pre
  display: block
  width: auto

  padding: 0.5em

  font-size: $size0

  overflow: auto
  white-space: pre

  code
    font-size: 1em

code
  font-size: $size0

img
  border: none

nav.breadcrumb
  margin-top: $vertical-margin
  color: $meta-color

  font-size: 0.909em

  ul
    margin: 0
    padding: 0

  li
    display: inline
    list-style: none

    &::before
      content: " > "

    &:last-child
      display: block
      margin-left: 1em

      +respond-to(medium-screens)
        display: inline
        margin: 0

    &:first-child
      margin-left: 0

a
  color: $link-color
  +transition(color 0.25s 0 ease)
  &:visited
    color: $visited-link-color
  &:hover
    color: $hover-link-color
  &:active
    color: $active-link-color

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

article
  img
    max-width: 100%
    margin-bottom: $vertical-margin

  footer
    p.meta
      font-style: italic
      color: $meta-color

// Pages of content
article[role="main"]
  & > h1
    font-weight: normal

  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
    padding-left: 0
    li
      position: relative
      list-style: none

    article
      h1
        font-size: $size3
        font-weight: normal
      ol li
        list-style: decimal
      ul li
        list-style: disc

  header h1
    font-size: $size3

  article
    h1
      a
        text-decoration: none
    p.read_more
      font-size: $size1
      margin: -1em 0 0 0
    footer
      border-top: none

      font-size: $size0

section.articles
  border-top: 2px solid $tint

  &:first-child
    border-top: none

  & > header h1
    color: $meta-color
    font-weight: normal

div#sidebar
  border-top: 2px solid $tint

  h1
    font-size: $size3

  ol, ul
    padding-left: 0
    list-style: none

    li
      display: inline

      &::after
        content: ' / '
      &:last-child
        &::after
          content: ''

  +respond-to(medium-screens)
    margin-top: 1.4em

    p
      font-size: $size0

  +respond-to(wide-screens)
    border-top: none

    color: $meta-color

    h1
      font-size: $size2
      font-weight: normal

    ol, ul
      li
        display: block

        &::after
          content: ''

div.feed
  margin: $vertical-margin 0

@import "local"

mixins.sass

// Default ratios between font sizes; used to maintain the type hierarchy.
// http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4

$size5: 2.18em
$size4: 1.64em
$size3: 1.45em
$size2: 1.18em
$size1: 1em
$size0: 0.88em

$vertical-margin: 1.5em

// Colour settings

$base-color: #313126
$tint: #F2EEDC
$border-color: #D7C28B
$link-color: #D85700
$visited-link-color: darken($link-color, 5%)
$hover-link-color: lighten($link-color, 15%)
$active-link-color: darken($link-color, 20%)
$nav-link-color: desaturate(lighten($link-color, 25%), 35%)
$meta-color: #87877D

@function empx($em, $base: 16px)
  @return ($em / 1em) * $base

// Layout settings

$measure: empx(36em)
$gutter: empx(6em)
$sidebar-width: empx(14em)
$full-page-width: $measure + $gutter + $sidebar-width

$max-handheld-width: 400px
$min-medium-width: $measure + empx(1em)
$min-wide-width: $full-page-width + empx(4em)

// Mixins

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

=transition($definition)
  -moz-transition: $definition
  -o-transition: $definition
  -webkit-transition: $definition
  transition: $definition

=respond-to($media)
  @if $media == handhelds
    @media only screen and (max-width: $max-handheld-width)
      @content
  @else if $media == medium-screens
    @media only screen and (min-width: $min-medium-width)
      @content
  @else if $media == only-medium-screens
    @media only screen and (min-width: $min-medium-width) and (max-width: $min-wide-width - 1px)
      @content
  @else if $media == wide-screens
    @media only screen and (min-width: $min-wide-width)
      @content