css/habillage.scss

   1 @charset "UTF-8";
   2 html, body, div, span, applet, object, iframe,
   3 h1, h2, h3, h4, h5, h6, h7, 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   border-radius: 5px;
  19   font: inherit;
  20   font-size: 100%;
  21   vertical-align: baseline;
  22   font-family: sans-serif;
  23   color: #000;       /*#0c0fb7;*/
  24   text-align: left;
  25 }
  26
  27 html, body, span, applet, object, iframe,
  28 blockquote, pre, section,
  29 abbr, acronym, address, big, cite, code,
  30 del, dfn, em, ins, kbd, q, s, samp,
  31 small, strike, strong, sub, sup, tt, var,
  32 dl, dt, dd, ol, ul, li,
  33 fieldset, form, label, legend,
  34 table, caption, tbody, tfoot, thead, tr, th, td,
  35 article, aside, canvas, details, embed,
  36 figure, figcaption,hgroup,
  37 menu, nav, output, ruby, summary, mark, audio, video {
  38         background-color: #FFFFFF;
  39         background: none;
  40 }
  41
  42 body {
  43     background-color: #B3B6C7;
  44 }
  45
  46 html {
  47   line-height: 1.1;
  48 }
  49
  50 ol, ul {
  51   list-style: none;
  52 }
  53
  54 table {
  55   border-collapse: collapse;
  56   border-spacing: 0;
  57 }
  58
  59 caption, th, td {
  60   text-align: left;
  61   font-weight: normal;
  62   vertical-align: middle;
  63 }
  64
  65 q, blockquote {
  66   quotes: none;
  67 }
  68 q:before, q:after, blockquote:before, blockquote:after {
  69   content: "";
  70   content: none;
  71 }
  72
  73 a img {
  74   border: none;
  75 }
  76
  77 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  78   display: block;
  79 }
  80
  81 *{
  82         -moz-box-sizing: border-box;
  83         -webkit-box-sizing: border-box;
  84         box-sizing:border-box;
  85 }
  86
  87 body{
  88         margin:0;
  89         padding:0;
  90         font-size: 0.9em;
  91
  92 }
  93
  94 header{
  95         margin: 15px auto 0 auto;
  96         width:1200px;
  97 }
  98
  99 header .spip_logos{
 100         margin-left: 30px;
 101         position:absolute;
 102 }
 103
 104
 105 #wrap{
 106         padding-top:130px;
 107         width:100%;
 108         margin:0 auto;
 109 }
 110 a{
 111         color: #373D4E;  /*#0fe4ab;*/
 112         text-decoration:none;
 113         -webkit-transition: all 0.3s ease 0s;
 114     -moz-transition: all 0.3s ease 0s;
 115     -ms-transition: all 0.3s ease 0s;
 116     -o-transition: all 0.3s ease 0s;
 117     transition: all 0.3s ease 0s;
 118 }
 119
 120 a:focus, a:hover, a:active{
 121         background:none;
 122         color:#0c0fb7;
 123         -webkit-transition: all 0.3s ease 0s;
 124     -moz-transition: all 0.3s ease 0s;
 125     -ms-transition: all 0.3s ease 0s;
 126     -o-transition: all 0.3s ease 0s;
 127     transition: all 0.3s ease 0s;
 128 }
 129 a:hover > i {
 130         color : #0c0fb7 !important;
 131         -webkit-transition: all 0.3s ease 0s;
 132     -moz-transition: all 0.3s ease 0s;
 133     -ms-transition: all 0.3s ease 0s;
 134     -o-transition: all 0.3s ease 0s;
 135     transition: all 0.3s ease 0s;
 136 }
 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 .banniere{
 172         margin:0 auto;
 173         width: 1100px;
 174         height: 100px;
 175         float: right;
 176 }
 177
 178 /*1ERE COLONNE*/
 179
 180 .titre{
 181         background-color: #262730;
 182         height: 47px;
 183         width: 100%;
 184         color:#B7CEBF;
 185         margin:0 0 15px 0;
 186         padding:10px 15px;
 187         text-transform: uppercase;
 188         font-family: "Trebuchet MS", Helvetica, arial, sans-serif;
 189         font-size: 1.7em;
 190         font-weight: normal;
 191 }
 192 .titre:hover{
 193         text-decoration: none;
 194         font-weight: normal;
 195 }
 196 #ateliers h3{
 197         margin: 15px 15px;
 198         font-size:1.2em;
 199         display:inline-block;
 200         text-decoration: none;
 201 }
 202 #ateliers{
 203         margin:0 10px;
 204 }
 205
 206 #ateliers:after {
 207         content: ""; /* Important, sinon l'élément n'est pas généré. */
 208         display: table;
 209         clear: both;
 210 }
 211
 212 #ateliers ul{
 213         padding:0;
 214         margin:0;
 215         list-style-type:none;
 216 }
 217
 218 #ateliers ul li{
 219         margin-bottom:15px;
 220 }
 221 .descriptif{
 222         margin-left:15px;
 223 }
 224
 225 #ateliers p{
 226         margin: 15px 15px 0 0;
 227         font-size:1.0em;
 228         text-align: left;
 229 }
 230 #ateliers address{
 231         margin:0 0 0 15px;
 232         line-height: 0.6;
 233 }
 234 .horairesouvertures{
 235         margin:0 0 0 15px;
 236 }
 237 #ateliers nav{
 238         padding-top:15px;
 239         padding-bottom: 15px;
 240         clear:both;
 241 }
 242 .fa{
 243         color: #373D4E;   /*#0fe4ab;*/
 244         -webkit-transition: all 0.3s ease 0s;
 245     -moz-transition: all 0.3s ease 0s;
 246     -ms-transition: all 0.3s ease 0s;
 247     -o-transition: all 0.3s ease 0s;
 248     transition: all 0.3s ease 0s;
 249 }
 250 .fa:hover{
 251         color:#0c0fb7;
 252 }
 253 #atelierdescription nav{
 254         margin-bottom: 15px;
 255 }
 256 .voirenligne{
 257         padding:15px;
 258         text-align: right;
 259 }
 260
 261
 262 .logoatelier{
 263         text-align: center;
 264 }
 265
 266
 267 /*2EME COLONNE*/
 268
 269
 270 #news{
 271         margin:0 10px;
 272 }
 273 .article, .auteur{
 274         background-color:#e8e3e1;
 275         margin:0 0 15px 0;
 276         line-height: 1.3;
 277 }
 278 .auteur ul {
 279   margin: 15px 0 0 15px;
 280 }
 281 .auteur .submit {
 282   margin: 15px;
 283 }
 284 .article h1{
 285         font-size: 1.4em;
 286         width:100%;
 287 }
 288 .article .fa{
 289         width: 20px;
 290         height: 20px;
 291         -moz-border-radius: 10px;
 292         -webkit-border-radius: 10px;
 293         border-radius: 10px;
 294 }
 295 .article .fa a{
 296         display: none;
 297 }
 298 .article img{
 299         width:100%;
 300         height:auto;
 301         margin:0;
 302 }
 303 .article ul{
 304         margin:0 15px;
 305 }
 306 .article li{
 307         margin:0 15px;
 308 }
 309 .article div{
 310         margin:0 15px;
 311 }
 312
 313
 314 .articlefull,.auteurfull{
 315         background-color:#e8e3e1;
 316         margin:0 0 15px 0;
 317         line-height: 1.3;
 318 }
 319 .articlefull h1{
 320         font-size: 1.4em;
 321         width:100%;
 322 }
 323 .articlefull .fa{
 324         width: 20px;
 325         height: 20px;
 326         -moz-border-radius: 10px;
 327         -webkit-border-radius: 10px;
 328         border-radius: 10px;
 329 }
 330 .articlefull .fa a{
 331         display: none;
 332 }
 333 .articlefull img{
 334         width:auto;
 335         margin:0;
 336 }
 337 .articlefull ul{
 338         margin:0 15px;
 339 }
 340 .articlefull li{
 341         margin:0 15px;
 342 }
 343 .articlefull div{
 344         margin:0 15px;
 345 }
 346 address{
 347         padding-bottom: 10px;
 348 }
 349 address p{
 350         margin:0;
 351         padding:0;
 352 }
 353 .historique{
 354         background-color: #ffd2a1;
 355         margin:0 15px 15px 15px;
 356 }
 357 .historique h1{
 358         width:100%;
 359 }
 360 #atelierdescription{
 361         margin:0 10px;
 362 }
 363 #atelierdescription #news{
 364         margin:0;
 365 }
 366 .spip_logos{
 367         width:auto!important;
 368 }
 369
 370
 371 .logoatelier{
 372         width: 200px;
 373         height: 200px;
 374         margin: 15px 15px 15px 15px;
 375         text-align: center;
 376 }
 377
 378
 379
 380 .urlsites{
 381         padding:15px 0;
 382 }
 383
 384 /*3EME COLONNE */
 385
 386
 387
 388 .map{
 389         height: 300px;
 390         margin:0 10px 15px 10px;
 391         overflow: hidden;
 392 }
 393 .agenda{
 394         background-color: #262730;
 395         margin:0 10px 15px 10px;
 396         padding-right: 10px;
 397         padding-bottom: 15px;
 398
 399 }
 400
 401
 402 .agenda h2:hover{
 403         text-decoration: none;
 404         color: #ffffff;
 405 }
 406 .agenda h2{
 407         color: #B7CEBF;
 408 }
 409 .agenda p{
 410         padding: 0;
 411         color: #B7CEBF;
 412 }
 413 .agenda ul{
 414         list-style-type:none;
 415         padding:0;
 416         margin:0;
 417         padding-top:15px;
 418 }
 419 .date{
 420         float:left;
 421         font-size: 1.7em;
 422         clear: both;
 423 }
 424 .event{
 425         display: block;
 426         margin-bottom: 45px;
 427         padding-top: 5px;
 428
 429 }
 430 .horaire{
 431         font-size: 0.8em;
 432         margin-bottom: 20px;
 433         display: block;
 434 }
 435
 436
 437 /*RESPONSIVE*/
 438
 439
 440 $columns: 12!default;
 441 $medium:650px;
 442 $large:1200px;
 443
 444 %col{
 445         float:left;
 446         position: relative;
 447 }
 448
 449 @for $i from 1 through $columns{
 450         .col-#{$i}{
 451         @extend %col;
 452         width:$i / $columns * 100%;}
 453         .col-m-#{$i}, .col-l-#{$i}{@extend %col;}
 454 }
 455
 456 @media only screen and (min-width: $medium){
 457         @for $i from 1 through $columns{
 458         .col-m-#{$i}{
 459         width:$i / $columns * 100%;}
 460         }
 461
 462 }
 463 @media only screen and (min-width: $large){
 464         @for $i from 1 through $columns{
 465         .col-l-#{$i}{
 466         width:$i / $columns * 100%;}
 467         }
 468         #wrap{
 469         width:1200px;
 470 }
 471
 472 .wrap{
 473         width: auto;
 474 }
 475 }
 476
 477
 478
 479 .row:before, .row:after{
 480         content: "";
 481         display:table;
 482 }
 483
 484 .row:after{
 485         clear:both;
 486 }
 487
 488
 489 .row{
 490         margin: 0 -10px;
 491         zoom: 1;
 492 }
 493
 494
 495 /*FOOTER*/
 496
 497 footer{
 498         clear:both;
 499         height:125px;
 500         background-color: #262730;
 501 }
 502
 503 footer ul {
 504         width:1000px;
 505         margin: 0px auto;
 506         padding:30px 0 0;
 507         list-style-type:none;
 508 }
 509
 510 footer li {
 511         float:left; /*pour IE*/
 512
 513 }
 514 footer ul li a {
 515         text-align: right;
 516         display:block;
 517         text-decoration:none;
 518         color: #B7CEBF;
 519 }
 520 footer ul li a:hover {
 521         border-bottom: solid #0c0fb7;
 522 }
 523