scratch/content/css/main.css

-----

-----

$behindColor: #333
$mainTextColor: $behindColor
$mainBackgroundColor: #FAFAFA
$revealColor: #A53
$secondRevealColor: #AA5533
$lighterRevealColor: $revealColor + #666
$imageBackgroundColor: $mainBackgroundColor
$imageBorderColor: #cccccc
$borderColor: #cccccc
$mainLinkColor: $mainTextColor
$textLinkColor: #555555
$highlightColor: #888888
$highlightBlockColor: #555555
$highlightRevealColor: #e25f2f
$lighterText: #cccccc
$lighterColor: #eeeeee
$lighterColorBorderTop: $lighterText
$lighterColorBorderBottom: $lighterText
$secondTextColor: #666666
$codeBlockColor: $mainBackgroundColor
$codeBlockBackgroundColor: $behindColor


* 
  transition-property: all
  transition-duration: 0.5s
  -moz-transition-property: all
  -moz-transition-duration: 0.5s
  -webkit-transition-property: all
  -webkit-transition-duration: 0.5s
  -o-transition-property: all
  -o-transition-duration: 0.5s

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

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

=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

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, .tag
  font-family: Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif
  line-height: 1.4em

pre
  +codeColor
  box-shadow: 0 0 1em #000 inset
  border-radius: 3px
  padding: 1em
  line-height: 1.2em
  font-size: .9em

p
  margin-bottom: 1.2em

blockquote
  +highlight
  background-color: #F2F2F2
  border: 1px solid #CCC

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-radius: 1.5em
  border: 2px solid $mainBackgroundColor
  color: $lighterText
  &:hover
    color: $highlightRevealColor
    text-shadow: 0 0 2px #FAA
    background: #ECECEC
    box-shadow: 0 -1px 8px #CCC inset
  &:active
    color: $highlightRevealColor
    text-shadow: 0 0 2px #FAA
    background: #EEE
    box-shadow: 0 -1px 8px #AAA inset

#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.8em

// --- 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

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

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

body
  text-align: center
  font-size: 1em

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: $lighterText
  margin-top: 2em
  text-align: center
  a
    color: $lighterText
  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

.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-family: Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif
  font-size: #{$fontcorps}em
  line-height: 1.6em
  text-align: justify
  text-align: left
  padding: $VPadCorps 3em
  margin: 0 $HMarginCorps
  border-bottom: 1px $lighterColorBorderBottom solid
  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

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

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

.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-left: auto
  margin-right: auto
  background: none
  border: none

img.left
  float: left
  max-width: 30%
  margin:
    right: 1em

img.inside
  display: inline
  vertical-align: middle

pre
  overflow
    y: hidden
    x: auto

.withfile pre
  margin-top: 0
  overflow: 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

.tag
  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

.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
  width: 31%
  text-align: left
  line-height: 1em
  margin-left: 1%
  margin-right: 1%
  font-size: 0.8em
  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: #EEE
  box-shadow: 0 0 6px #CCC
  border-radius: 3px
  line-height: 2.5em
  padding: 2em

.pala
  font-family: Palatino

.article .corps a:after
  content: "†"
  vertical-align: super
  font-size: .66em
  color: $highlightColor