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

css

Browse Source
This commit is contained in:
kevin
2019-02-04 18:20:04 +01:00
parent a9ece64292
commit cdd86a3845
12 changed files with 353 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/le_style_de_lours_modif/scss/theme/_carousel.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.owl-carousel{
display: flex!important;
margin: 100px 50px 0 50px;
margin: 0px 50px 0 50px;
width: auto!important;
.owl-stage-outer{
height: 500px;
user/themes/le_style_de_lours_modif/scss/theme/_header.scss
+2 -2
View File
@@ -114,7 +114,7 @@ header{
content: " ";
width: 50%;
height: 0px;
border: 1px solid black;
border: 1px solid $blue;
margin-left: 20px;
}
&::before{
@@ -122,7 +122,7 @@ header{
content: " ";
width: 50%;
height: 0px;
border: 1px solid black;
border: 1px solid $blue;
margin-right: 20px;
}
user/themes/le_style_de_lours_modif/scss/theme/_start.scss
+187 -177
View File
@@ -1,7 +1,11 @@
body{
position:relative;
}
.arrow{
width: 0!important;
height: 0;
top: 40px;
top: 35px;
left: 50%;
right: 50%;
border: 50px solid white;
@@ -19,136 +23,44 @@
background-color: $bkg-d!important;
}
body{
position:relative;
padding-bottom: 20px;
}
#start{
&>section:last-child{
margin-bottom: 0!important;
.section{
margin-bottom: 150px;
}
.sous-section{
section{
margin-bottom: 100px;
}
}
section{
position: relative;
margin-top: -10px;
margin-bottom: 100px;
padding-top: 5px;
& > h2, & > h3{
h2{
text-align: center;
z-index: 1;
margin-top: -35px;
display: inline-flex;
width: 100%;
align-items: center;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-right: 20px;
}
}
h3{
width: 100%;
}
}
h2{
z-index: 1;
margin-top: -35px;
display: inline-flex;
width: 100%;
align-items: center;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-right: 20px;
}
}
#home{
width: 40%;
min-width: 700px;
margin: 0 auto 100px auto;
}
#m-tier{
& > div{
background:$section;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
h3{
text-align: center;
}
& > section:nth-of-type(odd){
margin-right: 50px;
}
& > section:nth-of-type(even){
margin-left: 50px;
}
section{
width: 35%;
min-width: 350px;
&:nth-of-type(n+3){
position: relative;
.title{
position: absolute;
z-index: 1;
transform: rotate(-135deg);
width: 0;
height: 0;
top: -65px;
left: -70px;
border: 70px solid #0f265c;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
h3{
transform: rotate(90deg);
position: absolute;
top: -75px;
left: -50px;
}
}
& > .content{
display: none;
}
.images{
height: auto;
position: relative;
.content{
position: absolute;
top: 0;
left: 0;
display: none;
height: 100%;
width: 100%;
background: #0f265c;
p,ul,li{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-55%) translateX(-50%);
color: white;
}
}
&:hover{
.content{
display: block;
}
}
}
}
.content{
p{
text-align: justify;
}
}
.filet{
display: none;
}
}
}
}
#r-f-rences{
h3{
text-align: center;
display: inline-flex;
width: 100%;
align-items: center;
@@ -170,73 +82,171 @@ body{
margin-right: 20px;
}
}
& > div{
background: $section;
& > p{
width: 50%;
text-align: center;
min-width: 600px;
margin: 0px auto 0px auto;
}
.title{
margin-bottom: 50px;
}
section{
&:last-child{
p{
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
img{
margin: 0 20px;
width: 15%;
min-width: 150px;
height: 100%;
}
}
}
}
#recommandations{
}
#clients{
.images{
margin: 0 50px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 50px;
flex-wrap: wrap;
img{
width: 10%;
min-width: 200px;
margin-bottom: 20px;
&:not(:first-child){
margin-left: 20px;
.section-content{
& > h3{
margin: 50px auto;
&::before{
border: 0px!important;
}
&::after{
border: 0px!important;
}
}
& > p{
margin: 20px;
width: 50%;
text-align: center;
min-width: 600px;
margin: 50px auto 100px auto;
}
}
}
#home{
width: 40%;
min-width: 700px;
margin-left: auto;
margin-right: auto;
}
.section:not(#home){
background:$section;
& > .sous-section{
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
& > .no-gal:nth-of-type(odd){
margin-right: 50px;
}
& > .no-gal:nth-of-type(even){
margin-left: 50px;
}
.no-gal:not(#clients){
width: 35%;
min-width: 350px;
&:nth-of-type(n+3){
position: relative;
.title{
position: absolute;
z-index: 1;
transform: rotate(-135deg);
width: 0;
height: 0;
top: -70px;
left: -120px;
border: 70px solid #0f265c;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
h3{
transform: rotate(90deg);
position: absolute;
top: -75px;
left: -50px;
&:before{
margin-right: 7px;
}
&:after{
margin-left: 0px;
}
}
}
& > .content{
display: none;
}
.images{
height: auto;
position: relative;
.content{
position: absolute;
top: 0;
left: 0;
display: none;
height: 100%;
width: 100%;
background: #0f265c;
p,ul,li{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-55%) translateX(-50%);
color: white;
}
}
&:hover{
.content{
display: block;
}
}
}
}
.content{
p{
text-align: justify;
}
}
}
section{
width: 100%;
.title{
margin: 0 50px;
}
}
}
}
#m-tier{
h3{
&::before{
border: 0px!important;
}
&::after{
border: 0px!important;
}
}
}
#r-f-rences{
h3{
margin-bottom: 100px;
}
#clients{
.images{
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
img{
margin: 0 20px;
width: 15%;
min-width: 150px;
height: 100%;
}
}
}
}
}
#contact{
background: transparent!important;
margin-bottom: 0!important;
h2{
background: transparent!important;
}
& > div {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
p{
width: 40%;
&:nth-of-type(1){
text-align: right;
margin-right: 50px;
}
// &:nth-of-type(2){
// text-align: left;
// margin-left: 20px;
// }
p{
width: 40%;
&:nth-of-type(1){
text-align: right;
margin-right: 50px;
}
&:nth-of-type(2){
text-align: left;
}
img{
margin-bottom: 20px;
border-radius: 150px;
user/themes/le_style_de_lours_modif/scss/theme/_typography.scss
+8 -9
View File
@@ -38,6 +38,7 @@ h1{
font-size: $fontH1;
line-height: $lineH96;
a{
color: $blue!important;
font-family: $Regular-L;
font-size: $fontH1;
line-height: $lineH96;
@@ -46,10 +47,9 @@ h1{
h2{
font-size: $fonth2;
line-height: $lineH40;
margin-bottom: -10px;
line-height: $lineH30;
color: $blue!important;
background: white;
}
h3{
@@ -93,11 +93,11 @@ header{
#start{
&> section > div > h3{
margin-top: 120px;
// margin-top: 120px;
}
&> section > div > p{
padding-top: 120px!important;
padding-bottom: 100px;
// padding-top: 120px!important;
// padding-bottom: 100px;
}
section{
@@ -151,20 +151,19 @@ header{
line-height: 1.7rem;
}
.title{
margin: 0 50px;
// margin: 0 50px;
}
h3{
font-family: $Regular-L;
text-align: center;
color: $h3-color;
width: 350px;
margin: auto;
background-color: $section;
}
#travaux_r-alis-s{
.galerie{
p{
font-size: 0.8rem;
font-size: 0.8rem;
line-height: 1.2rem;
}
}
user/themes/le_style_de_lours_modif/scss/theme/_variables.scss
+2
View File
@@ -22,6 +22,8 @@ $fontH1: 4rem;
// interline
$lineH24: 2rem;
$lineH30: 2.5rem;
$lineH32: 3rem;
$lineH40: 4rem;
$lineH96:6rem;