bachir/jeunes-et-engages-d7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chapter is quite ok

Browse Source 
ajax loaded content
graphics ok
interactivity ok
remains the video interactions
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-10 20:23:17 +01:00
parent d5edfa75c8
commit dab5226cd7
30 changed files with 3508 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/css/jee.scss
+413 -227
View File
@@ -186,59 +186,73 @@ div.messages{
*/
//SOL
#node-2{
&::after{ @include bg-svg-png('bgd-sol');}
&, a{color:$SOL-col-txt;}
h2.node-title{&,a{color:$SOL-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-sol');}
.line{background-color:$SOL-col-active;}
&.node-teaser{
&::after{ @include bg-svg-png('bgd-sol');}
&, a{color:$SOL-col-txt;}
h2.node-title{&,a{color:$SOL-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-sol');}
.line{background-color:$SOL-col-active;}
}
}
//DPH
#node-3{
&::after{ @include bg-svg-png('bgd-dph');}
&, a{color:$DPH-col-txt;}
h2.node-title{&,a{color:$DPH-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-dph');}
.line{background-color:$DPH-col-active;}
&.node-teaser{
&::after{ @include bg-svg-png('bgd-dph');}
&, a{color:$DPH-col-txt;}
h2.node-title{&,a{color:$DPH-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-dph');}
.line{background-color:$DPH-col-active;}
}
}
// SUB
#node-4{
&::after{ @include bg-svg-png('bgd-sub');}
&, a{color:$SUB-col-txt;}
h2.node-title{&,a{color:$SUB-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-sub');}
.line{background-color:$SUB-col-active;}
&.node-teaser{
&::after{ @include bg-svg-png('bgd-sub');}
&, a{color:$SUB-col-txt;}
h2.node-title{&,a{color:$SUB-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-sub');}
.line{background-color:$SUB-col-active;}
}
}
// BC
#node-5{
&::after{ @include bg-svg-png('bgd-bc');}
&, a{color:$BC-col-txt;}
h2.node-title{&,a{color:$BC-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-bc');}
.line{background-color:$BC-col-active;}
&.node-teaser{
&::after{ @include bg-svg-png('bgd-bc');}
&, a{color:$BC-col-txt;}
h2.node-title{&,a{color:$BC-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-bc');}
.line{background-color:$BC-col-active;}
}
}
//OPP
#node-6{
&::after{ @include bg-svg-png('bgd-opp');}
&, a{color:$OPP-col-txt;}
h2.node-title{&,a{color:$OPP-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-opp');}
.line{background-color:$OPP-col-active;}
&.node-teaser{
&::after{ @include bg-svg-png('bgd-opp');}
&, a{color:$OPP-col-txt;}
h2.node-title{&,a{color:$OPP-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-opp');}
.line{background-color:$OPP-col-active;}
}
}
//DUB
#node-7{
&::after{ @include bg-svg-png('bgd-dub');}
&, a{color:$DUB-col-txt;}
h2.node-title{&,a{color:$DUB-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-dub');}
.line{background-color:$DUB-col-active;}
&.node-teaser{
&::after{ @include bg-svg-png('bgd-dub');}
&, a{color:$DUB-col-txt;}
h2.node-title{&,a{color:$DUB-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-dub');}
.line{background-color:$DUB-col-active;}
}
}
// JUSO
#node-8{
&::after{ @include bg-svg-png('bgd-juso');}
&, a{color:$JUSO-col-txt;}
h2.node-title{&,a{color:$JUSO-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-juso');}
.line{background-color:$JUSO-col-active;}
&.node-teaser{
&::after{ @include bg-svg-png('bgd-juso');}
&, a{color:$JUSO-col-txt;}
h2.node-title{&,a{color:$JUSO-color;}}
.field-name-field-vignette{@include bg-svg-png('shadow-juso');}
.line{background-color:$JUSO-col-active;}
}
}
/*
@@ -250,215 +264,387 @@ div.messages{
*/
.node-chapitre.node-teaser{
z-index: 2;
position:absolute;
position:absolute;
/*
_____ __________________ ___ _________________ __________________
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
*/
/*
_____ __________________ ___ _________________ __________________
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
*/
/*
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
| \| __| __| _ | | | ||_ _| | | | \| __|
| | | __| __| | | | |__| | | | | | | | | | __|
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
/*
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
| \| __| __| _ | | | ||_ _| | | | \| __|
| | | __| __| | | | |__| | | | | | | | | | __|
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
*/
opacity:1;
*/
opacity:1;
transition:1s ease-out;
transition-property:opacity;
h2.node-title{
transform:none;
transform-origin:bottom center;
transition:1s ease-out;
transition-property:opacity;
h2.node-title{
transform:none;
transform-origin:bottom center;
transition:1s ease-out;
transition-property:transform;
z-index:5;
}
>.content{position:relative;}
.texts{
opacity:0; height:1px; overflow:hidden;
transition:1s ease-out;
transition-property:opacity height;
position:absolute;
}
.field-name-field-partie{
opacity:0;
position:absolute;
transition:1s ease-in-out 0.1s;
transition-property: opacity transform;
// just let see the field vignette of first partie
&:nth-child(2){
z-index:2;
opacity:1;
// transition-delay:0;
>.field-type-text{
opacity:0;
transition:1s ease-out 0.9s;
transition-property: opacity;
}
>.field-name-field-vignette{cursor:pointer;z-index:2;}
}
}
&:after{
transition-property:transform;
z-index:5;
}
>.content{position:relative;}
.texts{
opacity:0; height:1px; overflow:hidden;
transition:1s ease-out;
transition-property:opacity height;
position:absolute;
}
.field-name-field-partie{
opacity:0;
transition: 2s ease-in;
transition-property:opacity;
top:1px; left:1px; bottom:2px; right:2px;
}
.line{
// transition: 0.1s ease-out;
// transition-property:height transform;
}
/*
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
| _ | __ | __| | | | __| | | | | | | \| __|
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
*/
&.previewed{
z-index:100;
&:after{
position:absolute;
transition:1s ease-in-out 0.1s;
transition-property: opacity transform;
// just let see the field vignette of first partie
&:nth-child(2){
z-index:2;
opacity:1;
$pad:-2em;
top:-$pad;
left:$pad*6; right:$pad*6;
bottom:$pad*15;
}
h2.node-title{transform:scale(2,2);}
.texts{opacity:1; height:8em;}
.field-name-field-partie{
opacity:1; z-index:0;
// display all fields inside each parties
>.field{opacity:1; z-index:-1; cursor:default;}
}
}
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
| | |_ _| | __| _ |_ _| __| | | | \| __|
| | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
|_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
*/
&.mitigated{
opacity:0.3;
}
/*
_____________ ____________ ___ __ _____ __ _ __ __ _ _
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|_| /_/
*/
&:after{ // background
content:" ";
background-size:contain!important;
position:absolute;
z-index:-1;
}
h2.node-title{
font-family: "epflulb";
font-weight:normal;
text-transform: uppercase;
text-align: center;
max-width: 8.5em;
line-height: 0.85;
@media #{$large-up} {
font-size: 1.3em;
}
@media #{$xlarge-up} {
font-size:1.8em;
}
z-index: 5;
}
.texts{
// position:relative;
}
.field-name-field-comprendre{
h1,h2,h3,h4,h5,h6{display:none!important;}
// max-width:15em;
p{margin:0;}
min-width:16em;
}
ul.links{
display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
li.node-readmore{
padding:0;
a{
display:inline-block;
height:25px;
font-family: "open_sans";
font-weight: 900;
color:#000!important;
width:8em; text-align: left;
// background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
@include bg-svg-png('readmore-btn', no-repeat, right, center);
// transition-delay:0;
>.field-type-text{
opacity:0;
transition:1s ease-out 0.9s;
transition-property: opacity;
}
>.field-name-field-vignette{cursor:pointer;z-index:2;}
}
}
&:after{
opacity:0;
transition: 2s ease-in;
transition-property:opacity;
top:1px; left:1px; bottom:2px; right:2px;
}
.line{
// transition: 0.1s ease-out;
// transition-property:height transform;
}
/*
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
| _ | __ | __| | | | __| | | | | | | \| __|
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
*/
&.previewed{
z-index:100;
&:after{
opacity:1;
$pad:-2em;
top:-$pad;
left:$pad*6; right:$pad*6;
bottom:$pad*15;
}
h2.node-title{transform:scale(2,2);}
.texts{opacity:1; height:8em;}
.field-name-field-partie{
opacity:1; z-index:0;
// display all fields inside each parties
>.field{opacity:1; z-index:-1; cursor:default;}
}
}
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
| | |_ _| | __| _ |_ _| __| | | | \| __|
| | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
|_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
*/
&.mitigated{
opacity:0.3;
}
/*
_____ _____ _____ _____ _____ _____ _____ ____ _____ _____ _____ __ _____ __ __ _____ ____
| | | | _ | _ |_ _| __| __ | | \| | __| _ | | | _ | | | __| \
| --| | | __| | | | __| -| | | |- -|__ | __| |__| |_ _| __| | |
|_____|__|__|__|__|__| |_| |_____|__|__| |____/|_____|_____|__| |_____|__|__| |_| |_____|____/
*/
.chapter-displayed & {
opacity:0.1;
}
/*
_____________ ____________ ___ __ _____ __ _ __ __ _ _
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|_| /_/
*/
&:after{ // background
content:" ";
background-size:contain!important;
position:absolute;
z-index:-1;
}
h2.node-title{
font-family: "epflulb";
font-weight:normal;
text-transform: uppercase;
text-align: center;
max-width: 8.5em;
line-height: 0.85;
@media #{$large-up} {
font-size: 1.3em;
}
@media #{$xlarge-up} {
font-size:1.8em;
}
z-index: 5;
}
.texts{
// position:relative;
}
.field-name-field-comprendre{
h1,h2,h3,h4,h5,h6{display:none!important;}
// max-width:15em;
p{margin:0;}
min-width:16em;
}
ul.links{
display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
li.node-readmore{
padding:0;
a{
display:inline-block;
height:25px;
font-family: "open_sans";
font-weight: 900;
color:#000!important;
width:8em; text-align: left;
// background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
@include bg-svg-png('readmore-btn', no-repeat, right, center);
}
}
}
.field-name-field-partie{clear:both; padding-top:1em;}
.field-name-field-partie{clear:both; padding-top:1em;}
$shadow-size:3.5em;
.field-name-field-vignette{
position:relative;
float:left;
$shadow-size:3.5em;
.field-name-field-vignette{
position:relative;
float:left;
$shadow-size:3.5em;
padding:$shadow-size;
margin-top:-$shadow-size*1.15;
margin-right:-$shadow-size+1.5em;
margin-bottom:0;
margin-left:0;
background-size: contain;
// background-repeat: no-repeat;
// background-origin: center center;
}
.field-type-text{ min-width:16em; }
.field-name-field-titre{
font-family: "epflul";
font-size:1.6em;
line-height:1.1;
}
.field-name-field-sous-titre{
font-family: "epflul";
font-size:1.4em;
line-height:1.2;
}
.field-name-field-description{
// font-family: "epf-lul";
font-size:0.88em;
line-height:1.2;
}
padding:$shadow-size;
margin-top:-$shadow-size*1.15;
margin-right:-$shadow-size+1.5em;
margin-bottom:0;
margin-left:0;
background-size: contain;
// background-repeat: no-repeat;
// background-origin: center center;
}
.field-type-text{ min-width:16em; }
.field-name-field-titre{
font-family: "epflul";
font-size:1.6em;
line-height:1.1;
}
.field-name-field-sous-titre{
font-family: "epflul";
font-size:1.4em;
line-height:1.2;
}
.field-name-field-description{
// font-family: "epf-lul";
font-size:0.88em;
line-height:1.2;
}
.line{
z-index:-1;
position:absolute;
top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
transform-origin:top left;
width:2px; //background-color:red;
opacity:0.4;
}
.line{
z-index:-1;
position:absolute;
top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
transform-origin:top left;
width:2px; //background-color:red;
opacity:0.4;
}
} // node-chapitre
.chapter-wrapper{
/* ____ ____ _______ ____________ ________ _____ ____ ________________ _____
/ __ \/ __ \/ ____/ | / / ____/ __ \ / ____/ / / / | / __ \/_ __/ ____/ __ \/ ___/
/ / / / /_/ / __/ / |/ / __/ / / / / / / / /_/ / /| | / /_/ / / / / __/ / /_/ /\__ \
/ /_/ / ____/ /___/ /| / /___/ /_/ / / /___/ __ / ___ |/ ____/ / / / /___/ _, _/___/ /
\____/_/ /_____/_/ |_/_____/_____/ \____/_/ /_/_/ |_/_/ /_/ /_____/_/ |_|/____/
*/
#chapter-wrapper{
position:absolute;
top:0; left:0; bottom:0; right:0;
}
} // main
top:0; left:0;
width:100%; height:100%;
z-index: -1;
opacity:0;
transition:2s ease-out;
transition-property:opacity;
&.visible{
opacity:1;
z-index: 500;
/*
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
| | | | | | __ | __| | __ | | | | | | | \| __|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
*/
#node-2{
.field-type-text-long .field-label,
h2.node-title,
.field-name-field-dbatre li:before{
color:$SOL-col-active;
}
}
#node-3{
.field-type-text-long .field-label,
h2.node-title,
.field-name-field-dbatre li:before{
color:$DPH-col-active;
}
}
#node-4{
.field-type-text-long .field-label,
h2.node-title,
.field-name-field-dbatre li:before{
color:$SUB-col-active;
}
}
#node-5{
.field-type-text-long .field-label,
h2.node-title,
.field-name-field-dbatre li:before{
color:$BC-col-active;
}
}
#node-6{
.field-type-text-long .field-label,
h2.node-title,
.field-name-field-dbatre li:before{
color:$OPP-col-active;
}
}
#node-7{
.field-type-text-long .field-label,
h2.node-title,
.field-name-field-dbatre li:before{
color:$DUB-col-active;
}
}
#node-8{
.field-type-text-long .field-label,
h2.node-title,
.field-name-field-dbatre li:before{
color:$JUSO-col-active;
}
}
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____
| __| __| | | __| __ | | | | | __|
| | | __| | | | __| -|- -| | | | | __|
|_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
|__|
*/
}
.node{
position:relative;
height:100%; width:100%;
a{color:inherit;}
}
.node-title{
font-family: "epflulb";
font-weight:normal;
text-transform: uppercase;
text-align: center;
max-width: 8.5em;
line-height: 0.85;
font-size: 2.268em;
}
.node>.field{
position:absolute;
}
.field-type-text-long{
background-color: rgba(255,255,255,0.9);
width:23em; padding:1em;
z-index:10;
.field-label{
text-transform: uppercase;
font-family: "epflulb";
font-size:1.5em;
}
h2{
font-size:0.88em;
}
p{
font-size: 0.88em;
margin-bottom:0.5em;
}
}
.field-name-field-dbatre{
left:60em;
ul{
margin-left:1em;
li{
list-style: none;
line-height:1;
margin-bottom: 1em;
position:relative;
&:before{
content:"?";
position:absolute;
top:0; left:-1em;
font-family: "epflul";
}
}
}
}
.field-name-field-partie{
height:60%; width:100%;
top:20%; left:0;
.field-items{
position:relative;
top:0; left:0;
height:100%; width:auto;
// overflow:hidden;
.field{
position:relative;
display:inline-block;
.mask{
position:absolute;
width:100%; height:100%;
top:0; left:0;
z-index:10;
}
}
}
}
} // #chapter-wrapper
} // #main
/* __________ ____ ________________
/ ____/ __ \/ __ \/_ __/ ____/ __ \
@@ -531,4 +717,4 @@ div.messages{
margin-top: -3px; margin-left: -3px;
background-color: red;
z-index:1000;
}
}