autoprefix

This commit is contained in:
2019-02-08 15:34:23 +01:00
parent bf69c0fe46
commit 3987fa5281
10 changed files with 378 additions and 200 deletions
File diff suppressed because one or more lines are too long
@@ -1,11 +1,26 @@
@-webkit-keyframes rotateOpen{
0% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@keyframes rotateOpen{ @keyframes rotateOpen{
0% {transform: rotate(-15deg);} 0% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
100% {transform: rotate(0deg);} 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@-webkit-keyframes rotateClose{
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
100% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
} }
@keyframes rotateClose{ @keyframes rotateClose{
0% { transform: rotate(0deg);} 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
100% {transform: rotate(-15deg);} 100% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
}
@-webkit-keyframes translateOpen{
0%{margin-top: 0px;}
100%{margin-top: -155px;}
} }
@keyframes translateOpen{ @keyframes translateOpen{
@@ -13,14 +28,29 @@
100%{margin-top: -155px;} 100%{margin-top: -155px;}
} }
@-webkit-keyframes translateClose{
0%{margin-top: -155px;}
100%{margin-top: 0px;}
}
@keyframes translateClose{ @keyframes translateClose{
0%{margin-top: -155px;} 0%{margin-top: -155px;}
100%{margin-top: 0px;} 100%{margin-top: 0px;}
} }
@-webkit-keyframes translateOpensvg{
0%{margin-top: 50px;}
100%{margin-top: 180px;}
}
@keyframes translateOpensvg{ @keyframes translateOpensvg{
0%{margin-top: 50px;} 0%{margin-top: 50px;}
100%{margin-top: 180px;} 100%{margin-top: 180px;}
}
@-webkit-keyframes translateClosesvg{
0%{margin-top: 180px;}
100%{margin-top: 50px;}
} }
@keyframes translateClosesvg{ @keyframes translateClosesvg{
@@ -28,56 +58,98 @@
100%{margin-top: 50px;} 100%{margin-top: 50px;}
} }
@keyframes visible{ @-webkit-keyframes visible{
0%{ 0%{
opacity: 0; opacity: 0;
transform: translateY(50px); -webkit-transform: translateY(50px);
transform: translateY(50px);
} }
100%{ 100%{
opacity: 1; opacity: 1;
transform: translateY(0px); -webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes visible{
0%{
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes hidden{
0%{
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100%{
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
} }
} }
@keyframes hidden{ @keyframes hidden{
0%{ 0%{
opacity: 1; opacity: 1;
transform: translateY(0px); -webkit-transform: translateY(0px);
transform: translateY(0px);
} }
100%{ 100%{
opacity: 0; opacity: 0;
transform: translateY(50px); -webkit-transform: translateY(50px);
transform: translateY(50px);
} }
} }
.why_lsdo{ .why_lsdo{
&.open{ &.open{
h3{ h3{
animation: rotateOpen 1s, translateOpen 1s; -webkit-animation: rotateOpen 1s, translateOpen 1s;
animation-fill-mode: forwards; animation: rotateOpen 1s, translateOpen 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
} }
section{ section{
animation: visible 1s; -webkit-animation: visible 1s;
animation-fill-mode: forwards; animation: visible 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
} }
svg{ svg{
animation: rotateOpen 1s, translateOpensvg 1s; -webkit-animation: rotateOpen 1s, translateOpensvg 1s;
animation-fill-mode: forwards; animation: rotateOpen 1s, translateOpensvg 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
} }
} }
&.close{ &.close{
h3{ h3{
animation: rotateClose 1s, translateClose 1s; -webkit-animation: rotateClose 1s, translateClose 1s;
animation-fill-mode: forwards; animation: rotateClose 1s, translateClose 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
} }
section{ section{
animation: hidden 1s; -webkit-animation: hidden 1s;
animation-fill-mode: forwards; animation: hidden 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
} }
svg{ svg{
animation: rotateClose 1s, translateClosesvg 1s; -webkit-animation: rotateClose 1s, translateClosesvg 1s;
animation-fill-mode: forwards; animation: rotateClose 1s, translateClosesvg 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
} }
} }
@@ -1,4 +1,6 @@
.owl-carousel{ .owl-carousel{
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important; display: flex!important;
margin: 0px 50px 0 50px; margin: 0px 50px 0 50px;
width: auto!important; width: auto!important;
@@ -26,7 +28,8 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
top:35%; top:35%;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
transform: translateY(-50%);
button{ button{
width: 35px; width: 35px;
height: 35px; height: 35px;
@@ -2,8 +2,12 @@ footer{
margin: 0 50px 0px 50px; margin: 0 50px 0px 50px;
padding-bottom: 20px; padding-bottom: 20px;
ul{ ul{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
justify-content: flex-end; -webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%; width: 100%;
li{ li{
margin-left: 20px; margin-left: 20px;
@@ -22,6 +26,8 @@ footer{
bottom: 0; bottom: 0;
width: 100%; width: 100%;
left: 0; left: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
& > div { & > div {
width: 55%; width: 55%;
@@ -3,6 +3,8 @@
top: 0; top: 0;
width: 100%; width: 100%;
left: 0; left: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
& > div { & > div {
width: 55%; width: 55%;
@@ -51,6 +53,7 @@ header{
} }
} }
.title{ .title{
-webkit-transition: background 1s;
transition: background 1s; transition: background 1s;
background: none; background: none;
z-index: 998; z-index: 998;
@@ -74,9 +77,13 @@ header{
margin-top: 0px; margin-top: 0px;
white-space:nowrap; white-space:nowrap;
z-index: 1; z-index: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
align-items: center; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
&::after{ &::after{
right: 0; right: 0;
content: " "; content: " ";
@@ -97,15 +104,21 @@ header{
} }
&.Hc{ &.Hc{
background: white; background: white;
-webkit-transition: background 1s;
transition: background 1s; transition: background 1s;
} }
} }
.logo{ .logo{
margin: 150px 0 50px 0; margin: 150px 0 50px 0;
width: 100%; width: 100%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
justify-content: space-around; -ms-flex-pack: distribute;
align-items: center; justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
& > div{ & > div{
width: calc(100% / 3); width: calc(100% / 3);
min-width: 300px; min-width: 300px;
@@ -131,15 +144,21 @@ header{
} }
} }
.why_lsdo{ .why_lsdo{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
flex-direction: column; -webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative; position: relative;
h3{ h3{
z-index: 1; z-index: 1;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
transform: rotate(-15deg) translateY(0px); -webkit-transform: rotate(-15deg) translateY(0px);
transform: rotate(-15deg) translateY(0px);
} }
section{ section{
position: absolute; position: absolute;
@@ -159,7 +178,8 @@ header{
width: 100px; width: 100px;
height: 20px; height: 20px;
position: absolute; position: absolute;
transform: rotate(-15deg) translateY(50px); -webkit-transform: rotate(-15deg) translateY(50px);
transform: rotate(-15deg) translateY(50px);
} }
} }
} }
@@ -61,7 +61,10 @@
} }
} }
.logo{ .logo{
flex-direction: column-reverse; -webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
& > div{ & > div{
width: 100%; width: 100%;
} }
@@ -83,8 +86,13 @@
#start{ #start{
.section{ .section{
.sous-section{ .sous-section{
flex-direction: column; -webkit-box-orient: vertical;
justify-content: center; -webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
.blocks{ .blocks{
width: 90%; width: 90%;
margin-left: auto; margin-left: auto;
@@ -109,14 +117,18 @@
#contact{ #contact{
.blocks{ .blocks{
&:nth-of-type(1){ &:nth-of-type(1){
align-items: center; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
p{ p{
text-align: center!important; text-align: center!important;
} }
} }
&:nth-of-type(2){ &:nth-of-type(2){
align-items: center; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.content{ .content{
p{ p{
text-align: center!important; text-align: center!important;
@@ -229,7 +241,9 @@
} }
#clients{ #clients{
.images{ .images{
justify-content: center; -webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
img{ img{
margin:10px 10px; margin:10px 10px;
min-width: 70%; min-width: 70%;
@@ -273,7 +287,9 @@
white-space: normal; white-space: normal;
} }
ul{ ul{
justify-content: space-evenly; -webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
li{ li{
margin-left: 0; margin-left: 0;
a{ a{
@@ -1,9 +1,13 @@
@mixin filet{ @mixin filet{
width: 100%; width: 100%;
text-align: center; text-align: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
align-items: center; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
&::after{ &::after{
right: 0; right: 0;
content: " "; content: " ";
@@ -25,9 +29,13 @@
@mixin filet-b{ @mixin filet-b{
width: 100%; width: 100%;
text-align: center; text-align: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
align-items: center; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
&::after{ &::after{
right: 0; right: 0;
content: " "; content: " ";
@@ -49,7 +57,8 @@
@mixin triangle{ @mixin triangle{
position: absolute; position: absolute;
z-index: 1; z-index: 1;
transform: rotate(-135deg); -webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
width: 0; width: 0;
height: 0; height: 0;
top: -70px; top: -70px;
@@ -61,7 +70,8 @@
} }
@mixin rotateH{ @mixin rotateH{
transform: rotate(90deg); -webkit-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute; position: absolute;
top: -8px; top: -8px;
left: -90px; left: -90px;
@@ -78,5 +88,6 @@
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
position: absolute; position: absolute;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%);
} }
@@ -1,5 +1,6 @@
*{ *{
box-sizing : border-box; -webkit-box-sizing : border-box;
box-sizing : border-box;
} }
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -32,9 +32,14 @@ body {
.sous-section { .sous-section {
width: 100%; width: 100%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
justify-content: space-evenly; flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
h3 { h3 {
@include filet; @include filet;
} }
@@ -74,18 +79,31 @@ body {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.txt { .txt {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
justify-content: center; -webkit-box-pack: center;
align-items: center; -ms-flex-pack: center;
flex-direction: column; justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0%; top: 0%;
left: 0; left: 0;
background: transparent; background: transparent;
transform: scale(0.95); -webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, background 0.5s ease; transition: transform 0.5s ease, background 0.5s ease;
transition: transform 0.5s ease, background 0.5s ease, -webkit-transform 0.5s ease;
.content{ .content{
padding: 20px; padding: 20px;
} }
@@ -104,8 +122,12 @@ body {
&:hover { &:hover {
.txt { .txt {
-webkit-transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, background 0.5s ease; transition: transform 0.5s ease, background 0.5s ease;
transform: scale(1); transition: transform 0.5s ease, background 0.5s ease, -webkit-transform 0.5s ease;
-webkit-transform: scale(1);
transform: scale(1);
background: $blue; background: $blue;
p, ul, li, a{ p, ul, li, a{
color: white; color: white;
@@ -123,9 +145,14 @@ body {
.no-gal { .no-gal {
.section_n2 { .section_n2 {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
justify-content: space-evenly; flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
} }
} }
@@ -156,10 +183,17 @@ body {
} }
#clients{ #clients{
.images { .images {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
align-items: center; flex-wrap: wrap;
justify-content: space-evenly; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
img { img {
width: 15%; width: 15%;
min-width: 150px; min-width: 150px;
@@ -184,17 +218,28 @@ body {
#contact { #contact {
background: transparent!important; background: transparent!important;
.blocks{ .blocks{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
flex-direction: column-reverse; -webkit-box-orient: vertical;
justify-content: center; -webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
&:nth-of-type(1){ &:nth-of-type(1){
align-items: flex-end; -webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
p{ p{
text-align: right!important; text-align: right!important;
} }
} }
&:nth-of-type(2){ &:nth-of-type(2){
align-items: flex-start; -webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
} }
.title{ .title{
display: none; display: none;
@@ -1,53 +1,53 @@
body, body,
html { html {
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
} }
h1, h1,
h2, h2,
h3 { h3 {
font-family: $Regular-L; font-family: $Regular-L;
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1, h1,
h2 { h2 {
letter-spacing: $letterI1; letter-spacing: $letterI1;
} }
h1 { h1 {
font-size: $fontH1;
line-height: $lineH96;
a {
color: $blue!important;
font-family: $Regular-L;
font-size: $fontH1; font-size: $fontH1;
line-height: $lineH96; line-height: $lineH96;
}
a {
color: $blue!important;
font-family: $Regular-L;
font-size: $fontH1;
line-height: $lineH96;
}
} }
h2 { h2 {
font-size: $fonth2; font-size: $fonth2;
line-height: $lineH30; line-height: $lineH30;
color: $blue!important; color: $blue!important;
background: white; background: white;
} }
h3 { h3 {
letter-spacing: 0.2rem; letter-spacing: 0.2rem;
font-size: $font32; font-size: $font32;
} }
h5 { h5 {
font-family: $Roboto-B; font-family: $Roboto-B;
font-weight: normal; font-weight: normal;
font-size: $fontH5; font-size: $fontH5;
margin: 10px 0; margin: 10px 0;
} }
a, a,
@@ -55,164 +55,164 @@ del,
li, li,
p, p,
ul { ul {
font-family: $Roboto-R; font-family: $Roboto-R;
font-weight: normal; font-weight: normal;
font-size: $fontp; font-size: $fontp;
line-height: 1.5rem; line-height: 1.5rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
em { em {
font-family: $Roboto-I; font-family: $Roboto-I;
font-weight: normal; font-weight: normal;
} }
strong { strong {
font-family: $Roboto-B; font-family: $Roboto-B;
font-weight: normal; font-weight: normal;
} }
header { header {
nav { nav {
ul { ul {
li { li {
a { a {
font-family: $Regular-L; font-family: $Regular-L;
font-size: $fontnav; font-size: $fontnav;
line-height: $lineH40; line-height: $lineH40;
letter-spacing: $letterI1; letter-spacing: $letterI1;
color: $blue!important; color: $blue!important;
}
}
} }
}
}
}
.logo {
#user {
p {
font-size: 1.8rem;
font-family: $Regular-L;
line-height: 2.5rem;
letter-spacing: $letterI1;
}
} }
.logo { .why_lsdo {
#user { h3 {
p { font-size: $h3;
font-size: 1.8rem; letter-spacing: $letterI1;
font-family: $Regular-L;
line-height: 2.5rem;
letter-spacing: $letterI1;
}
}
.why_lsdo { &:hover {
h3 { text-decoration: underline;
font-size: $h3;
letter-spacing: $letterI1;
&:hover {
text-decoration: underline;
}
}
} }
}
} }
}
} }
#home { #home {
p { p {
font-family: $Roboto-L; font-family: $Roboto-L;
text-align: center; text-align: center;
font-size: $fontPi; font-size: $fontPi;
line-height: $lineH24; line-height: $lineH24;
} }
} }
.grav-youtube { .grav-youtube {
margin-top: 20px; margin-top: 20px;
} }
.section-content { .section-content {
h3 { h3 {
font-family: $Regular-L; font-family: $Regular-L;
text-align: center; text-align: center;
color: black!important; color: black!important;
text-transform: inherit; text-transform: inherit;
letter-spacing: 0.1rem!important; letter-spacing: 0.1rem!important;
white-space: nowrap; white-space: nowrap;
} }
} }
.sous-section { .sous-section {
h3 { h3 {
font-family: $Regular-L; font-family: $Regular-L;
text-align: center; text-align: center;
color: $h3-color; color: $h3-color;
background-color: $section; background-color: $section;
white-space: nowrap; white-space: nowrap;
} }
} }
.galerie { .galerie {
p { p {
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.2rem; line-height: 1.2rem;
} }
} }
.item { .item {
h4 { h4 {
font-family: $Roboto-B; font-family: $Roboto-B;
text-transform: none; text-transform: none;
font-size: $h3; font-size: $h3;
text-align: center; text-align: center;
color: $red; color: $red;
letter-spacing: normal!important; letter-spacing: normal!important;
font-weight: normal; font-weight: normal;
} }
} }
.item-etapes { .item-etapes {
h4 { h4 {
font-size: $h3; font-size: $h3;
color: white; color: white;
} }
.txt { .txt {
& > * { & > * {
color: white; color: white;
}
} }
}
} }
#contact { #contact {
p { p {
strong { strong {
font-family: $Regular-L; font-family: $Regular-L;
font-weight: normal; font-weight: normal;
font-size: $h3; font-size: $h3;
letter-spacing: $letterI1; letter-spacing: $letterI1;
color: $blue; color: $blue;
}
} }
}
} }
footer { footer {
h3 { h3 {
margin: 20px auto; margin: 20px auto;
}
section {
margin: auto;
text-align: center;
p:last-child {
padding-bottom: 15px;
} }
}
section { ul {
margin: auto; li {
text-align: center; text-transform: uppercase;
letter-spacing: $letterI1;
p:last-child { a {
padding-bottom: 15px; font-family: $Regular-L;
} font-size: $fontnav;
} color: $blue;
}
ul {
li {
text-transform: uppercase;
letter-spacing: $letterI1;
a {
font-family: $Regular-L;
font-size: $fontnav;
color: $blue;
}
}
} }
}
} }