scratch/content/css/gen.css

-----
-----
$rouge_clair: #cc0000
$rouge_fonce: #6c0000
$blanc_fonce: #dddddd
$gris_fonce: #888888
$texte_normal: #222222
$texte_attenue: #666666

$tiny_radius: 10px
$small_radius: 20px
$large_radius: 27px

=white
  text-shadow: 0 1px white
  background:
    color: $blanc_fonce
  border:
    color: $gris_fonce
    style: solid
    width: 1px
  color: $texte_normal
  a, a:link
    color: #aa0000
  a:visited
    color: #aa0000
  a:active, a:hover
    color: $rouge_clair
    text-shadow: 0 0 1px $rouge_fonce

=black
  text-shadow: 0 1px black
  background:
    image: url("../../css/img/black.jpg")
    repeat: no-repeat
    color: black
  border:
    color: #666666
    style: solid
    width: 1px
  color: #eeeeee
  abbr, acronym, a, a:link
    color: #dddddd
  a:visited
    color: $blanc_fonce
  a:active, a:hover
    color: #cc0000

=red
  background:
    image: url("../../css/img/red.jpg")
    repeat: no-repeat
    color: $rouge_fonce
  border-color: $rouge_fonce
  color: white
  abbr, acronym, a, a:link
    font-weight: bold
    text-decoration: none
    color: #eeeeee
  a:visited
    color: $blanc_fonce
  a:active, a:hover
    color: white

=smallblock
  background-position: 50% 50%

=largeblock
  background-position: 50% 0%

=tinyround
  border:
    style: solid
    width: 1px 1px 1px 1px

=downsmallround
  border: none

=smallround
  border:
    style: solid
    width: 1px 1px 1px 1px

=largeround
  border:
    style: solid
    width: 1px

=first_round_base
  border:
    style: none
    width: 2px

=large_first_round
  +first_round_base

=small_first_round
  +first_round_base

=tiny_first_round
  +first_round_base

=assombris
  text:
    shadow: 0 1px #dddddd
  background:
    image: url("../../css/img/sombre20percent.png")
    repeat: repeat


// ------- Fin des definitions ------------
#entete
  +white
  +smallblock
  +downsmallround
  border: solid 1px #888
  a, a:link
    color: $texte_normal
  a:visited
    color: $texte_normal
  a:active, a:hover
    color: $rouge_clair

#sousliens
  +white
  font-weight: bold
  font-size: 1.3em
  a, a:link
    color: $texte_attenue
  a:visited
    color: $texte_attenue
  a:active, a:hover
    color: $rouge_clair

.corps
  +white
  a, a:link, a:visited
    color: $rouge_fonce
    font-weight: normal
  a:active, a:hover
    color: red

.presarticle
  font-size: 0.8em
  width: 20%

.corps
  +largeblock

#titre
  +largeround

img
  padding: 0.6em

pre.twilight,
.corps h2,
#bottom,
#nojsredirect
  +black
  +smallblock

.corps h1,
#titre,
#blocMessage,
.encadre,
.nojsbutton
  +red
  +smallblock

.encadre
  +smallround

.black
  +black
  +smallblock
  +smallround

.red
  +red
  +smallblock
  +smallround

.shadow
  background:
    image: url("../../css/img/sombre10percent.png")
    repeat: repeat
  +smallround

.intro, .resume
  font-size: 0.8em
  font-style: italic
  line-height: 1.4em
  em
    font-style: normal

.corps h1
  border:
    style: solid
    width: 1px 1px 1px 1px
  text:
    align: right

.corps h2
  border:
    style: solid
  border:
    top: 1px
    right: 1px
    bottom: 1px
    left: 0px
  text:
    align: right

.corps h3,
.corps h4
  border:
    color: #6c6c6c
    top: 1px
    right: 1px
    bottom: 1px
    left: 0px
    style: solid
  color: #00ee00
  text:
    align: right

.corps h1.first
  +large_first_round

.corps h2.first
  +small_first_round

.corps h1.first,
.corps h2.first,
.corps h3.first,
.corps h4.first
  text-align: center

img
  +tinyround

#sousliens,
pre.twilight,
#bottom,
#blocMessage,
#presentation,
#Menu,
table.description tr td,
.corps
  +tinyround

#titre, h1
  text-shadow: 0px -1px 1px #333333

.corps h2
  color: #dddddd
  text-shadow: 0 -1px #999999

.corps h2 a,
.corps h3 a,
.corps h4 a
  text-shadow: 0 1px #ffcccc

.corps h3,
.corps h4
  color: #555555
  text-shadow: 0 1px #cccccc

table.description tr td
  border: none

.nojsbutton,
.corps
  +largeround

// --- Les couleurs
body
  background:
    color: #cccccc
  color: black

//    :image url('../../css/img/background.jpg')
//    :attachment fixed

a
  font-weight: bold
  text-decoration: none

a, a:link
  color: #aa0000
  outline: none

a:visited
  color: #aa0000
  outline: none

a:active, a:hover
  color: red
  outline: none

ul
  list-style: square

.corps h1
  font-variant: small-caps

#lastmod
  color: #999999
  font-size: 0.8em

.withfile pre.twilight
  background:
    position: 50% -10%

.file
  a,
  a:link
    color: #dddddd
  a:visited
    color: $blanc_fonce
  a:active,
  a:hover
    color: #cc0000

// --- les fontes
#boutonMessage
  color: black
  font:
    size: $tiny_radius
    family: sans-serif

body, h1, h2, h3, h4, #entete
  font-family: Optima, "Century Gothic", Helvetica, Arial, sans-serif
  line-height: 1.4em

.corps
  font-family: Georgia, "Century Schoolbook L", "Times New Roman", Times, serif
  line-height: 1.6em

pre, code
  font:
    family: monaco, monospace
    size: 0.7em

p
  margin-bottom: 1.2em

.corps
  text-align: justify

#liens,
#sousliens
  font-weight: bold

// --- le style des blocs de liens
#liens ul
  list-style: none

#sousliens ul
  list-style: none
  margin:
    top: 0px
    bottom: 0px

#liens ul li a:hover
  +red
  +smallround
  +smallblock
  border: none

#liens ul li span.active
  +black
  +smallround
  +smallblock

// --- bords arrondis
#content
  +largeround
  border: none

// --- les ombres

.nojsbutton
  font-size: 2.5em

.nojsbutton > a:hover,
.nojsbutton > a:active
  color: black !important

.assombris10
  text:
    shadow: 0 1px #eeeeee
  background:
    image: url("../../css/img/sombre10percent.png")
    repeat: repeat

.assombris20
  +assombris

.corps h3, img
  background:
    image: url("../../css/img/sombre20percent.png")
    repeat: repeat

.corps h4
  background:
    image: url("../../css/img/sombre20percent.png")
    repeat: repeat
  padding:
    left: 0.5em
    right: 0.5em

.small
  font-size: 0.8em

.strong
  font-weight: bold

#sousliens .active
  font-style: italic

#liens
  font-variant: small-caps

#choix ul li.activelang
  +black
  +tinyround

#titre
  border: solid 1px #330000
  // :left -1px
  // :position relative

#titre h1
  font:
    size: 2.5em
    variant: small-caps
    weight: bold
  text-align: center
  margin:
    bottom: 0.3em
    top: 0.3em
    left: auto
    right: auto

abbr,
acronym
  text:
    decoration: none
  border:
    bottom:
      width: 0

blockquote ul
  list-style: none

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

.darkimpact
  +black
  text-shadow: 0 1px 0 white
  a:hover
    text-shadow: 0 1px 0 #ff7777

.impact
  +red
  text-shadow: 0 -2px 0 black

.sc
  font-variant: small-caps

.tag:hover
  color: $rouge_clair

.tag.selected
  color: $rouge_fonce

abbr
  color: $rouge_fonce

.black abbr
  color: #dddddd
  text-shadow: 0px 0px 2px white

small
  line-height: 1em

hr
  border-bottom: solid 1px white

#menuMessage
  +smallblock
  +downsmallround

h1 > .date
  font-size: 0.6em
  color: black

=assombri20
  text:
    shadow: 0 1px #dddddd
  background:
    image: url("../../css/img/sombre20percent.png")
    repeat: repeat

#afterheader #rss
  +black
  font-size: 1.2em
  font-weight: normal
  +smallround
  +smallblock

#entete #rss,
#entete > #choix a
  +smallround
  +smallblock
  font-size: .8em
  +assombris
  padding: .1em 1em


#clickcomment
  +black
  cursor: pointer
  font-size: 1.2em
  +smallround
  +smallblock

#content > #choix a
  color: #999
  font-size: 1.2em
  background-color: #bababa
  +smallround
  border:
    style: solid
    color: #999
    width: 1px

#content > #choix > #choixlang ul li a
  +smallround

#entete #choix
  a,
  a:active,
  a:hover
    border-color: #333
#entete #choix
  a:active,
  a:hover
    text-shadow: 0 0 9px #866 

#afterhead #choix
  a,
  a:active,
  a:hover
    text-shadow: 0 1px white
    color: #aaaaaa
    border-color: #aaaaaa
    background-color: #dadada

.corps .return
  a:active,
  a:hover
    text-shadow: 0 1px white
    color: #aaaaaa
    border-color: #aaaaaa
    background-color: #dadada

.corps .return a
  color: #cccccc
  +smallround
  border:
    style: solid
    color: #cccccc
    width: 1px

.corps .return
  a:active,
  a:hover
    text-shadow: 0 1px white
    color: #aaaaaa
    border-color: #aaaaaa
    background-color: #dadada

.date
  text-align: center
  font-size: 0.7em
  color: #bbbbbb
  width: 4.1em
  border: 1px solid #888888
  line-height: 1.5em
  display: inline-block
  margin-top: 1em

.date .day
  color: #880000
  background-color: white
  float: left
  width: 1.7em

.date .month
  border-left: solid #888888 0.1em
  background-color: black
  color: white
  float: right
  width: 2.3em

.date .year
  border-top: solid #888888 1px
  border-bottom: solid #888888 1px
  line-height: 3ex
  clear: both
  background-color: #bbbbbb
  color: black

.date
  border: solid black 1px
  position: relative
  top: 0.7em
  left: -2em

#next_before_articles a
  color: black !important
  font-size: 0.9em

blockquote
  font:
    style: italic
  background-image: url("/Scratch/css/img/sombre10percent.png")
  padding: 0.5em 1em

#tagcloud a,
#tagcloud a:link,
#tagcloud a:visited
  color: black

.archive h4
  font-size: 2em
  text-align: center

#content > #choix a:hover
  color: #666
  border-color: #666