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:#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: #F4FFB7;
  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: 10px;
 101         position:absolute;
 102 }
 103
 104
 105 #wrap{
 106         padding-top:130px;
 107         width:100%;
 108         margin:0 auto;
 109 }
 110 a{
 111         color:#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 /*1ERE COLONNE*/
 172
 173 .titre{
 174         background-color: #606060;
 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
 254
 255 .logoatelier{
 256         text-align: center;
 257 }
 258 /*2EME COLONNE*/
 259
 260
 261 #news{
 262         margin:0 10px;
 263 }
 264 .article{
 265         background-color:#e8e3e1;
 266         margin:0 0 15px 0;
 267         line-height: 1.3;
 268 }
 269 .article h1{
 270         font-size: 1.4em;
 271         width:100%;
 272 }
 273 .article .fa{
 274         width: 20px;
 275         height: 20px;
 276         -moz-border-radius: 10px;
 277         -webkit-border-radius: 10px;
 278         border-radius: 10px;
 279 }
 280 .article .fa a{
 281         display: none;
 282 }
 283 .article img{
 284         width:100%;
 285         height:auto;
 286         margin:0;
 287 }
 288 .article ul{
 289         margin:0 15px;
 290 }
 291 .article li{
 292         margin:0 15px;
 293 }
 294 .article div{
 295         margin:0 15px;
 296 }
 297
 298
 299 .articlefull{
 300         background-color:#e8e3e1;
 301         margin:0 0 15px 0;
 302         line-height: 1.3;
 303 }
 304 .articlefull h1{
 305         font-size: 1.4em;
 306         width:100%;
 307 }
 308 .articlefull .fa{
 309         width: 20px;
 310         height: 20px;
 311         -moz-border-radius: 10px;
 312         -webkit-border-radius: 10px;
 313         border-radius: 10px;
 314 }
 315 .articlefull .fa a{
 316         display: none;
 317 }
 318 .articlefull img{
 319         width:auto;
 320         margin:0;
 321 }
 322 .articlefull ul{
 323         margin:0 15px;
 324 }
 325 .articlefull li{
 326         margin:0 15px;
 327 }
 328 .articlefull div{
 329         margin:0 15px;
 330 }
 331 address{
 332         padding-bottom: 10px;
 333 }
 334 address p{
 335         margin:0;
 336         padding:0;
 337 }
 338 .historique{
 339         background-color: #ffd2a1;
 340         margin:0 15px 15px 15px;
 341 }
 342 .historique h1{
 343         width:100%;
 344 }
 345 #atelierdescription{
 346         margin:0 10px;
 347 }
 348 #atelierdescription #news{
 349         margin:0;
 350 }
 351 .spip_logos{
 352 /*      width:auto!important;*/
 353         width: 200px;
 354         height: 200px;
 355         margin: 15px 15px 15px 15px;
 356         text-align: center;
 357 }
 358
 359 .urlsites{
 360         padding:15px 0;
 361 }
 362
 363 /*3EME COLONNE*/
 364
 365
 366
 367 .map{
 368         height: 300px;
 369         margin:0 10px 15px 10px;
 370         overflow: hidden;
 371 }
 372 .agenda{
 373         background-color: #606060;
 374         margin:0 10px 15px 10px;
 375         padding-right: 10px;
 376         padding-bottom: 15px;
 377
 378 }
 379
 380
 381 .agenda h2:hover{
 382         text-decoration: none;
 383         color: #ffffff;
 384 }
 385 .agenda h2{
 386         color: #ffffff;
 387 }
 388 .agenda p{
 389         padding: 0;
 390         color: #ffffff;
 391 }
 392 .agenda ul{
 393         list-style-type:none;
 394         padding:0;
 395         margin:0;
 396         padding-top:15px;
 397 }
 398 .date{
 399         float:left;
 400         font-size: 1.7em;
 401         clear: both;
 402 }
 403 .event{
 404         display: block;
 405         margin-bottom: 45px;
 406         padding-top: 5px;
 407
 408 }
 409 .horaire{
 410         font-size: 0.8em;
 411         margin-bottom: 20px;
 412         display: block;
 413 }
 414
 415
 416 /*RESPONSIVE*/
 417
 418
 419 $columns: 12!default;
 420 $medium:650px;
 421 $large:1200px;
 422
 423 %col{
 424         float:left;
 425         position: relative;
 426 }
 427
 428 @for $i from 1 through $columns{
 429         .col-#{$i}{
 430         @extend %col;
 431         width:$i / $columns * 100%;}
 432         .col-m-#{$i}, .col-l-#{$i}{@extend %col;}
 433 }
 434
 435 @media only screen and (min-width: $medium){
 436         @for $i from 1 through $columns{
 437         .col-m-#{$i}{
 438         width:$i / $columns * 100%;}
 439         }
 440
 441 }
 442 @media only screen and (min-width: $large){
 443         @for $i from 1 through $columns{
 444         .col-l-#{$i}{
 445         width:$i / $columns * 100%;}
 446         }
 447         #wrap{
 448         width:1200px;
 449 }
 450
 451 .wrap{
 452         width: auto;
 453 }
 454 }
 455
 456
 457
 458 .row:before, .row:after{
 459         content: "";
 460         display:table;
 461 }
 462
 463 .row:after{
 464         clear:both;
 465 }
 466
 467
 468 .row{
 469         margin: 0 -10px;
 470         zoom: 1;
 471 }
 472
 473
 474 /*FOOTER*/
 475
 476 footer{
 477         clear:both;
 478         height:100px;
 479         background-color: #606060;
 480 }
 481
 482 footer ul {
 483         width:500px;
 484         margin:0 auto;
 485         padding:30px 0 0;
 486         list-style-type:none;
 487 }
 488
 489 footer li {
 490         float:left; /*pour IE*/
 491 }
 492 footer ul li a {
 493         text-align: center;
 494         display:block;
 495         text-decoration:none;
 496         color: #0c0fb7;
 497 }
 498 footer ul li a:hover {
 499         border-bottom: solid #0c0fb7;
 500 }
 501