import from la bonne adresse and first refactoring for ouidade.com
This commit is contained in:
Bachir Soussi Chiadmi
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,491 @@
|
||||
@import '../bower_components/foundation/scss/normalize.scss';
|
||||
|
||||
@import "_settings.scss";
|
||||
@import '../bower_components/foundation/scss/foundation.scss';
|
||||
@import '../bower_components/foundation/scss/foundation/components/_global.scss';
|
||||
@import '../bower_components/foundation/scss/foundation/components/_grid.scss';
|
||||
|
||||
|
||||
$column-gutter: rem-calc(15);
|
||||
|
||||
$maincolor: #5b2d87;
|
||||
|
||||
$font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
|
||||
@mixin fontbold{
|
||||
// TODO : media query
|
||||
font: $font; font-size:0.87em; font-weight:bold;
|
||||
}
|
||||
@mixin fontnormal{
|
||||
// TODO : media query
|
||||
font: $font; font-size:0.8em; font-weight:normal;
|
||||
}
|
||||
|
||||
body{font-family: $font; letter-spacing: 1px;}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{font-family: $font;}
|
||||
a, a:hover{color:inherit;}
|
||||
ul,li{padding:0; margin:0; list-style: none;}
|
||||
|
||||
// @media $large-up {
|
||||
// .row.fullwidth{width:1200px;}
|
||||
// }
|
||||
|
||||
#container{
|
||||
display: block; position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium-up}{
|
||||
.row{width:41rem;}
|
||||
}
|
||||
|
||||
@media #{$large-up}{
|
||||
.row{width:62rem;}
|
||||
}
|
||||
|
||||
@media #{$xlarge-up}{
|
||||
.row{width:83rem;max-width:83rem;}
|
||||
}
|
||||
|
||||
// @media #{$xxlarge-up}{
|
||||
// .row{width:125rem;max-width:125rem;}
|
||||
// }
|
||||
|
||||
/*
|
||||
_ _ _
|
||||
| | | | | |
|
||||
| |__| | ___ __ _ __| | ___ _ __
|
||||
| __ |/ _ \/ _` |/ _` |/ _ \ '__|
|
||||
| | | | __/ (_| | (_| | __/ |
|
||||
|_| |_|\___|\__,_|\__,_|\___|_|
|
||||
*/
|
||||
$headerborderH: 0.3em;
|
||||
$headerpaddingtopH:0.9em;
|
||||
$logoH: 9.3em;
|
||||
$logo_mt:0.3em;
|
||||
$logo_mb:0.5em;
|
||||
$titleareaH: $logoH+$logo_mb+$logo_mt;
|
||||
$titleReducedFactor:0.7555;
|
||||
$titleReducedFactorSmall:0.5;
|
||||
$centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
|
||||
$footerheight: 5em;
|
||||
$centerpaddingbottom:$footerheight+1em;
|
||||
|
||||
header#top-bar{
|
||||
position: fixed; top:0;
|
||||
width:100%;
|
||||
// TODO: flou sous le haeder
|
||||
z-index: 9;
|
||||
|
||||
&:before{
|
||||
content:"";
|
||||
background: transparent!important;
|
||||
border-top: $headerborderH solid $maincolor;
|
||||
display: block;
|
||||
padding-bottom: $headerpaddingtopH;
|
||||
}
|
||||
|
||||
>.bg{
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
>.row{
|
||||
position:relative; display:block;
|
||||
}
|
||||
}
|
||||
|
||||
#title-area{
|
||||
// overflow: hidden;
|
||||
position:relative;
|
||||
height:$titleareaH;
|
||||
transition: height 0.4s ease-in-out;
|
||||
h1{
|
||||
font-size: 1em; margin: 0;
|
||||
height:100%;
|
||||
min-height:$titleareaH*0.8;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
a{display: block;
|
||||
// height:100%;
|
||||
height:$logoH;
|
||||
margin:$logo_mt 0 $logo_mb;
|
||||
// height:$titleareaH;
|
||||
background: transparent url("../images/logo.png") no-repeat center center;
|
||||
background-size: contain;}
|
||||
}
|
||||
h1 span, h2{
|
||||
position:absolute; margin-top:-3000px; height:0;
|
||||
}
|
||||
}
|
||||
|
||||
&.reduced{
|
||||
#title-area{
|
||||
height:$titleareaH*$titleReducedFactor;
|
||||
// @media #{$medium-up}{
|
||||
// height:$titleareaH*$titleReducedFactorSmall;
|
||||
// }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2{
|
||||
text-align: center;
|
||||
a{
|
||||
color: #000;
|
||||
}}
|
||||
|
||||
.nav{
|
||||
padding:0 0.7em;
|
||||
position:relative;
|
||||
height:100%;
|
||||
ul{padding: 0; margin: 0;}
|
||||
li{list-style: none;}
|
||||
// @include breakpoint(medium) {
|
||||
@media screen and (min-width:$small-breakpoint) {
|
||||
.wrapper{padding-top: $titleareaH/2-.5em;}
|
||||
}
|
||||
}
|
||||
|
||||
#left-nav{
|
||||
// margin-left: -0.1rem;
|
||||
line-height:0.5;
|
||||
a{@include fontbold;}
|
||||
a:hover{@include fontbold; text-decoration: underline;}
|
||||
}
|
||||
#right-nav{
|
||||
// margin-right: -0.1rem;
|
||||
text-align: right;
|
||||
|
||||
h4{
|
||||
@include fontbold; margin:0; line-height: 1.9;
|
||||
a:hover{text-decoration: underline;}
|
||||
}
|
||||
ul{background-color: transparent;}
|
||||
li{
|
||||
line-height: 1;
|
||||
// &:not(.active){
|
||||
overflow: hidden; height:0.01px; transition: height 0.3s ease-in;
|
||||
// }
|
||||
a{
|
||||
display:block;
|
||||
@include fontnormal;
|
||||
}
|
||||
// &.active span{
|
||||
// display:inline-block;
|
||||
// position:relative;
|
||||
// &:after{
|
||||
// content: ""; height:0;
|
||||
// display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
// border-top:0.5em solid $maincolor;}
|
||||
// }
|
||||
}
|
||||
@media #{$medium-up}{
|
||||
&:hover{
|
||||
li{
|
||||
height:1.1em; transition: height 0.5s ease-out;
|
||||
&:hover span{
|
||||
// border-bottom: 1px solid #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _
|
||||
/ ____| | |
|
||||
| | ___ _ __ | |_ ___ _ __
|
||||
| | / _ \ '_ \| __/ _ \ '__|
|
||||
| |___| __/ | | | || __/ |
|
||||
\_____\___|_| |_|\__\___|_|
|
||||
*/
|
||||
div#center{
|
||||
padding-top:$centerpaddingtop;
|
||||
padding-bottom: $centerpaddingbottom;
|
||||
.columns{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p{
|
||||
line-height:1.5;
|
||||
// display:inline-block;
|
||||
position:relative;
|
||||
@include fontnormal;
|
||||
span.stab{
|
||||
display:inline-block; position:relative;
|
||||
font-weight:bold;
|
||||
// &:after{
|
||||
// content: ""; height:0;
|
||||
// display: block; margin-top:-1em; //margin-bottom:.9em;
|
||||
// border-top:0.5em solid $maincolor;
|
||||
// // transition:border-color 0.3s ease-in;}
|
||||
// }
|
||||
}
|
||||
a{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* LIST PROJET
|
||||
*/
|
||||
.projet-block{
|
||||
padding:0.7em;
|
||||
text-align: left;
|
||||
|
||||
a{display: block;}
|
||||
|
||||
header{
|
||||
position:relative;
|
||||
// margin-top:0;padding-top:0;
|
||||
margin-top: -3em; padding-top: 3.5em; padding-bottom: 0.7em;
|
||||
transition:background-color 0.3s ease-in;}
|
||||
|
||||
header>*{
|
||||
font-family: $font; text-align: left;
|
||||
padding:0; margin:0;}
|
||||
h1{
|
||||
// font-size: 1em; font-weight: bold;
|
||||
@include fontbold;
|
||||
color: $maincolor;
|
||||
margin:0; line-height: 1; height:auto;
|
||||
display:inline-block; position:relative;
|
||||
// &:after{
|
||||
// content: ""; height:0;
|
||||
// display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
// // border-top:0.5em solid $maincolor;
|
||||
// transition:border-color 0.3s ease-in;}
|
||||
}
|
||||
h2{@include fontnormal; margin:-0.4em 0 0; line-height: 1;}
|
||||
|
||||
&.projet-block-text{
|
||||
text-align: left;
|
||||
h1{margin-bottom: 0.3em;}
|
||||
h2{
|
||||
// font-weight:bold;
|
||||
@include fontbold;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
// header{
|
||||
// background-color: rgba($maincolor, 0.7); transition-timing-function: ease-out;
|
||||
// h1:after{border-top:0.5em solid #FFF;transition-timing-function: ease-out;}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* PAGE PROJET
|
||||
*/
|
||||
.projet{
|
||||
.row{margin:0;}
|
||||
h1{
|
||||
@include fontbold;
|
||||
margin:0; padding:0 0.7em; line-height: 1;
|
||||
display: inline-block;
|
||||
// &:after{
|
||||
// content: "";
|
||||
// display: block; margin-top:-.7em; margin-bottom:.7em;
|
||||
// border-top:0.5em solid $maincolor;
|
||||
// transition:border-color 0.3s ease-in;}
|
||||
}
|
||||
h2{@include fontnormal; margin:-0.2em 0 0.7em; line-height: 1; padding:0 0.7em;}
|
||||
// .block{
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
p{padding:0 0.7em 0.7em; margin:0;}
|
||||
|
||||
#images{
|
||||
// .row{margin:0;}
|
||||
.block{padding:0.7em;}
|
||||
}
|
||||
|
||||
img{
|
||||
width:100%; max-width:100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.default{
|
||||
>*{padding-left:0.7em;padding-right:0.7em;}
|
||||
}
|
||||
|
||||
body.projet{
|
||||
nav.categories{
|
||||
ul.tags li a:hover span{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Catégories
|
||||
*/
|
||||
|
||||
nav.categories{
|
||||
margin: 1em 0;
|
||||
ul.tags{
|
||||
margin:0; padding:0; text-align:center;
|
||||
li{
|
||||
list-style: none; display:inline-block;
|
||||
margin:0 1em;
|
||||
a{
|
||||
display:block;
|
||||
// &:hover{text-decoration: underline;}
|
||||
}
|
||||
span{@include fontnormal;}
|
||||
&.active span{
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
// font-weight: bold;
|
||||
@include fontbold;
|
||||
border-bottom: 1px solid #000;
|
||||
line-height: 0.2;
|
||||
// &:after{
|
||||
// content: ""; height:0;
|
||||
// display: block; margin-top:-0.2em; margin-bottom:0.2em;
|
||||
// border-top:0.5em solid $maincolor;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#diaporama{
|
||||
position:relative;
|
||||
height:20vw;
|
||||
margin:0 0 1.5em;
|
||||
>*{
|
||||
position:absolute; top:0; left:0;
|
||||
height:100%; width:100%;
|
||||
text-align: center;
|
||||
opacity:0;
|
||||
transition: opacity 0.2s ease-in;
|
||||
&.visible{opacity:1;}
|
||||
|
||||
img{height:100%;}
|
||||
}
|
||||
}
|
||||
|
||||
.client-block{
|
||||
margin:0 0 1em;
|
||||
padding:0.7em;
|
||||
h3{
|
||||
@include fontbold;
|
||||
line-height:0.6; display:inline-block; position:relative;
|
||||
margin:0; padding:0;
|
||||
// $maincolor overline
|
||||
// &:after{
|
||||
// content: "";
|
||||
// display: block; margin-top:-.5em; margin-bottom:.5em;
|
||||
// border-top:0.5em solid $maincolor;
|
||||
// transition:border-color 0.3s ease-in;
|
||||
// }
|
||||
}
|
||||
h4{
|
||||
margin:0;
|
||||
@include fontnormal;
|
||||
a:hover{text-decoration: underline;}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
_ _ _
|
||||
(_) | | | |
|
||||
_ __ ___ ___ _ __ ___ _ __ ___ ___ _____ | | __ _ _ _ ___ _ _| |_
|
||||
| '__/ _ \/ __| '_ \ / _ \| '_ \/ __| \ \ / / _ \ | |/ _` | | | |/ _ \| | | | __|
|
||||
| | | __/\__ \ |_) | (_) | | | \__ \ |\ V / __/ | | (_| | |_| | (_) | |_| | |_
|
||||
|_| \___||___/ .__/ \___/|_| |_|___/_| \_/ \___| |_|\__,_|\__, |\___/ \__,_|\__|
|
||||
| | __/ |
|
||||
|_| |___/
|
||||
*/
|
||||
@media #{$small-only}{
|
||||
header#top-bar{
|
||||
&:before{
|
||||
padding-bottom: $headerpaddingtopH*0.5;
|
||||
}
|
||||
|
||||
#title-area{
|
||||
height:$titleareaH -3.1em;
|
||||
// padding-top: $headerpaddingtopH;
|
||||
h1{
|
||||
height:100%;
|
||||
min-height:($titleareaH - 3.1em)*0.8;
|
||||
a{display: block;
|
||||
height:$logoH - 3em;
|
||||
// height:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reduced{
|
||||
#title-area{
|
||||
height:($titleareaH - 3.1em)*$titleReducedFactor;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.nav{
|
||||
position:absolute;
|
||||
top:$headerborderH+$headerpaddingtopH*0.5;
|
||||
height:auto;
|
||||
}
|
||||
#left-nav{left:0;}
|
||||
#right-nav{right:0;}
|
||||
}
|
||||
|
||||
div#center{
|
||||
padding-top:$centerpaddingtop - 1.1em;
|
||||
padding-bottom: $centerpaddingbottom;
|
||||
}
|
||||
|
||||
body.categories{
|
||||
a.projet-img{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
__ _
|
||||
/ _| | |
|
||||
| |_ ___ ___ | |_ ___ _ __
|
||||
| _/ _ \ / _ \| __/ _ \ '__|
|
||||
| || (_) | (_) | || __/ |
|
||||
|_| \___/ \___/ \__\___|_|
|
||||
*/
|
||||
footer#bottom-bar{
|
||||
position:absolute; bottom:0;
|
||||
width:100%; height:$footerheight;
|
||||
background-color: $maincolor;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding:1em 0;
|
||||
// margin: 5vh 0 0;
|
||||
h1{
|
||||
@include fontbold; height:auto; display:inline-block; position:relative; margin:0;
|
||||
color: inherit;
|
||||
a{
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
// &:after{
|
||||
// content: ""; height:0;
|
||||
// display: block; margin-top:-.9em; margin-bottom:1em;
|
||||
// border-top:0.5em solid #fff;
|
||||
// transition:border-color 0.3s ease-in;}
|
||||
}
|
||||
address{
|
||||
// font-size: 1em; font-weight: normal;
|
||||
@include fontnormal;
|
||||
margin:-0.7em 0 0; line-height: 1.1; font-style: normal;
|
||||
a{text-decoration: underline;}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user