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