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