kevin/lours.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

autoprefix

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