X-Git-Url: https://git.cyclocoop.org/%7B%24admin_url%7Dmembres/categories.php?a=blobdiff_plain;f=css%2Fhabillage.scss;h=ffba512d82c6ea9077bdc515f5bc3448329985eb;hb=fdcece5fc30428e7f6c75b57d8b9368c63219efe;hp=ae32a5ff872e8881ee3446bc53a7558e6a1d96a7;hpb=2a349755d2e270c9ee539c614dd6a01ad0459c51;p=lhc%2Fweb%2Fclavettes.git diff --git a/css/habillage.scss b/css/habillage.scss index ae32a5f..ffba512 100644 --- a/css/habillage.scss +++ b/css/habillage.scss @@ -39,7 +39,7 @@ menu, nav, output, ruby, summary, mark, audio, video { } html { - line-height: 1; + line-height: 1.1; } ol, ul { @@ -98,7 +98,7 @@ header .spip_logos{ #wrap{ padding-top:130px; - width:1200px; + width:100%; margin:0 auto; } a{ @@ -113,13 +113,17 @@ a:focus, a:hover, a:active{ h1{ margin: 0; padding:0; - padding-top:15px; - padding-left:15px; + margin-top:15px; + margin-left:15px; font-size:1.9em; display:inline-block; font-weight: bold; } +h1:hover{ + text-decoration: underline; +} + h2{ margin: 15px 15px; font-size:1.3em; @@ -164,8 +168,7 @@ p{ #ateliers p{ margin: 15px 15px 0 0; - font-size:1.3em; - font-weight: bold; + font-size:1.0em; text-align: left; } @@ -181,15 +184,17 @@ p{ overflow: hidden; } -#news img{ - height:350px; -} - .article{ - background-color:#ffaa7f; + background-color:#ffd7b7; margin:0 10px 15px 10px; } - +.spip_logo{ + display:none; +} +.article .spip_logos{ + display:none; + +} @@ -198,20 +203,21 @@ p{ .map{ - background-color:#6059d2; height: 300px; - margin:0 0 15px 10px; + margin:0 10px 15px 10px; + overflow: hidden; } .agenda{ - background-color: #3ee88d; + background-color: #a1ffff; height:500px; - margin:0 0 0px 10px; - padding-right: 10px; + margin:0 10px 0px 10px; + padding-right: 10px; + overflow-y: scroll; } .agenda p{ - line-height: 120%; + padding: 0; } .agenda ul{ @@ -224,227 +230,106 @@ p{ .date{ float:left; font-size: 1.7em; - -} - -/*RESPONSIVE*/ - -.col-2, -.col-4, -.col-6, -.col-8, -.col-10, -.col-12{ - float:left; - position:relative; - - -} - -.row:before, .row:after{ - content: ""; - display:table; -} - -.row:after{ - clear:both; -} - - -.row{ - margin: 0 -10px; - zoom: 1; -} - - - -.col-1{ - width:8.33333%; -} - -.col-2{ - width:16.66667%; -} - -.col-3{ - width:25%; -} - - -.col-4{ - width:33.33333%; -} - -.col-5{ - width:41.66667%; -} - -.col-6{ - width:50%; -} - -.col-7{ - width:58.33333%; -} - -.col-8{ - width:66.66666%; -} - -.col-9{ - width:75%; -} - -.col-10{ - width:83.33333%; -} - -.col-11{ - width:91.66667%; -} - -.col-12{ - width:100%; -} - - - - -@media only screen and (min-width:640px) { - -.col-m-1{ - width:8.33333%; + clear: both; } -.col-m-2{ - width:16.66667%; +.event{ + display: block; + margin-bottom: 10px; } - -.col-m-3{ - width:25%; +.horaire{ + font-size: 0.8em; + margin-bottom: 20px; + display: block; } - - -.col-m-4{ - width:33.33333%; +.nature{ + overflow-y: scroll; + height: 70px; + } - -.col-m-5{ - width:41.66667%; +.leaflet-control-attribution{ + display: none; } -.col-m-6{ - width:50%; -} - -.col-m-7{ - width:58.33333%; -} +/*RESPONSIVE*/ -.col-m-8{ - width:66.66666%; -} -.col-m-9{ - width:75%; -} +$columns: 12!default; +$medium:650px; +$large:1200px; -.col-m-10{ - width:83.33333%; +%col{ + float:left; + position: relative; } -.col-m-11{ - width:91.66667%; +@for $i from 1 through $columns{ + .col-#{$i}{ + @extend %col; + width:$i / $columns * 100%;} + .col-m-#{$i}, .col-l-#{$i}{@extend %col;} } -.col-m-12{ - width:100%; +@media only screen and (min-width: $medium){ + @for $i from 1 through $columns{ + .col-m-#{$i}{ + width:$i / $columns * 100%;} + } + } - +@media only screen and (min-width: $large){ + @for $i from 1 through $columns{ + .col-l-#{$i}{ + width:$i / $columns * 100%;} + } + #wrap{ + width:1200px; } - - - - - -@media only screen and (min-width:1024px) { - .wrap{ width: auto; } - -.col-l-1{ - width:8.33333%; -} - -.col-l-2{ - width:16.66667%; -} - -.col-l-3{ - width:25%; } -.col-l-4{ - width:33.33333%; -} -.col-l-5{ - width:41.66667%; -} - -.col-l-6{ - width:50%; -} - -.col-l-7{ - width:58.33333%; -} - -.col-l-8{ - width:66.66666%; +.row:before, .row:after{ + content: ""; + display:table; } -.col-l-9{ - width:75%; +.row:after{ + clear:both; } -.col-l-10{ - width:83.33333%; -} -.col-l-11{ - width:91.66667%; +.row{ + margin: 0 -10px; + zoom: 1; } -.col-l-12{ - width:100%; -} -} /*FOOTER*/ footer{ clear:both; height:200px; - width:100%; background-color: #ffaa7f; - } footer ul { padding:0; - margin:0; + margin:0 auto; list-style-type:none; padding-top:70px; - margin-left:100px; - +} +.textfooter{ + width:500px; + margin:0 auto; } footer li { - margin-left:2px; float:left; /*pour IE*/ + text-align: center; } footer ul li a { display:block;