css/habillage.scss

   1 @charset "UTF-8";
   2 html, body, div, span, applet, object, iframe,
   3 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   4 a, abbr, acronym, address, big, cite, code,
   5 del, dfn, em, img, ins, kbd, q, s, samp,
   6 small, strike, strong, sub, sup, tt, var,
   7 b, u, i, center,
   8 dl, dt, dd, ol, ul, li,
   9 fieldset, form, label, legend,
  10 table, caption, tbody, tfoot, thead, tr, th, td,
  11 article, aside, canvas, details, embed,
  12 figure, figcaption, footer, header, hgroup,
  13 menu, nav, output, ruby, section, summary,
  14 time, mark, audio, video {
  15   margin: 0;
  16   padding: 0;
  17   border: 0;
  18   font: inherit;
  19   font-size: 100%;
  20   vertical-align: baseline;
  21   font-family: sans-serif;
  22   color:#0c0fb7;
  23   text-align: left;
  24 }
  25
  26 html, body, span, applet, object, iframe,
  27 blockquote, pre, section,
  28 abbr, acronym, address, big, cite, code,
  29 del, dfn, em, ins, kbd, q, s, samp,
  30 small, strike, strong, sub, sup, tt, var,
  31 dl, dt, dd, ol, ul, li,
  32 fieldset, form, label, legend,
  33 table, caption, tbody, tfoot, thead, tr, th, td,
  34 article, aside, canvas, details, embed,
  35 figure, figcaption,hgroup,
  36 menu, nav, output, ruby, summary, mark, audio, video {
  37         background-color: #ffffff;
  38         background: none;
  39 }
  40
  41 html {
  42   line-height: 1.1;
  43 }
  44
  45 ol, ul {
  46   list-style: none;
  47 }
  48
  49 table {
  50   border-collapse: collapse;
  51   border-spacing: 0;
  52 }
  53
  54 caption, th, td {
  55   text-align: left;
  56   font-weight: normal;
  57   vertical-align: middle;
  58 }
  59
  60 q, blockquote {
  61   quotes: none;
  62 }
  63 q:before, q:after, blockquote:before, blockquote:after {
  64   content: "";
  65   content: none;
  66 }
  67
  68 a img {
  69   border: none;
  70 }
  71
  72 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  73   display: block;
  74 }
  75
  76 *{
  77         -moz-box-sizing: border-box;
  78         -webkit-box-sizing: border-box;
  79         box-sizing:border-box;
  80 }
  81
  82 body{
  83         margin:0;
  84         padding:0;
  85 }
  86
  87 header{
  88         margin:15px auto 0 auto;
  89         width:1200px;
  90
  91 }
  92
  93 header .spip_logos{
  94         margin-left: 10px;
  95         position:absolute;
  96 }
  97
  98
  99 #wrap{
 100         padding-top:130px;
 101         width:100%;
 102         margin:0 auto;
 103 }
 104 a{
 105         color:#05ffbc;
 106         text-decoration:none;
 107         -webkit-transition: all 0.3s ease 0s;
 108     -moz-transition: all 0.3s ease 0s;
 109     -ms-transition: all 0.3s ease 0s;
 110     -o-transition: all 0.3s ease 0s;
 111     transition: all 0.3s ease 0s;
 112 }
 113
 114 a:focus, a:hover, a:active{
 115         background:none;
 116         color:#0c0fb7;
 117         -webkit-transition: all 0.3s ease 0s;
 118     -moz-transition: all 0.3s ease 0s;
 119     -ms-transition: all 0.3s ease 0s;
 120     -o-transition: all 0.3s ease 0s;
 121     transition: all 0.3s ease 0s;
 122 }
 123
 124 h1{
 125         margin: 0;
 126         padding:0;
 127         margin-top:15px;
 128         margin-left:15px;
 129         font-size:1.9em;
 130         display:inline-block;
 131         font-weight: bold;
 132 }
 133
 134 h1:hover{
 135         text-decoration: underline;
 136 }
 137
 138 h2{
 139         margin: 15px 15px;
 140         font-size:1.3em;
 141         display:inline-block;
 142 }
 143
 144 h3{
 145         margin:15px;
 146         display:inline-block;
 147 }
 148
 149 p{
 150         margin:0 15px;
 151         padding-bottom:15px;
 152         text-decoration:none;
 153         text-align: justify;
 154 }
 155
 156 /*1ERE COLONNE*/
 157
 158 .titre{
 159         background-color: #05ffbc;
 160         height: 47px;
 161         width: 100%;
 162         color:#fff;
 163         margin:0 0 15px 0;
 164         padding:10px 15px;
 165         text-transform: uppercase;
 166         font-family: "Trebuchet MS", Helvetica, arial, sans-serif;
 167         font-size: 1.7em;
 168         -webkit-transition: all 0.3s ease 0s;
 169     -moz-transition: all 0.3s ease 0s;
 170     -ms-transition: all 0.3s ease 0s;
 171     -o-transition: all 0.3s ease 0s;
 172     transition: all 0.3s ease 0s;
 173 }
 174 .titre:hover{
 175         background-color: #0c0fb7;
 176         -webkit-transition: all 0.3s ease 0s;
 177     -moz-transition: all 0.3s ease 0s;
 178     -ms-transition: all 0.3s ease 0s;
 179     -o-transition: all 0.3s ease 0s;
 180     transition: all 0.3s ease 0s;
 181 }
 182 #ateliers{
 183         margin:0 10px;
 184 }
 185
 186 #ateliers:after {
 187         content: ""; /* Important, sinon l'élément n'est pas généré. */
 188         display: table;
 189         clear: both;
 190 }
 191
 192 #ateliers ul{
 193         padding:0;
 194         margin:0;
 195         list-style-type:none;
 196 }
 197
 198 #ateliers ul li{
 199         margin-bottom:15px;
 200 }
 201 .descriptif{
 202         margin-left:15px;
 203 }
 204
 205 #ateliers p{
 206         margin: 15px 15px 0 0;
 207         font-size:1.0em;
 208         text-align: left;
 209 }
 210 #ateliers address{
 211         margin:0 0 0 15px;
 212         line-height: 0.6;
 213 }
 214 .horairesouvertures{
 215         margin:0 0 0 15px;
 216 }
 217 .logoatelier{
 218         margin:auto;
 219         width: 300px;
 220 }
 221 #ateliers nav{
 222         padding-top:15px;
 223         clear:both;
 224 }
 225 .fa{
 226         color:#05ffbc;
 227 }
 228 .fa:hover{
 229         color:#0c0fb7;
 230 }
 231
 232 /*2EME COLONNE*/
 233
 234
 235 #news{
 236         overflow: hidden;
 237         margin:0 10px;
 238 }
 239 .article{
 240         background-color:#e8e3e1;
 241         margin:0 0 15px 0;
 242         line-height: 1.3;
 243 }
 244 .spip_logo{
 245         display:none;
 246 }
 247 .article .spip_logos{
 248         display: none;
 249 }
 250 .sourcearticle{
 251         width: 20px;
 252         height: 20px;
 253         -moz-border-radius: 10px;
 254         -webkit-border-radius: 10px;
 255         border-radius: 10px;
 256 }
 257 .article img{
 258         width:100%;
 259 }
 260 address{
 261         padding-bottom: 10px;
 262 }
 263 address p{
 264         margin:0;
 265         padding:0;
 266 }
 267 .historique{
 268         background-color: #ffd2a1;
 269         margin:0 15px 15px 15px;
 270 }
 271 .historique h1{
 272         width:100%;
 273 }
 274 #atelierdescription{
 275         margin:0 10px;
 276 }
 277 #atelierdescription #news{
 278         margin:0;
 279 }
 280 #atelierdescription img{
 281         width: 100%;
 282 }
 283
 284
 285 /*3EME COLONNE*/
 286
 287
 288
 289 .map{
 290         height: 300px;
 291         margin:0 10px 15px 10px;
 292         overflow: hidden;
 293 }
 294
 295 .agenda{
 296         background-color: #05ffbc;
 297         height:500px;
 298         margin:0 10px 15px 10px;
 299         padding-right: 10px;
 300         overflow-y: scroll;
 301 }
 302
 303 .agenda p{
 304         padding: 0;
 305 }
 306
 307 .agenda ul{
 308         list-style-type:none;
 309         padding:0;
 310         margin:0;
 311         padding-top:15px;
 312 }
 313 .date{
 314         float:left;
 315         font-size: 1.7em;
 316         clear: both;
 317 }
 318
 319 .event{
 320         display: block;
 321         margin-bottom: 10px;
 322         padding-top: 5px;
 323 }
 324 .horaire{
 325         font-size: 0.8em;
 326         margin-bottom: 20px;
 327         display: block;
 328 }
 329 .nature{
 330         overflow-y: scroll;
 331         height: 70px;
 332
 333 }
 334
 335
 336 /*RESPONSIVE*/
 337
 338
 339 $columns: 12!default;
 340 $medium:650px;
 341 $large:1200px;
 342
 343 %col{
 344         float:left;
 345         position: relative;
 346 }
 347
 348 @for $i from 1 through $columns{
 349         .col-#{$i}{
 350         @extend %col;
 351         width:$i / $columns * 100%;}
 352         .col-m-#{$i}, .col-l-#{$i}{@extend %col;}
 353 }
 354
 355 @media only screen and (min-width: $medium){
 356         @for $i from 1 through $columns{
 357         .col-m-#{$i}{
 358         width:$i / $columns * 100%;}
 359         }
 360
 361 }
 362 @media only screen and (min-width: $large){
 363         @for $i from 1 through $columns{
 364         .col-l-#{$i}{
 365         width:$i / $columns * 100%;}
 366         }
 367         #wrap{
 368         width:1200px;
 369 }
 370
 371 .wrap{
 372         width: auto;
 373 }
 374 }
 375
 376
 377
 378 .row:before, .row:after{
 379         content: "";
 380         display:table;
 381 }
 382
 383 .row:after{
 384         clear:both;
 385 }
 386
 387
 388 .row{
 389         margin: 0 -10px;
 390         zoom: 1;
 391 }
 392
 393
 394 /*FOOTER*/
 395
 396 footer{
 397         clear:both;
 398         height:100px;
 399         background-color: #05ffbc;
 400 }
 401
 402 footer ul {
 403         padding:0;
 404         margin:0 auto;
 405         list-style-type:none;
 406         padding-top:30px;
 407 }
 408 .textfooter{
 409         width:500px;
 410         margin:0 auto;
 411 }
 412 footer li {
 413         float:left; /*pour IE*/
 414         text-align: center;
 415 }
 416 footer ul li a {
 417         display:block;
 418         float:left;
 419         text-decoration:none;
 420         color: #120260;
 421 }
 422 footer ul li a:hover {
 423         border-bottom: solid #1d0b78;
 424 }
 425