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:#120260;
  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: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         text-decoration:none;
 106         -webkit-transition: all 0.3s ease 0s;
 107     -moz-transition: all 0.3s ease 0s;
 108     -ms-transition: all 0.3s ease 0s;
 109     -o-transition: all 0.3s ease 0s;
 110     transition: all 0.3s ease 0s;
 111 }
 112
 113 a:focus, a:hover, a:active{
 114         background:none;
 115         color:#e1702e;
 116         -webkit-transition: all 0.3s ease 0s;
 117     -moz-transition: all 0.3s ease 0s;
 118     -ms-transition: all 0.3s ease 0s;
 119     -o-transition: all 0.3s ease 0s;
 120     transition: all 0.3s ease 0s;
 121 }
 122
 123 h1{
 124         margin: 0;
 125         padding:0;
 126         margin-top:15px;
 127         margin-left:15px;
 128         font-size:1.9em;
 129         display:inline-block;
 130         font-weight: bold;
 131 }
 132
 133 h1:hover{
 134         text-decoration: underline;
 135         -webkit-transition: all 0.3s ease 0s;
 136     -moz-transition: all 0.3s ease 0s;
 137     -ms-transition: all 0.3s ease 0s;
 138     -o-transition: all 0.3s ease 0s;
 139     transition: all 0.3s ease 0s;
 140 }
 141
 142
 143 h2{
 144         margin: 15px 15px;
 145         font-size:1.3em;
 146         display:inline-block;
 147 }
 148
 149 h3{
 150         margin:15px;
 151         display:inline-block;
 152 }
 153
 154 p{
 155         margin:0 15px;
 156         padding-bottom:15px;
 157         text-decoration:none;
 158         text-align: justify;
 159 }
 160
 161 /*1ERE COLONNE*/
 162
 163
 164 #ateliers{
 165         margin:0 10px;
 166 }
 167
 168 #ateliers:after {
 169         content: ""; /* Important, sinon l'élément n'est pas généré. */
 170         display: table;
 171         clear: both;
 172 }
 173
 174 #ateliers ul{
 175         padding:0;
 176         margin:0;
 177         list-style-type:none;
 178 }
 179
 180 #ateliers ul li{
 181         margin-bottom:15px;
 182 }
 183 .descriptif{
 184         margin-left:15px;
 185 }
 186
 187 #ateliers p{
 188         margin: 15px 15px 0 0;
 189         font-size:1.0em;
 190         text-align: left;
 191 }
 192 #ateliers address{
 193         margin:0 0 0 15px;
 194         line-height: 0.6;
 195 }
 196 .horairesouvertures{
 197         margin:0 0 0 15px;
 198 }
 199
 200
 201 /*2EME COLONNE*/
 202
 203
 204 #news{
 205         overflow: hidden;
 206 }
 207 .article{
 208         background-color:#e8e3e1;
 209         margin:0 10px 15px 10px;
 210         line-height: 1.3;
 211 }
 212 .spip_logo{
 213         display:none;
 214 }
 215 .article .spip_logos{
 216         display: none;
 217 }
 218
 219 .historique{
 220         background-color: #ffd2a1;
 221         margin:0 15px 15px 15px;
 222 }
 223 .historique h1{
 224         width:100%;
 225 }
 226
 227 #atelierdescription img{
 228         width: 100%;
 229 }
 230 .logoatelier{
 231 }
 232
 233
 234 /*3EME COLONNE*/
 235
 236
 237
 238 .map{
 239         height: 300px;
 240         margin:0 10px 15px 10px;
 241         overflow: hidden;
 242 }
 243
 244 .agenda{
 245         background-color: #a1ffff;
 246         height:500px;
 247         margin:0 10px 0px 10px;
 248         padding-right: 10px;
 249         overflow-y: scroll;
 250 }
 251
 252 .agenda p{
 253         padding: 0;
 254 }
 255
 256 .agenda ul{
 257         list-style-type:none;
 258         padding:0;
 259         margin:0;
 260         padding-top:15px;
 261 }
 262 .date{
 263         float:left;
 264         font-size: 1.7em;
 265         clear: both;
 266 }
 267
 268 .event{
 269         display: block;
 270         margin-bottom: 10px;
 271         padding-top: 5px;
 272 }
 273 .horaire{
 274         font-size: 0.8em;
 275         margin-bottom: 20px;
 276         display: block;
 277 }
 278 .nature{
 279         overflow-y: scroll;
 280         height: 70px;
 281
 282 }
 283
 284
 285 /*RESPONSIVE*/
 286
 287
 288 $columns: 12!default;
 289 $medium:650px;
 290 $large:1200px;
 291
 292 %col{
 293         float:left;
 294         position: relative;
 295 }
 296
 297 @for $i from 1 through $columns{
 298         .col-#{$i}{
 299         @extend %col;
 300         width:$i / $columns * 100%;}
 301         .col-m-#{$i}, .col-l-#{$i}{@extend %col;}
 302 }
 303
 304 @media only screen and (min-width: $medium){
 305         @for $i from 1 through $columns{
 306         .col-m-#{$i}{
 307         width:$i / $columns * 100%;}
 308         }
 309
 310 }
 311 @media only screen and (min-width: $large){
 312         @for $i from 1 through $columns{
 313         .col-l-#{$i}{
 314         width:$i / $columns * 100%;}
 315         }
 316         #wrap{
 317         width:1200px;
 318 }
 319
 320 .wrap{
 321         width: auto;
 322 }
 323 }
 324
 325
 326
 327 .row:before, .row:after{
 328         content: "";
 329         display:table;
 330 }
 331
 332 .row:after{
 333         clear:both;
 334 }
 335
 336
 337 .row{
 338         margin: 0 -10px;
 339         zoom: 1;
 340 }
 341
 342
 343 /*FOOTER*/
 344
 345 footer{
 346         clear:both;
 347         height:100px;
 348         background-color: #e1702e;
 349 }
 350
 351 footer ul {
 352         padding:0;
 353         margin:0 auto;
 354         list-style-type:none;
 355         padding-top:30px;
 356 }
 357 .textfooter{
 358         width:500px;
 359         margin:0 auto;
 360 }
 361 footer li {
 362         float:left; /*pour IE*/
 363         text-align: center;
 364 }
 365 footer ul li a {
 366         display:block;
 367         float:left;
 368         text-decoration:none;
 369 }
 370 footer ul li a:hover {
 371         border-bottom: solid #1d0b78;
 372 }
 373