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