scratch/content/css/main.sass

-----

-----
/* Solarized palette */
$base03 : #002b36 
$base02 : #073642 
$base01 : #586e75 
$base00 : #657b83 
$base0  : #839496 
$base1  : #93a1a1 
$base2  : #eee8d5 
$base3  : #fdf6e3 
$yellow : #b58900 
$orange : #cb4b16 
$red    : #dc322f 
$magenta: #d33682 
$violet : #6c71c4 
$blue   : #268bd2 
$cyan   : #2aa198 
$green  : #859900 
/* I won't use completely */

$behindColor: $base03
$mainTextColor: $behindColor
$mainBackgroundColor: #FAFAFC
$mainShadowColor: $mainBackgroundColor - #334
$secondBackgroundColor: #F2F2F4
$revealColor: #cb4b16
$secondRevealColor: $revealColor
$lighterRevealColor: $revealColor + #666
$imageBackgroundColor: $mainBackgroundColor
$borderColor: #ccccd0
$imageBorderColor: $borderColor
$mainLinkColor: $mainTextColor
$textLinkColor: #555566
$highlightColor: #888899
$highlightBlockColor: #555566
$highlightRevealColor: $revealColor + #111
$lighterText: #ccccd0
$lighterColor: #eeeef1
$lighterColorBorderTop: $lighterText
$lighterColorBorderBottom: $lighterText
$secondTextColor: #666677
// solarized dark background color
$codeBlockColor: #839496
$codeBlockBackgroundColor: #002b36


=mainColor
  color: $behindColor
  background:
    color: $mainBackgroundColor

=lightColor
  color: $lighterText
  a
    color: $lighterText
  a:hover
    color: $lighterRevealColor

=innerblock
  border: solid 1px $borderColor
  border-radius: 2px
  box-shadow: 0 0 4px $secondBackgroundColor inset
  background-color: $mainBackgroundColor - #020202

=highlight
  font:
    style: italic
  padding: 0.5em 1em
  color: $highlightBlockColor
  a:hover
    color: $revealColor
  strong, b, i, em
    font:
      weight: normal
      style: normal
    color: $behindColor

=secondColor
  color: $behindColor
  border: $borderColor solid 1px
  border-radius: 5px
  box-shadow: 0 0 2px $borderColor inset
  background:
    color: $lighterColor
  a
    color: $secondTextColor
  a:hover
    color: $secondRevealColor
    strong, b, i, em, .nicer
      color: $lighterRevealColor
  hr
    color: $secondTextColor
    border:
      top: 1px solid $secondTextColor
  strong, b, i, em
    color: $behindColor

=revealColor
  color: $revealColor

=codeColor
  background:
    color: $codeBlockBackgroundColor
  color: $codeBlockColor

table.description tr td
  border: 1px solid $lighterColor

.assombris20
  background-color: $lighterColor

body
  +mainColor

=selected
  background: $base03
  color: $base1

::selection
  +selected
::-moz-selection
  +selected

=darkselected
  background: $base3
  color: $base01

pre, code
  font-family: Incosolata, Monaco, monospace

pre
  &::selection 
    +darkselected
  *::selection 
    +darkselected
pre
  &::-moz-selection
    +darkselected
  *::-moz-selection
    +darkselected

a:hover
  text-shadow: 0 0 2px #FAA

a, a:link, a:visited, a:active, a:hover
  text-decoration: none
  outline: none

a, a:link, a:visited, a:active
  color: $mainLinkColor

a:hover
  +revealColor

hr
  color: $lighterColor
  border:
    top: 1px solid $lighterColor
    bottom: none
    left: none
    right: none

ul
  list-style: square

ol,ul
  padding-left: 0
ol li, ul li
  margin: .5em 0
ol li ul, ol li ol, ul li ol, ul li ul
  margin: .5em 1.5em
  list-style: circle


body, h1, h2, h3, h4, #entete, .tagname
  font-family: Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif
  line-height: 1.4em

/* Header Numbering */
.article #afterheader
  counter-reset: niv02
  h2
    counter-increment: niv02
    counter-reset: niv03
    marker-offset: 3em
    &:before
      content: counter(niv02) ". "
  h3
    counter-increment: niv03
    counter-reset: niv04
    &:before 
      content: counter(niv02) "." counter(niv03) ". "
  h4
    counter-increment: niv04
    &:before 
      content: counter(niv02) "." counter(niv03) "." counter(niv04) ". "

pre
  +codeColor
  box-shadow: 0 0 5px ($secondBackgroundColor - #222) inset
  border-radius: 3px
  padding: 1em
  line-height: 1.2em
  font-size: .9em

p
  margin-bottom: 1.2em

blockquote
  +innerblock
  +highlight
  ul
    padding-left: 1.5em

abbr,
acronym
  font-variant: small-caps
  text:
    decoration: none
  border:
    bottom:
      width: 0

// -- STYLE --

#titre
  letter-spacing: -0.06em
  border:
    bottom: 4px double $lighterText
    top: 4px double $lighterText

#liens .active, #sousliens
  +secondColor

=insetbox
  background: rgba(#000,.05)
  box-shadow: 0 0 2px #FFF, 0 0 3px #CCC inset
  border: 1px solid rgba(#000,.1)
  border-radius: 3px
  &:hover
    background: rgba(#000,.1)
    box-shadow: 0 0 6px #555 inset

=clearbutton
  display: block
  width: 25%
  cursor: pointer
  margin: 1em 0
  padding: 1em
  font-size: 16px
  line-height: 1.4em
  border: 1px solid $mainBackgroundColor
  color: $lighterText
  &:hover
    +innerblock
    color: $highlightRevealColor
    text-shadow: 0 0 2px #FAA
  &:active
    +innerblock
    color: $highlightRevealColor
    text-shadow: 0 0 2px #FAA
    background: $mainBackgroundColor - #060606

#liens a
  border: 1px solid #EEE
  +insetbox

#liens .active
  text-shadow: 0 0 2px rgba(#000,.5)
  background-color: $mainBackgroundColor - #030303
  border: 1px solid $mainBackgroundColor - #111111
  box-shadow: 0 0 3px ($mainBackgroundColor - #333333) inset
  border-radius: 3px
  border-top: none

// -- FOOTER --
#lastmod
  font-size: 0.9em

// --- DYNAMICS --
.nojsbutton
  font-size: 2.5em

#clickcomment, #choixlang > a, #choixrss > a, .return > a
  +clearbutton

.return > a, #choixrss > a
  float: right

#choix
  .return > a, #choixrss > a
    margin-top: 0

// -- TYPOGRAPHY --
.small
  font-size: 0.8em

.sc
  font-variant: small-caps

.impact, .darkimpact
  font-size: 2em
  margin: 0 auto 1em auto
  line-height: 1.3em

// -- DATES --

h1 > .date
  font-size: 0.6em
  color: $behindColor

.date
  font-size: 0.8em
  color: $mainBackgroundColor
  border: 1px solid $mainTextColor
  text-align: center
  width: 4.1em
  line-height: 1.5em
  display: inline-block
  vertical-align: middle
  margin-right: 1em

.date .day,
.date .month,
.date .year
  display: block

.date .day
  color: $behindColor
  background-color: $mainBackgroundColor
  float: left
  width: 1.7em

.date .month
  float: right
  width: 2.3em
  background-color: $behindColor
  color: $mainBackgroundColor

.date .year
  line-height: 3ex
  clear: both
  +secondColor
  border-radius: 0

// --- LAYOUTS --
$VPadCorps: 3em
$VMarginCorps: 3em

// ATTENTION DOIT ETRE 0 pour le bon callage
$HMarginCorps: 0
$content_width: 52em

body
  text-align: center
  font-size: 16px

body > #entete
  position: absolute
  left: 0
  top: 0.5em
  width: 100%
  min-width: $content_width - 2em
  z-index: 8000
  padding-bottom: 1em
  margin-bottom: $VMarginCorps

#titre h2
  width: 80%
  margin-left: auto
  margin-right: auto
  text-align: center
  color: $lighterText

#titre
  text-align: center
  width: 100%

#titre h1, #titre h2
  padding-left: 1em
  padding-right: 1em

// le pied de page
#bottom
  clear: right
  margin-right: 0px
  padding: 1.5em
  line-height: 1.5em
  color: $mainTextColor + #222
  margin-top: 2em
  text-align: center
  a
    color: $mainTextColor + #111
  a:hover
    +revealColor

// Les menus

#sousliens
  padding: 1em 0
  line-height: 2em

#sousliens ul
  list-style: none
  margin-left: 4em

ul.horizontal li
  display: inline
  font-size: 0.9em

ul.horizontal
  margin-top: 0px
  margin-bottom: 0px

#entete
  padding-top: 0.1em
  border-top: 1px solid $lighterColorBorderTop
  border-bottom: 1px solid $lighterColorBorderTop

#liens
  width: 100%
  padding: 0
  clear: both
  margin-top: 0.5em

#liens ul
  width: 100%
  clear: both
  padding: 0
  margin: 0

$hauteur_menu: 4em

#liens ul li
  display: inline-block
  height: $hauteur_menu
  margin-left: 0.2em
  margin-right: 0.2em
  width: 23%

#liens ul li a,
#liens ul li span
  width: 100%
  display: block
  line-height: $hauteur_menu

// Un 'helper'
.clear
  clear: both

// Le Contenu
#content
  line-height: 4em
  margin-left: auto
  margin-right: auto
  margin-top: 0
  position: relative
  clear: both
  width: $content_width

$contentMargin: 0em

.encadre, .black, .red, .intro, .resume, .shadow
  padding: 2em
  margin:
    top: 2em
    bottom: 2em


.encadre, .black, .red, .shadow
  +secondColor

pre .red
  background: none
  padding: 0
  margin: auto
  border: none
  box-shadow: none

.intro, .resume
  font-size: 0.9em
  +highlight

#afterheader > h1
  width: 100%
  padding-top: 1.5em
  text-align: left

#afterheader
  padding-left: $contentMargin
  padding-right: $contentMargin

#sousliens
  margin:
    top: $VMarginCorps
    bottom: $VMarginCorps
  font-size: 1.2em
  letter-spacing: 1px
  text-align: left
  clear: both

.twilight
  line-height: 1.1em

$fontcorps: 1.25

.corps
  font-size: #{$fontcorps}em
  line-height: 1.6em
  text-align: justify
  text-align: left
  padding: $VPadCorps 3em
  margin: 0 $HMarginCorps
  clear: both

$corps_width: ($content_width - 2 * $contentMargin) / $fontcorps
$hpadding: 1

.corps img
  max-width: 30em
  border: 1px solid $imageBorderColor
  background-color: $imageBackgroundColor
  padding: 0.5em
  box-shadow: 0 10px 15px #CCC
  border-radius: 3px
.corps a:hover img
  background-color: $revealColor + #100 - #011

figure
  margin: 3em 0
  img
    box-shadow: 0 10px 15px #CCC inset
  figcaption
    text-align: center
    margin: .5em 0

img.clean
  border: none

//  les clear

#address
  clear: both

.definitionCell
  width: 5em
  vertical-align: top
  font-weight: bold
  text-align: center

.valueCell
  text-align: right

.smallblock
  float: left
  width: 50%
  font-size: 1em
  font-weight: bold

.largeblock
  float: right
  width: 70%
  font-size: 1em

#blackpage, #nojsredirect
  top: 0
  left: 0
  width: 100%
  height: 100%
  margin-left: 0
  margin-right: 0
  margin-top: 0
  margin-bottom: 0
  position: fixed
  text-align: center

#blackpage
  color: #666666
  padding-top: 10em
  background-color: #eeeeee
  z-index: 9000
  cursor: wait
  img
    background: none
    border: none
  a
    cursor: pointer

#nojsredirect
  z-index: 9001

.nojsbutton
  width: 50%
  padding: 1em
  border: solid 3px white
  margin-left: auto
  margin-right: auto
  margin-top: 2em
  z-index: 9002

.codefile
  font-size: 0.8em
  text-align: right
  padding-right: 1em
  margin-right: 0.1
  margin-bottom: -1em 

.flush
  clear: both

table.description
  border-spacing: 5px
  border-collapse: separate
  margin-right: auto
  margin-left: auto

table.description tr td
  padding-left: 0.5em
  padding-right: 0.5em
  padding-top: 0.5ex
  padding-bottom: 0.5ex
  vertical-align: middle
  margin-right: 5px

ul.long li
  margin-bottom: 1em

img
  display: block
  margin: 1.2em auto
  background: none
  border: none

img.left
  float: left
  max-width: 30%
  margin: 
    top: .6em
    right: 2em

img.inside
  display: inline
  vertical-align: middle

pre
  overflow-x: auto
  overflow-y: hidden

.navigationprev, .navigationnext
  padding: 0px
  margin-left: 0.2em
  margin-right: 0.2em
  margin-bottom: 0
  margin-top: $VMarginCorps
  width: 45%

.navigation .navigationprev,
.navigation .navigationnext
  width: 30%
  margin-top: 0

.navigation
  height: 4em
  border-bottom: $lighterColorBorderBottom solid 1px

.presarticleleft,
.presarticleright
  font-size: 1em

.navigationprev
  float: left
  text-align: left

.navigationnext
  float: right
  text-align: right

.impact, .darkimpact
  text-align: left
  width: 66%
  padding-left: 0.25em
  padding-right: 0.25em

table.impact
  text-align: left

table.impact tr td
  padding-left: 0.25em
  padding-right: 0.25em

#liens
  font-size: 1.2em

#iemessage
  font-size: 1.2em
  color: #CCC
  margin: -10px
  padding: 1px 0
  background: #333
  strong, b, i, em
    color: #CCC
  a, a:visited
    color: #ECA

.tagname
  display: inline
  cursor: pointer
  margin-left: 0.5em
  margin-right: 0.5em

.list
  margin-top: $VPadCorps

#menuMessage
  font:
    size: 1.2em
  line:
    height: 1.5em
  width: 100%
  text-align: center

#next_before_articles
  clear: both
  width: 100%
  font-size: 1.2em
  padding:
    top: 1em
    bottom: 1em

#previous_articles, #next_articles
  color: $highlightColor
  font-style: italic
  font-size: .8em

#previous_articles
  float: left
  margin-left: 1em
  width: 45%
  text-align: left

.previous_article, .next_article
  margin-top: 1em

#next_articles
  float: right
  width: 45%
  margin-right: 1em
  text-align: right


#rss
  font-size: 1.2em
  text-align: center
  display: block
  width: 100%
  float: right
  padding: 1em 0.1em

.corps .return a
  color: $lighterColor
  padding: 0.1em
  line-height: 1.5em
  font-size: 1.5em
  height: 1.5em
  float: left
  font-size: 2em
  margin-top: -0.5em
  margin-left: -2em
  width: 1.5em

a.return
  color: $lighterColor
  padding: 0.1em
  line-height: 1.5em
  font-size: 1.5em
  height: 1.5em
  font-size: 2em
  width: 1.5em
  display: block
  &:hover
    color: $highlightColor

.corps .return a:hover
  color: $revealColor

.footnotes
  font-size: 0.8em
  ol
    color: $base0
    font-weight: bold
    p
      color: $behindColor
      font-weight: normal

    

.fontnotes ol
  margin-left: 0

.typeset img
  display: inline
  border: none
  margin: 0
  padding: 0

strong, b, i, em
  font-weight: normal
  color: $highlightColor
  a
    color: $mainTextColor
  a:hover
    color: $revealColor

.corps p
  strong, b, i, em
    color: $highlightBlockColor

a:hover
  strong, b, i, em
    color: $highlightRevealColor

a:hover .nicer
  color: $lighterRevealColor

.nicer
  color: $lighterText
  font-family: "Lucida Grande", Tahoma



.block
  +innerblock
  width: 26.5%
  padding: 1em
  border-radius: 2px
  text-align: left
  line-height: 1em
  margin-left: 1%
  margin-right: 1%
  font-size: 0.8em
  height: 9em
  a
    color: $mainTextColor
  a:hover
    color: $revealColor

.block h3
  margin: 0
  font-size: 1.3em

.block p
  line-height: 1.2em

.left
  float: left

.right
  float: right

.corps 
  p a, ul a
    color: $textLinkColor
  p a:hover, ul a:hover
    color: $revealColor

ul.bloglist, .archive ul
  list-style-type: none
  margin: 0
  li
    margin-bottom: 1em

.button
  cursor: pointer
  text-align: center

#tagcloud
  font-size: .8em
  background: $secondBackgroundColor
  box-shadow: 0 0 6px $borderColor
  border-radius: 3px
  line-height: 2.5em
  padding: 2em
  text-align: justify

.pala
  font-family: Palatino

.article .corps a:after
  content: "†"
  vertical-align: super
  line-height: 0
  font-size: .66em
  color: $highlightColor
.article .corps 
  .footnotes, sup 
    a:after
      content: ""
.article .corps sup a
  font-weight: bold
  background: $base0
  padding: 0 .3em
  border-radius:  3px
  -moz-border-radius:  3px
  -webkit-border-radius:  3px
  color: $mainBackgroundColor
  &:hover
    background: $revealColor

ul#markdown-toc, .intro .toc ul
  font-variant: small-caps
  list-style: none
  padding-left: 1.5em
  a:after
    content: ""
  ul ul
    font-variant: normal
    line-height: 1em
    margin-bottom: 1em

table
  border: 1px solid $borderColor
table tr td
  padding: 2px .5em
table tr
  &:nth-child(odd)
    background-color: $secondBackgroundColor
  &:nth-child(even)
    background-color: $mainBackgroundColor

p, ul li, ol li
  pre code
    background: none
    border: none
    padding: 0
  code
    background: $secondBackgroundColor - #020202
    border: solid 1px $borderColor
    padding: 2px

ul.sameline
  list-style: none
  li
    float: left
    margin-left: .5em

.resumearticle
  background-color: $secondBackgroundColor
  border-radius: 7px
  box-shadow: 0 0 5px $mainShadowColor inset,0 0 5px #FFF
  margin: 1em 0
  padding: 1em

a.cut
  font-size: 12px
  font-family: Monaco, monospace
  text-align: right
  display: block
  width: 100%
  opacity: .5
  border: 1px solid $mainBackgroundColor 
  border-radius: 3px
  &:hover
    opacity: 1
    background-color: $secondBackgroundColor
    border-color: $borderColor 
    box-shadow: 0 0 3px $borderColor inset
  strong
    font-weight: bold
.codehighlight pre
  border-left: 4px solid $borderColor

#social
  text-align: left
  opacity: .3
  &:hover
    opacity: 1

.popularblock
  width: 30.3333%
  margin: 0 1.5%
  float: left
  figure
    margin: 0
    img
      max-width: 80%
      max-height: 6em