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         font-size: 0.9em;
  86
  87 }
  88
  89 header{
  90         margin:15px auto 0 auto;
  91         width:1200px;
  92
  93 }
  94
  95 header .spip_logos{
  96         margin-left: 10px;
  97         position:absolute;
  98 }
  99
 100
 101 #wrap{
 102         padding-top:130px;
 103         width:100%;
 104         margin:0 auto;
 105 }
 106 a{
 107         color:#0fe4ab;
 108         text-decoration:none;
 109         -webkit-transition: all 0.3s ease 0s;
 110     -moz-transition: all 0.3s ease 0s;
 111     -ms-transition: all 0.3s ease 0s;
 112     -o-transition: all 0.3s ease 0s;
 113     transition: all 0.3s ease 0s;
 114 }
 115
 116 a:focus, a:hover, a:active{
 117         background:none;
 118         color:#0c0fb7;
 119         -webkit-transition: all 0.3s ease 0s;
 120     -moz-transition: all 0.3s ease 0s;
 121     -ms-transition: all 0.3s ease 0s;
 122     -o-transition: all 0.3s ease 0s;
 123     transition: all 0.3s ease 0s;
 124 }
 125 a:hover > i {
 126         color : #0c0fb7 !important;
 127         -webkit-transition: all 0.3s ease 0s;
 128     -moz-transition: all 0.3s ease 0s;
 129     -ms-transition: all 0.3s ease 0s;
 130     -o-transition: all 0.3s ease 0s;
 131     transition: all 0.3s ease 0s;
 132 }
 133 h1{
 134         z-index: -9999;
 135 }
 136 h2{
 137         margin: 0;
 138         padding:0;
 139         margin-top:15px;
 140         margin-left:15px;
 141         font-size:1.8em;
 142         display:inline-block;
 143         font-weight: bold;
 144         width: 90%;
 145 }
 146 h2:hover{
 147         text-decoration: underline;
 148 }
 149
 150 h3{
 151         margin: 15px 15px;
 152         font-size:1.2em;
 153         display:inline-block;
 154         width:90%;
 155 }
 156
 157 h4{
 158         margin:15px;
 159         display:inline-block;
 160 }
 161
 162 p{
 163         margin:0 15px;
 164         padding-bottom:15px;
 165         text-decoration:none;
 166         text-align: justify;
 167 }
 168
 169 /*1ERE COLONNE*/
 170
 171 .titre{
 172         background-color: #05ffbc;
 173         height: 47px;
 174         width: 100%;
 175         color:#fff;
 176         margin:0 0 15px 0;
 177         padding:10px 15px;
 178         text-transform: uppercase;
 179         font-family: "Trebuchet MS", Helvetica, arial, sans-serif;
 180         font-size: 1.7em;
 181         font-weight: normal;
 182 }
 183 .titre:hover{
 184         text-decoration: none;
 185         font-weight: normal;
 186 }
 187 #ateliers h3{
 188         margin: 15px 15px;
 189         font-size:1.2em;
 190         display:inline-block;
 191         text-decoration: none;
 192 }
 193 #ateliers{
 194         margin:0 10px;
 195 }
 196
 197 #ateliers:after {
 198         content: ""; /* Important, sinon l'élément n'est pas généré. */
 199         display: table;
 200         clear: both;
 201 }
 202
 203 #ateliers ul{
 204         padding:0;
 205         margin:0;
 206         list-style-type:none;
 207 }
 208
 209 #ateliers ul li{
 210         margin-bottom:15px;
 211 }
 212 .descriptif{
 213         margin-left:15px;
 214 }
 215
 216 #ateliers p{
 217         margin: 15px 15px 0 0;
 218         font-size:1.0em;
 219         text-align: left;
 220 }
 221 #ateliers address{
 222         margin:0 0 0 15px;
 223         line-height: 0.6;
 224 }
 225 .horairesouvertures{
 226         margin:0 0 0 15px;
 227 }
 228 #ateliers nav{
 229         padding-top:15px;
 230         padding-bottom: 15px;
 231         clear:both;
 232 }
 233 .fa{
 234         color:#0fe4ab;
 235         -webkit-transition: all 0.3s ease 0s;
 236     -moz-transition: all 0.3s ease 0s;
 237     -ms-transition: all 0.3s ease 0s;
 238     -o-transition: all 0.3s ease 0s;
 239     transition: all 0.3s ease 0s;
 240 }
 241 .fa:hover{
 242         color:#0c0fb7;
 243 }
 244 #atelierdescription nav{
 245         margin-bottom: 15px;
 246 }
 247 .voirenligne{
 248         padding:15px;
 249         text-align: right;
 250 }
 251 /*2EME COLONNE*/
 252
 253
 254 #news{
 255         margin:0 10px;
 256 }
 257 .article{
 258         background-color:#e8e3e1;
 259         margin:0 0 15px 0;
 260         line-height: 1.3;
 261 }
 262 .article h1{
 263         font-size: 1.4em;
 264         width:100%;
 265 }
 266 .article .fa{
 267         width: 20px;
 268         height: 20px;
 269         -moz-border-radius: 10px;
 270         -webkit-border-radius: 10px;
 271         border-radius: 10px;
 272 }
 273 .article .fa a{
 274         display: none;
 275 }
 276 .article img{
 277         width:100%;
 278         height:auto;
 279         margin:0;
 280 }
 281 .article ul{
 282         margin:0 15px;
 283 }
 284 .article li{
 285         margin:0 15px;
 286 }
 287 .article div{
 288         margin:0 15px;
 289 }
 290
 291
 292 .articlefull{
 293         background-color:#e8e3e1;
 294         margin:0 0 15px 0;
 295         line-height: 1.3;
 296 }
 297 .articlefull h1{
 298         font-size: 1.4em;
 299         width:100%;
 300 }
 301 .articlefull .fa{
 302         width: 20px;
 303         height: 20px;
 304         -moz-border-radius: 10px;
 305         -webkit-border-radius: 10px;
 306         border-radius: 10px;
 307 }
 308 .articlefull .fa a{
 309         display: none;
 310 }
 311 .articlefull img{
 312         width:auto;
 313         margin:0;
 314 }
 315 .articlefull ul{
 316         margin:0 15px;
 317 }
 318 .articlefull li{
 319         margin:0 15px;
 320 }
 321 .articlefull div{
 322         margin:0 15px;
 323 }
 324 address{
 325         padding-bottom: 10px;
 326 }
 327 address p{
 328         margin:0;
 329         padding:0;
 330 }
 331 .historique{
 332         background-color: #ffd2a1;
 333         margin:0 15px 15px 15px;
 334 }
 335 .historique h1{
 336         width:100%;
 337 }
 338 #atelierdescription{
 339         margin:0 10px;
 340 }
 341 #atelierdescription #news{
 342         margin:0;
 343 }
 344 .spip_logos{
 345         width:auto!important;
 346 }
 347 .urlsites{
 348         padding:15px 0;
 349 }
 350
 351 /*3EME COLONNE*/
 352
 353
 354
 355 .map{
 356         height: 300px;
 357         margin:0 10px 15px 10px;
 358         overflow: hidden;
 359 }
 360 .agenda{
 361         background-color: #05ffbc;
 362         margin:0 10px 15px 10px;
 363         padding-right: 10px;
 364         padding-bottom: 15px;
 365 }
 366 .agenda h2:hover{
 367         text-decoration: none;
 368 }
 369 .agenda p{
 370         padding: 0;
 371 }
 372 .agenda ul{
 373         list-style-type:none;
 374         padding:0;
 375         margin:0;
 376         padding-top:15px;
 377 }
 378 .date{
 379         float:left;
 380         font-size: 1.7em;
 381         clear: both;
 382 }
 383 .event{
 384         display: block;
 385         margin-bottom: 45px;
 386         padding-top: 5px;
 387
 388 }
 389 .horaire{
 390         font-size: 0.8em;
 391         margin-bottom: 20px;
 392         display: block;
 393 }
 394
 395
 396 /*RESPONSIVE*/
 397
 398
 399 $columns: 12!default;
 400 $medium:650px;
 401 $large:1200px;
 402
 403 %col{
 404         float:left;
 405         position: relative;
 406 }
 407
 408 @for $i from 1 through $columns{
 409         .col-#{$i}{
 410         @extend %col;
 411         width:$i / $columns * 100%;}
 412         .col-m-#{$i}, .col-l-#{$i}{@extend %col;}
 413 }
 414
 415 @media only screen and (min-width: $medium){
 416         @for $i from 1 through $columns{
 417         .col-m-#{$i}{
 418         width:$i / $columns * 100%;}
 419         }
 420
 421 }
 422 @media only screen and (min-width: $large){
 423         @for $i from 1 through $columns{
 424         .col-l-#{$i}{
 425         width:$i / $columns * 100%;}
 426         }
 427         #wrap{
 428         width:1200px;
 429 }
 430
 431 .wrap{
 432         width: auto;
 433 }
 434 }
 435
 436
 437
 438 .row:before, .row:after{
 439         content: "";
 440         display:table;
 441 }
 442
 443 .row:after{
 444         clear:both;
 445 }
 446
 447
 448 .row{
 449         margin: 0 -10px;
 450         zoom: 1;
 451 }
 452
 453
 454 /*FOOTER*/
 455
 456 footer{
 457         clear:both;
 458         height:100px;
 459         background-color: #05ffbc;
 460         width:100%;
 461 }
 462
 463 footer ul {
 464         width:500px;
 465         margin:0 auto;
 466         padding:30px 0 0;
 467         list-style-type:none;
 468 }
 469
 470 footer li {
 471         float:left; /*pour IE*/
 472         text-align: center;
 473 }
 474 footer ul li a {
 475         display:block;
 476         text-decoration:none;
 477         color: #0c0fb7;
 478 }
 479 footer ul li a:hover {
 480         border-bottom: solid #0c0fb7;
 481 }
 482