scratch/content/css/layout.css
2010-01-20 16:20:44 +01:00

471 lines
7.3 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: .8em
// /* l'entete */
#entete
position: relative
left: 0
width: 100%
min-width = !content_width - 2em
z-index: 2000
#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: both
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: .9em
ul.horizontal
margin-top: 0px
margin-bottom: 0px
#rss a
:width 7em
:padding
:left 1em
:right 1em
:display inline-block
#rss img
:padding 0
:float right
:margin
:top .2em
:left .2em
:display inline
#rss sup a
:float right
:width .5em
#liens
width: 100%
padding: 0
clear: both
#liens ul
width: 100%
clear: both
padding: 0
margin: 0
!hauteur_menu=2em
#liens ul li
display: inline-block
height = !hauteur_menu
margin-left: .2em
maring-right: .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
padding-bottom: 10px
width = !content_width
clear: both
!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: absolute
text-align: center
#blackpage
color: #666
padding-top: 10em
background-color: #eee
z-index: 9000
cursor: wait
img
background: none
border: none
#nojsredirect
z-index: 9001
.nojsbutton
width: 50%
padding: 1em
border: solid 3px #fff
margin-left: auto
margin-right: auto
margin-top: 2em
z-index: 9002
.file
font-size: .8em
text-align: right
float: right
width: 80%
margin-right: .3em
.flush
clear: both
table.description
border-spacing: 5px
border-collapse: separate
margin-right: auto
margin-left: auto
table.description tr td
padding-left: .5em
padding-right: .5em
padding-top: .5ex
padding-bottom: .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: .2em
margin-right: .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: .25em
padding-right: .25em
table.impact
text-align: left
table.impact tr td
padding-left: .25em
padding-right: .25em
#liens
font-size: 1.5em
#rss
text-align: right
font-size: 1.4em
padding-right: .3em
:margin
:top .4em
:float right
#iemessage
font-size: 1.5em
.tag
display: inline
cursor: pointer
margin-left: .5em
margin-right: .5em
.list
margin-top = !VPadCorps
#menuMessage
:font
:size 1.2em
:line
:height 1.5em
:width 100%
:text-align center
#choix
padding: 1em
text-align: left
font-size: 1.2em
#choixlang
display: inline
#choixlang ul
display: inline
#choixlang ul li
display: inline
:padding
:left .5em
:right .5em
:top .3em
:bottom .3em
margin: .3em
#choixlang ul li a
width: 100%
line-heigh: 2em