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