css/habillage.scss

   1 *{
   2         -moz-box-sizing: border-box;
   3         -webkit-box-sizing: border-box;
   4         box-sizing:border-box;
   5 }
   6
   7 body{
   8         margin:0;
   9         padding:0;
  10         font-family: sans-serif;
  11         color:#1a0583;
  12 }
  13
  14 header{
  15         margin:0 auto;
  16         width:100%;
  17 }
  18
  19 header img{
  20         margin-left:120px;
  21 }
  22
  23 #wrap{
  24         padding-top:20px;
  25         width:1100px;
  26         margin:0 auto;
  27 }
  28 a{
  29         text-decoration:none;
  30 }
  31
  32 h1{
  33         margin: 0;
  34         padding:0;
  35         padding-top:15px;
  36         padding-left:15px;
  37         font-size:1.9em;
  38         display:inline-block;
  39 }
  40
  41 h2{
  42         margin: 15px 15px;
  43         font-size:1.3em;
  44         display:inline-block;
  45 }
  46
  47 h3{
  48         margin:15px;
  49         display:inline-block;
  50 }
  51
  52 p{
  53         margin:0 15px;
  54         text-decoration:none;
  55         text-align: justify;
  56 }
  57
  58 /*1ERE COLONNE*/
  59
  60
  61 #ateliers{
  62         margin:0 10px;
  63 }
  64
  65 #ateliers:after {
  66         content: ""; /* Important, sinon l'élément n'est pas généré. */
  67         display: table;
  68         clear: both;
  69 }
  70
  71 #ateliers ul{
  72         padding:0;
  73         margin:0;
  74         list-style-type:none;
  75 }
  76
  77 #ateliers ul li{
  78         height: 300px;
  79         margin-bottom:15px;
  80         background-color: #2bc7cd;
  81 }
  82
  83 #ateliers p{
  84         margin: 15px 15px;
  85         font-size:1em;
  86         -webkit-margin-before: 1em;
  87         -webkit-margin-after: 1em;
  88         -webkit-margin-start: 0px;
  89         -webkit-margin-end: 0px;
  90         font-weight: bold;
  91 }
  92
  93
  94 /*2EME COLONNE*/
  95
  96
  97 #news{
  98         margin:0 10px 10px 10px;
  99         overflow: hidden;
 100 }
 101
 102 #news img{
 103         height:350px;
 104 }
 105
 106 .article{
 107         background-color:#ffaa7f;
 108
 109 }
 110
 111 .suite{
 112         text-align:right;
 113         padding-bottom: 20px;
 114 }
 115
 116
 117
 118 /*3EME COLONNE*/
 119
 120
 121
 122 .map{
 123         background-color:#6059d2;
 124         height: 300px;
 125         margin:0 0 15px 10px;
 126 }
 127
 128 .agenda{
 129         background-color: #3ee88d;
 130         height:500px;
 131         margin:0 0 0px 10px;
 132         padding-right: 10px;
 133 }
 134
 135 .agenda p{
 136         line-height: 120%;
 137 }
 138
 139 .agenda ul{
 140         list-style-type:none;
 141         padding:0;
 142         margin:0;
 143         padding-top:15px;
 144 }
 145
 146 .date{
 147         float:left;
 148         font-size: 1.7em;
 149
 150 }
 151
 152 /*RESPONSIVE*/
 153
 154 .col-2,
 155 .col-4,
 156 .col-6,
 157 .col-8,
 158 .col-10,
 159 .col-12{
 160         float:left;
 161         position:relative;
 162
 163
 164 }
 165
 166 .row:before, .row:after{
 167         content: "";
 168         display:table;
 169 }
 170
 171 .row:after{
 172         clear:both;
 173 }
 174
 175
 176 .row{
 177         margin: 0 -10px;
 178         zoom: 1;
 179 }
 180
 181
 182
 183 .col-1{
 184         width:8.33333%;
 185 }
 186
 187 .col-2{
 188         width:16.66667%;
 189 }
 190
 191 .col-3{
 192         width:25%;
 193 }
 194
 195
 196 .col-4{
 197         width:33.33333%;
 198 }
 199
 200 .col-5{
 201         width:41.66667%;
 202 }
 203
 204 .col-6{
 205         width:50%;
 206 }
 207
 208 .col-7{
 209         width:58.33333%;
 210 }
 211
 212 .col-8{
 213         width:66.66666%;
 214 }
 215
 216 .col-9{
 217         width:75%;
 218 }
 219
 220 .col-10{
 221         width:83.33333%;
 222 }
 223
 224 .col-11{
 225         width:91.66667%;
 226 }
 227
 228 .col-12{
 229         width:100%;
 230 }
 231
 232
 233
 234
 235 @media only screen and (min-width:640px) {
 236
 237 .col-m-1{
 238         width:8.33333%;
 239 }
 240
 241 .col-m-2{
 242         width:16.66667%;
 243 }
 244
 245 .col-m-3{
 246         width:25%;
 247 }
 248
 249
 250 .col-m-4{
 251         width:33.33333%;
 252 }
 253
 254 .col-m-5{
 255         width:41.66667%;
 256 }
 257
 258 .col-m-6{
 259         width:50%;
 260 }
 261
 262 .col-m-7{
 263         width:58.33333%;
 264 }
 265
 266 .col-m-8{
 267         width:66.66666%;
 268 }
 269
 270 .col-m-9{
 271         width:75%;
 272 }
 273
 274 .col-m-10{
 275         width:83.33333%;
 276 }
 277
 278 .col-m-11{
 279         width:91.66667%;
 280 }
 281
 282 .col-m-12{
 283         width:100%;
 284 }
 285
 286 }
 287
 288
 289
 290
 291
 292
 293 @media only screen and (min-width:1024px) {
 294
 295 .col-l-1{
 296         width:8.33333%;
 297 }
 298
 299 .col-l-2{
 300         width:16.66667%;
 301 }
 302
 303 .col-l-3{
 304         width:25%;
 305 }
 306
 307
 308 .col-l-4{
 309         width:33.33333%;
 310 }
 311
 312 .col-l-5{
 313         width:41.66667%;
 314 }
 315
 316 .col-l-6{
 317         width:50%;
 318 }
 319
 320 .col-l-7{
 321         width:58.33333%;
 322 }
 323
 324 .col-l-8{
 325         width:66.66666%;
 326 }
 327
 328 .col-l-9{
 329         width:75%;
 330 }
 331
 332 .col-l-10{
 333         width:83.33333%;
 334 }
 335
 336 .col-l-11{
 337         width:91.66667%;
 338 }
 339
 340 .col-l-12{
 341         width:100%;
 342 }
 343 }
 344
 345 /*FOOTER*/
 346
 347 footer{
 348         clear:both;
 349         height:200px;
 350         width:100%;
 351         background-color: #ffaa7f;
 352
 353 }
 354
 355 footer ul {
 356         padding:0;
 357         margin:0;
 358         list-style-type:none;
 359         padding-top:70px;
 360         margin-left:100px;
 361
 362 }
 363 footer li {
 364         margin-left:2px;
 365         float:left; /*pour IE*/
 366 }
 367 footer ul li a {
 368         display:block;
 369         float:left;
 370         text-decoration:none;
 371 }
 372 footer ul li a:hover {
 373         border-bottom: solid #1d0b78;
 374 }
 375