autoprefix+bugfix

This commit is contained in:
2018-08-29 15:25:04 +02:00
parent 8410204991
commit 26a1175fb2
10 changed files with 161 additions and 94 deletions
+1 -1
View File
@@ -1 +1 @@
{"01-08-2018":19,"02-08-2018":424,"20-08-2018":112,"21-08-2018":214,"22-08-2018":440,"24-08-2018":273,"27-08-2018":253} {"01-08-2018":19,"02-08-2018":424,"20-08-2018":112,"21-08-2018":214,"22-08-2018":440,"24-08-2018":273,"27-08-2018":358,"28-08-2018":82,"29-08-2018":104}
+1 -1
View File
@@ -1 +1 @@
{"08-2018":1735} {"08-2018":2026}
+1 -1
View File
@@ -1 +1 @@
{"\/":820,"\/projets":99,"\/news":178,"\/a-propros":57,"\/projets-n-1":1,"\/projets\/projets-n-1":515,"\/projets\/projet-n-2":43,"\/projets\/projets-n-2":5,"\/projets\/projets-n":17} {"\/":979,"\/projets":99,"\/news":197,"\/a-propros":66,"\/projets-n-1":1,"\/projets\/projets-n-1":602,"\/projets\/projet-n-2":54,"\/projets\/projets-n-2":5,"\/projets\/projets-n":23}
+1 -1
View File
@@ -1 +1 @@
{"4b84b15bff6ee5796152495a230e45e3d7e947d9":1535376254} {"4b84b15bff6ee5796152495a230e45e3d7e947d9":1535549030}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+78 -59
View File
@@ -4,7 +4,11 @@ header{
height: 40px; height: 40px;
top: 0; top: 0;
padding: 0 20px; padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
background-color: white; background-color: white;
border-bottom: 2px solid rgb(0,0,0); border-bottom: 2px solid rgb(0,0,0);
@@ -14,40 +18,91 @@ header{
} }
nav{ nav{
margin: auto 0; margin: auto 0;
& > .tags{ ul{
& > a { display: -webkit-box;
li{ display: -ms-flexbox;
position: relative; display: flex;
z-index: 0; -ms-flex-wrap: wrap;
&::after{ flex-wrap: wrap;
content: " "; -webkit-box-pack: end;
position: absolute; -ms-flex-pack: end;
background: rgb(0, 255, 0); justify-content: flex-end;
height: 10px; li{
margin: auto; height: 40px;
z-index: -1; margin-right: 50px;
transition: width 0.5s; -webkit-box-align: center;
width: 0%; -ms-flex-align: center;
} align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
&:last-child{
margin-right: 0px!important;
} }
&:hover{ }
li{ &.tags{
visibility: hidden;
position: absolute;
border-left: 2px solid black;
border-bottom: 2px solid black;
background: white;
top: 40px;
right: 0px;
width: auto;
z-index: 999;
a{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: auto;
height: 50px;
padding: 0 20px;
& > li{
margin: auto;
position: relative;
&::after{ &::after{
content: " "; content: " ";
position: absolute; position: absolute;
background: rgb(0, 255, 0);
height: 10px; height: 10px;
margin: auto; margin: auto;
background: rgb(0, 255, 0);
z-index: -1; z-index: -1;
width: 100%; width: 0%;
transition: width 0.5s; -webkit-transition: all 0s;
transition: all 0s;
}
}
}
}
&.visible, &.active{
visibility: visible;
a{
& > li{
&::after{
background: rgb(0, 255, 0);
width: 0%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
}
&:hover{
& > li{
&::after{
background: rgb(0, 255, 0);
width: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
} }
} }
} }
} }
} }
// fleche
& > ul:nth-child(1) { & > ul:nth-child(1) {
& > li:nth-child(1){ & > li:nth-child(1){
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
position: relative; position: relative;
margin-right: 60px; margin-right: 60px;
@@ -60,56 +115,20 @@ header{
background-image: url(../images/fleche2.svg); background-image: url(../images/fleche2.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
// background-size: 10px;
position: absolute; position: absolute;
right: -25px; right: -25px;
-webkit-transition: all 0.5s;
transition: all 0.5s; transition: all 0.5s;
} }
&.hover{ &.hover{
&:after{ &:after{
-webkit-transform: rotate(180deg);
transform: rotate(180deg); transform: rotate(180deg);
-webkit-transition: all 0.5s;
transition: all 0.5s; transition: all 0.5s;
} }
} }
} }
} }
} }
ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
li{
height: 40px;
margin-right: 50px;
align-items: center;
display: flex;
&:last-child{
margin-right: 0px!important;
}
}
}
ul.tags{
display: none;
}
ul.visible, ul.active{
border-left: 2px solid black;
border-bottom: 2px solid black;
background: white;
display: flex;
position: absolute;
top: 40px;
right: 0px;
width: auto;
z-index: 999;
a{
display: flex;
width: auto;
height: 50px;
padding: 0 20px;
li{
margin: auto;
}
}
}
} }
@@ -5,8 +5,12 @@
height: 40px; height: 40px;
top: 0; top: 0;
padding: 0 20px; padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
justify-content: space-between; -webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: white; background-color: white;
border-bottom: 2px solid rgb(0,0,0); border-bottom: 2px solid rgb(0,0,0);
z-index: 999; z-index: 999;
@@ -27,6 +31,7 @@
height: 10px; height: 10px;
margin: auto; margin: auto;
z-index: -1; z-index: -1;
-webkit-transition: width 0.5s;
transition: width 0.5s; transition: width 0.5s;
width: 0%; width: 0%;
} }
@@ -41,6 +46,7 @@
margin: auto; margin: auto;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
-webkit-transition: width 0.5s;
transition: width 0.5s; transition: width 0.5s;
} }
} }
@@ -49,6 +55,8 @@
} }
& > ul:nth-child(1) { & > ul:nth-child(1) {
& > li:nth-child(1){ & > li:nth-child(1){
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
position: relative; position: relative;
margin-right: 35px; margin-right: 35px;
@@ -67,11 +75,14 @@
// background-size: 10px; // background-size: 10px;
position: absolute; position: absolute;
right: -25px; right: -25px;
-webkit-transition: all 0.5s;
transition: all 0.5s; transition: all 0.5s;
} }
&.hover{ &.hover{
&:after{ &:after{
transform: rotate(180deg); -webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 0.5s;
transition: all 0.5s; transition: all 0.5s;
} }
} }
@@ -79,13 +90,22 @@
} }
} }
ul{ ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
justify-content: flex-end; flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
li{ li{
height: 40px; height: 40px;
margin-right: 20px; margin-right: 20px;
align-items: center; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
&:last-child{ &:last-child{
margin-right: 0px!important; margin-right: 0px!important;
@@ -106,6 +126,8 @@
width: auto; width: auto;
z-index: 999; z-index: 999;
a{ a{
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
width: auto; width: auto;
height: 40px; height: 40px;
@@ -139,9 +161,11 @@
padding-bottom: 0px!important; padding-bottom: 0px!important;
} }
.card-image:hover{ .card-image:hover{
-webkit-transition: all 0.6s;
transition: all 0.6s; transition: all 0.6s;
background-color: rgb(0, 255, 0); background-color: rgb(0, 255, 0);
img{ img{
-webkit-transition: all .6s;
transition: all .6s; transition: all .6s;
mix-blend-mode: multiply; mix-blend-mode: multiply;
opacity: .95; opacity: .95;
@@ -150,6 +174,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
opacity: 1; opacity: 1;
-webkit-transition: opacity 1s, top 0s;
transition: opacity 1s, top 0s; transition: opacity 1s, top 0s;
} }
} }
@@ -159,8 +184,10 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
opacity: 0; opacity: 0;
-webkit-transition: all 1s;
transition: all 1s; transition: all 1s;
transform: translate(-50% , -50%); -webkit-transform: translate(-50% , -50%);
transform: translate(-50% , -50%);
} }
} }
} }
@@ -197,8 +224,11 @@
bottom: 0; bottom: 0;
border-top: 2px solid black; border-top: 2px solid black;
span{ span{
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: auto 0; margin: auto 0;
padding-bottom: 10px; padding-bottom: 10px;
a{ a{
+21 -5
View File
@@ -3,13 +3,19 @@
//home //home
& > #items{ & > #items{
& > .item{ & > .item{
justify-content: space-between!important; -webkit-box-pack: justify!important;
-ms-flex-pack: justify!important;
justify-content: space-between!important;
} }
} }
.item{ .item{
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
justify-content: space-around; flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
.card{ .card{
position: relative; position: relative;
width: calc((100% / 3) - 3.5px); width: calc((100% / 3) - 3.5px);
@@ -19,9 +25,11 @@
margin: 0 5px; margin: 0 5px;
} }
.card-image:hover{ .card-image:hover{
-webkit-transition: all 0.6s;
transition: all 0.6s; transition: all 0.6s;
background-color: rgb(0, 255, 0); background-color: rgb(0, 255, 0);
img{ img{
-webkit-transition: all .6s;
transition: all .6s; transition: all .6s;
mix-blend-mode: multiply; mix-blend-mode: multiply;
opacity: .95; opacity: .95;
@@ -30,6 +38,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
opacity: 1; opacity: 1;
-webkit-transition: all 1s;
transition: all 1s; transition: all 1s;
} }
} }
@@ -39,8 +48,10 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
opacity: 0; opacity: 0;
-webkit-transition: all 1s;
transition: all 1s; transition: all 1s;
transform: translate(-50% , -50%); -webkit-transform: translate(-50% , -50%);
transform: translate(-50% , -50%);
text-align: center; text-align: center;
} }
} }
@@ -48,6 +59,8 @@
//pageprojet //pageprojet
.content-item{ .content-item{
.e-content{ .e-content{
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
height: 100%; height: 100%;
} }
@@ -79,8 +92,11 @@
bottom: 0; bottom: 0;
border-top: 2px solid black; border-top: 2px solid black;
span{ span{
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: auto 0; margin: auto 0;
padding-bottom: 10px; padding-bottom: 10px;
a{ a{
@@ -88,6 +88,7 @@ p{
a{ a{
position: relative; position: relative;
&::after{ &::after{
-webkit-transition: width 0.5s;
transition: width 0.5s; transition: width 0.5s;
content: " "; content: " ";
background: rgb(0, 255, 0); background: rgb(0, 255, 0);
@@ -102,6 +103,7 @@ p{
} }
a:hover{ a:hover{
&::after{ &::after{
-webkit-transition: width 0.5s;
transition: width 0.5s; transition: width 0.5s;
width: 100%; width: 100%;
} }