scratch/content/css/layout.css
2010-07-12 11:03:40 +02:00

549 lines
7.9 KiB
CSS

-----
-----
// La dedans, seulement ce qui concerne le layout
// La largeur, la hauteur des objets. S'ils sont en float
// Les marges, le padding...
//
// En particulier, il n'y a rien relatif à la couleur ou aux fontes
// ni aux background image.
// Rien relatif aux border non plus.
$VPadCorps: 3em
$HPadCorps: 5em
$VMarginCorps: 3em
// ATTENTION DOIT ETRE 0 pour le bon callage
$HMarginCorps: 0
$content_width: 52em
body
text-align: center
font-size: 1em
// /* l'entete
#content > #entete
position: relative
left: 0
top: .5em
width: 100%
min-width: $content_width - 2em
z-index: 1800
padding-bottom: 1em
margin-bottom: $VMarginCorps
.corps_spaced
margin-bottom: $VMarginCorps
margin-top: $VMarginCorps
#titre h2
width: 80%
margin-left: auto
margin-right: auto
text-align: center
#titre
text-align: center
width: 100%
margin-top: $VMarginCorps
margin-bottom: $VMarginCorps
#titre h1, #titre h2
padding-left: 1em
padding-right: 1em
// /* le pied de page
#bottom
clear: right
margin-right: 0px
text-align: right
width: 45%
margin-top: 0px
padding: 5px
float: right
// Les menus
#sousliens
padding: 1em 0
line-height: 2em
ul.horizontal li
display: inline
font-size: 0.9em
ul.horizontal
margin-top: 0px
margin-bottom: 0px
#entete
padding-top: .1em
#liens
width: 100%
padding: 0
clear: both
margin-top: .5em
#liens ul
width: 100%
clear: both
padding: 0
margin: 0
$hauteur_menu: 2em
#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
margin-left: auto
margin-right: auto
margin-top: 0
position: relative
top: -1em
padding-bottom: 10px
width: $content_width
clear: both
#content > #choix
margin-top: 1.5em
$contentMargin: 0em
.encadre, .black, .red, .intro, .resume, .shadow
padding:
left: 2em
right: 2em
margin:
top: 2em
bottom: 2em
#afterheader
padding-left: $contentMargin
padding-right: $contentMargin
#sousliens
width: 100%
margin-left: auto
margin-right: auto
margin:
top: $VMarginCorps
bottom: $VMarginCorps
font-size: 1.2em
letter-spacing: 1px
text-align: left
clear: both
.corps
text-align: left
padding: $VPadCorps $HPadCorps
margin: $VMarginCorps $HMarginCorps
clear: both
.twilight
line-height: 1.1em
.corps h1
width: 90%
.corps h2
width: 80%
.corps h3
width: 70%
.corps h4
width: 60%
.corps h1,
.corps h2,
.corps h3,
.corps h4
padding-top: 5px
padding-bottom: 5px
clear: both
text-align: center
// /* on decale les titres pour qu'ils touchent le bord
$fonth1: 2em
$fonth2: 1.6em
$fonth3: 1.25em
$fonth4: 1em
$htopbottommargin: 2em
.corps h1
margin:
bottom: #{$htopbottommargin / $fonth1}em
top: #{$htopbottommargin / $fonth1}em
.corps h2
margin:
bottom: #{$htopbottommargin / $fonth2}em
top: #{$htopbottommargin / $fonth2}em
.corps h3
margin:
bottom: #{$htopbottommargin / $fonth3}em
top: #{$htopbottommargin / $fonth3}em
.corps h4
margin:
bottom: #{1em / $fonth4}em
top: #{1em / $fonth4}em
.corps h1,
.corps h2,
.corps h3,
.corps h4
position: relative
margin:
left: 0px
.corps h1
left: #{-$HPadCorps / $fonth1}em
.corps h2
left: #{-$HPadCorps / $fonth2}em
.corps h3
left: #{-$HPadCorps / $fonth3}em
.corps h4
left: #{-$HPadCorps / $fonth4}em
$fontcorps: 1.25
.corps
font-size: #{$fontcorps}em
.corps h1
font-size: $fonth1
.corps h2
font-size: $fonth2
.corps h3
font-size: $fonth3
.corps h4
font-size: $fonth4
$corps_width: ($content_width - 2 * $contentMargin) / $fontcorps
$hpadding: 1
.corps h1,
.corps h2,
.corps h3,
.corps h4
padding: 0 #{$hpadding}em
.corps h1.first,
.corps h2.first,
.corps h3.first,
.corps h4.first
padding: 1em #{$hpadding}em
margin:
top: 0
bottom: 0
.corps h1.first
top: #{-$VPadCorps / $fonth1}em
width: #{$corps_width / $fonth1 - 2 * $hpadding}em
.corps h2.first
top: #{-$VPadCorps / $fonth2}em
width: #{$corps_width / $fonth2 - 2 * $hpadding}em
.corps h3.first
top: #{-$VPadCorps / $fonth3}em
width: #{$corps_width / $fonth3 - 2 * $hpadding}em
.corps h4.first
top: #{-$VPadCorps / $fonth4}em
width: #{$corps_width / $fonth4 - 2 * $hpadding}em
.corps img
max-width: 30em
// 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
float: right
width: 80%
margin-right: 0.3em
.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
img.left
float: left
max-width: 30%
margin:
right: 1em
img.inside
display: inline
vertical-align: middle
pre
overflow: hidden
.withfile pre
overflow: hidden
width: 96.6%
.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
font-size: 2em
.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.5em
#iemessage
font-size: 1.5em
.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
#choixrss
float: right
width: 25%
#entete
#choixrss,
#choixlang a
margin-top: .3em
margin-left: 2em
margin-right: 2em
#choixlang a
display: block
width: 25%
text-align: center
#choix
padding: 0
top: 3em
display: block
text-align: left
font-size: 1em
.date
font-size: 0.8em
.date, .date .year, .date .month, .date .year
display: block
#next_before_articles
clear: both
width: 100%
font-size: 1.2em
padding:
top: 1em
bottom: 1em
#previous_articles
float: left
margin-left: 1em
width: 45%
text-align: left
#next_articles
float: right
width: 45%
margin-right: 1em
text-align: right
#choixlang
padding-top: .1em
#choixlang a,
#clickcomment
padding: .1em 1em
#clickcomment
margin-left: 0
width: 25%
#rss
text-align: center
display: block
width: 100%
float: right
padding: .1em 1em
.return a
text-align: center
float: right
width: 25%
padding: .1em 1em
.corps .return a
padding: .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
.footnotes
font-size: 0.8em
.fontnotes ol
margin-left: 0