big update for home v2
This commit is contained in:
Bachir Soussi Chiadmi
@@ -19,19 +19,24 @@
|
||||
@import "../bower_components/foundation/scss/foundation/components/inline-lists";
|
||||
@import "../bower_components/foundation/scss/foundation/components/buttons";
|
||||
@import "../bower_components/foundation/scss/foundation/components/button-groups";
|
||||
// @import "../bower_components/foundation/scss/foundation/components/grid";
|
||||
@import "../bower_components/foundation/scss/foundation/components/grid";
|
||||
// @import "../bower_components/foundation/scss/foundation/components/top-bar";
|
||||
// @import "../bower_components/foundation/scss/foundation/components/block-grid";
|
||||
|
||||
|
||||
@import "gui.scss";
|
||||
|
||||
@import "colors.scss";
|
||||
@import "fonts.scss";
|
||||
@import "layout.scss";
|
||||
@import "../fonts/icon/foundation-icons.css";
|
||||
|
||||
#root{
|
||||
// background: #fff url('../img/beta-2.png') no-repeat 0px 0px;
|
||||
body.home-v2 &{
|
||||
background-color: $creme;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin shadowBtn(){
|
||||
@@ -490,7 +495,14 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
__ _ ___ __ _
|
||||
__ __/ /_(_) (_) /_(_)__ _____
|
||||
/ / / / __/ / / / __/ / _ \/ ___/
|
||||
/ /_/ / /_/ / / / /_/ / __(__ )
|
||||
\__,_/\__/_/_/_/\__/_/\___/____/
|
||||
|
||||
*/
|
||||
#utilities{
|
||||
margin-top:$headerouterheight;
|
||||
.not-logged-in &{ overflow:hidden; }
|
||||
@@ -502,6 +514,19 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
/*
|
||||
_
|
||||
____ ___ ____ _(_)___
|
||||
/ __ `__ \/ __ `/ / __ \
|
||||
/ / / / / / /_/ / / / / /
|
||||
/_/ /_/ /_/\__,_/_/_/ /_/
|
||||
*/
|
||||
#main{
|
||||
body.home-v2 &{
|
||||
padding-top:$headerouterheight;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
__ _ __ ___ __ __ __
|
||||
/ /_ (_)___ _/ /_ / (_)___ _/ /_ / /____ ____/ /
|
||||
@@ -1079,7 +1104,6 @@ $cardfull_h:610px;
|
||||
width:$w; height:$h;
|
||||
@include inlineblock(); position:relative; margin:7px;
|
||||
|
||||
//z-index:10; // pourquoi ce z-index ?
|
||||
@include rounded(5px); background-color: #FFF;
|
||||
@include drop-shadow(0, 0, 5px, 0.2);
|
||||
@include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
|
||||
@@ -1634,8 +1658,6 @@ body.print-node-materiau{
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -1684,9 +1706,6 @@ body.print-node-materiau{
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
@import "misc.scss";
|
||||
|
||||
|
||||
/*
|
||||
___ __ ____________ __________ __ _______ __ __________________
|
||||
/ | / / / /_ __/ __ \/ ____/ __ \/ |/ / __ \/ / / ____/_ __/ ____/
|
||||
@@ -2753,51 +2772,172 @@ body.page-node-11187{
|
||||
}
|
||||
}
|
||||
|
||||
// ------ HOME PAGE ---------
|
||||
#homev2{
|
||||
padding: 40px 40px;
|
||||
h2{font-size: 3.8em; font-weight: 500;}
|
||||
/*
|
||||
__ __ _ _____
|
||||
/ / / /___ ____ ___ ___ | | / /__ \
|
||||
/ /_/ / __ \/ __ `__ \/ _ \ | | / /__/ /
|
||||
/ __ / /_/ / / / / / / __/ | |/ // __/
|
||||
/_/ /_/\____/_/ /_/ /_/\___/ |___//____/
|
||||
*/
|
||||
|
||||
body.home-v2{
|
||||
#center{
|
||||
background-color: transparent;
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
#home-v2{
|
||||
// padding: 40px 40px;
|
||||
h2{font-size: 2.1em; font-weight: 300;}
|
||||
a{color: #000};
|
||||
ul{margin-left: 0px;}
|
||||
li{padding:0px;}
|
||||
.menu {
|
||||
margin-left: 0px;
|
||||
li{display: inline-block;
|
||||
a{
|
||||
background-color: #4d4d4d;
|
||||
|
||||
.panel-separator{clear:both;}
|
||||
>.panel-panel>div>.panel-pane {
|
||||
// padding: 10px 15px;
|
||||
|
||||
|
||||
|
||||
&.pane-node{
|
||||
@include rounded(5px);
|
||||
overflow:hidden;
|
||||
.pane-content, .node{
|
||||
position:relative; width:100%; height:100%; overflow:hidden;
|
||||
}
|
||||
|
||||
.links a{
|
||||
background-color: rgba(255,255,255, 0.7);
|
||||
@include rounded(5px);
|
||||
padding: 10px 10px;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
&:hover{ background-color: #FFF; color:#4d4d4d;}
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pane-node {
|
||||
height:450px;
|
||||
margin-top: 40px;
|
||||
font-size: 1.25em;
|
||||
@include rounded(5px);
|
||||
padding: 20px 30px;
|
||||
.links a{
|
||||
background-color: rgba(255,255,255, 0.7);
|
||||
@include rounded(5px);
|
||||
padding: 15px;
|
||||
|
||||
&.intro-video{
|
||||
height:auto;
|
||||
background-color: #f7f8f2;
|
||||
margin-top:0; padding-top:0;
|
||||
.field-name-field-emvideo{
|
||||
.embedded-video{
|
||||
margin:0 auto;
|
||||
@media #{$small-only}{
|
||||
width:320px; height:180px;
|
||||
}
|
||||
@media #{$medium-only}{
|
||||
width:640px; height:360px;
|
||||
}
|
||||
@media #{$large-only}{
|
||||
width:800px; height:450px;
|
||||
}
|
||||
@media #{$xlarge-up}{
|
||||
width:1024px; height:576px;
|
||||
}
|
||||
.player, iframe{
|
||||
width:100%; height:100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.field-name-title-field{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.field-name-body{
|
||||
// @include grid-row();
|
||||
margin-top:1em;
|
||||
text-align: center;
|
||||
p{
|
||||
// @include grid-column(6);
|
||||
text-align: left;
|
||||
@include inlineblock();
|
||||
width:35%; margin-left:2%;
|
||||
font-size:0.756em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.content{
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.pane-menu-menu-home-v2{
|
||||
margin:2em 0;
|
||||
ul.menu{
|
||||
margin: 0px; text-align: center;
|
||||
}
|
||||
li{
|
||||
margin:0 1em 0 0; padding:0px; list-style: none;
|
||||
@include inlineblock();
|
||||
a{
|
||||
background-color: #4d4d4d;
|
||||
@include rounded(5px);
|
||||
padding: 5px 12px 7px;
|
||||
color: $creme;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition:opacity,background-color 0.2s ease-out;
|
||||
}
|
||||
|
||||
&:nth-child(1){
|
||||
// a{color:$orange;}
|
||||
&:hover a{background-color: $orange; color:#4d4d4d;}
|
||||
}
|
||||
&:nth-child(2){
|
||||
// a{color:$vertclair;}
|
||||
&:hover a{background-color: $vertclair; color:#4d4d4d;}
|
||||
}
|
||||
&:nth-child(3){
|
||||
// a{color:$bleuclair;}
|
||||
&:hover a{background-color: $bleuclair; color:#4d4d4d;}
|
||||
}
|
||||
&:nth-child(4){
|
||||
// a{color:$jaune;}
|
||||
&:hover a{background-color: $jaune; color:#4d4d4d;}
|
||||
}
|
||||
&:nth-child(5){
|
||||
// a{color:$rose;}
|
||||
&:hover a{background-color: $rose; color:#4d4d4d;}
|
||||
}
|
||||
&:nth-child(6){
|
||||
// a{color:$violet;}
|
||||
&:hover a{background-color: $violet; color:#4d4d4d;}
|
||||
}
|
||||
&:nth-child(7){
|
||||
// a{color:$rouge;}
|
||||
&:hover a{background-color: $rouge; color:#4d4d4d;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.showroom{
|
||||
background: url("http://carnet-aux-petites-choses.fr/wp-content/uploads/2015/02/un-oeil-sur-la-matiere-materiO-26_gagaone.jpg");
|
||||
height:450px;
|
||||
margin-top: 15px;
|
||||
background-color: #fff;
|
||||
// background: url("http://carnet-aux-petites-choses.fr/wp-content/uploads/2015/02/un-oeil-sur-la-matiere-materiO-26_gagaone.jpg");
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
.content{
|
||||
background-color: rgba(255,255,255, 0.7);
|
||||
width: 40%;
|
||||
@include rounded(5px);
|
||||
padding: 20px 30px;
|
||||
.pane-content{
|
||||
width:100%; height:100%; position:relative;
|
||||
.node{position:absolute;height:100%;width:100%;}
|
||||
.field-name-field-bandeau{
|
||||
position:absolute; width:100%; height:100%; overflow:hidden;
|
||||
img{width:100%; margin-top:-10%;}
|
||||
}
|
||||
.group-content{
|
||||
position:relative;
|
||||
z-index:2;
|
||||
width:30%;
|
||||
margin:3em 2em;
|
||||
background-color: rgba(255,255,255, 0.7);
|
||||
padding:1em;
|
||||
@include rounded(5px);
|
||||
.field-name-title-field{
|
||||
font-size: 2.1em; font-weight: 300;
|
||||
}
|
||||
.field-name-body{
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
&:after{
|
||||
content:url("../img/bulle.png");
|
||||
transform: scale(0.8);
|
||||
@@ -2808,10 +2948,28 @@ body.page-node-11187{
|
||||
}
|
||||
}
|
||||
&.bdd{
|
||||
height:450px;
|
||||
margin-top: 30px;
|
||||
background-color: #FFF;
|
||||
position: relative;
|
||||
.links a{background-color: #e6e6e6;}
|
||||
.pane-content{width:30%; float:right;}
|
||||
|
||||
.field-name-field-bandeau{
|
||||
@include inlineblock(); width:60%;
|
||||
}
|
||||
.group-content{
|
||||
@include inlineblock(); width:35%;
|
||||
background-color: rgba(255,255,255, 0.7);
|
||||
padding:1em;
|
||||
@include rounded(5px);
|
||||
.field-name-title-field{
|
||||
font-size: 2.1em; font-weight: 300;
|
||||
}
|
||||
.field-name-body{
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
content:url("../img/boule.png");
|
||||
transform: scale(0.8);
|
||||
@@ -2821,47 +2979,121 @@ body.page-node-11187{
|
||||
}
|
||||
}
|
||||
&.formations{
|
||||
position: relative;
|
||||
height:300px;
|
||||
margin-top: 30px;
|
||||
background-color: #000;
|
||||
color: #FFF;
|
||||
padding-right: 20%;
|
||||
position: relative;
|
||||
a{color: #FFF;}
|
||||
.pane-title, .pane-content{/*width: 60%; float:right;*/}
|
||||
.pane-title:before{
|
||||
content:url("../img/formations.png");
|
||||
transform: scale(0.7);
|
||||
float: left;
|
||||
position: relative;
|
||||
top:-20px;
|
||||
margin: 0px 90px 0px 50px;
|
||||
|
||||
.node{
|
||||
padding:0 0 0 30%; width:70%;
|
||||
|
||||
&:before{
|
||||
content:" ";
|
||||
background: transparent url("../img/formations.png") no-repeat center center;
|
||||
background-clip: padding-box;
|
||||
background-size: contain;
|
||||
position: absolute; left:0;
|
||||
// border: 1px solid red;
|
||||
z-index: 2;
|
||||
width:30%; height:100%;
|
||||
// padding:0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.group-content{
|
||||
padding:1em; position:relative;
|
||||
.field-name-title-field{
|
||||
font-size: 2.1em; font-weight: 300;
|
||||
}
|
||||
.field-name-body{
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.services{
|
||||
background-color: #FFF;
|
||||
.pane-title, .pane-content{/*width: 60%; float:left;*/}
|
||||
.pane-title:before{
|
||||
content:url("../img/services.png");
|
||||
transform: scale(0.8);
|
||||
float: right;
|
||||
position: relative;
|
||||
top:-20px;
|
||||
margin: 0px 90px 0px 50px;
|
||||
height:300px;
|
||||
margin-top: 30px;
|
||||
|
||||
.node{
|
||||
padding:0 30% 0 0; width:70%;
|
||||
|
||||
&:before{
|
||||
content:" ";
|
||||
background: transparent url("../img/services.png") no-repeat center center;
|
||||
background-clip: padding-box;
|
||||
background-size: contain;
|
||||
position: absolute; right:0;
|
||||
// border: 1px solid red;
|
||||
z-index: 2;
|
||||
width:30%; height:100%;
|
||||
// padding:0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.group-content{
|
||||
padding:1em; position:relative;
|
||||
.field-name-title-field{
|
||||
font-size: 2.1em; font-weight: 300;
|
||||
}
|
||||
.field-name-body{
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//mini panneau news
|
||||
.pane-news-home-v2{
|
||||
margin-top: 40px;
|
||||
>.panel-panel>div>.pane-news-home-v2{
|
||||
background-color: #e6e6e6; @include rounded(10px);
|
||||
margin-top: 30px; padding-top: 1em;
|
||||
// padding:0;
|
||||
position: relative;
|
||||
// .panel-col-first{width:70%;}
|
||||
// .panel-col-last{width:29.9%;}
|
||||
h2{font-size: 30px;}
|
||||
|
||||
#mini-panel-news_home_v2 .center-wrapper{
|
||||
@include grid-row();
|
||||
.panel-panel{
|
||||
overflow:hidden;
|
||||
.inside{margin:0;}
|
||||
}
|
||||
.panel-col-first{@include grid-column(7);}
|
||||
.panel-col-last{@include grid-column(4);}
|
||||
}
|
||||
#mini-panel-news_home_v2 .panel-col-bottom{
|
||||
@include grid-row(); margin-top: 1.5em; margin-bottom: 1.5em;
|
||||
>.inside{
|
||||
@include grid-column(12);
|
||||
}
|
||||
}
|
||||
|
||||
.view-news-home-v2{
|
||||
.views-row{width: 30%; display: inline-block;}
|
||||
.views-row{@include inlineblock();}
|
||||
}
|
||||
.node-simplenews{
|
||||
h1{background-color: #FFF; text-align: center; padding: 20px;}
|
||||
@include rounded(5px); background-color: #FFF;
|
||||
@include drop-shadow(0, 0, 5px, 0.2);
|
||||
@include transition-simply-prefix(box-shadow 0.3s ease-out);
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
margin:7px;
|
||||
>a{
|
||||
position:absolute;
|
||||
bottom:0; width:100%;
|
||||
background-color: #FFF;
|
||||
text-align: center;
|
||||
h1{
|
||||
padding: 10px; margin:0;
|
||||
font-size:1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//deco
|
||||
&:after{
|
||||
content:url("../img/point.png");
|
||||
//transform: scale(1);
|
||||
@@ -2870,4 +3102,11 @@ body.page-node-11187{
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@import "misc.scss";
|
||||
// end
|
||||
Reference in New Issue
Block a user