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

main interface ok

Browse Source 
added grunt-svg2png and set svg 2 png fall back mixin
added bubbles and stars
added nav_pos move on chapter preview
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-09 18:04:42 +01:00
parent 76c7154f4e
commit d5edfa75c8
810 changed files with 87625 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/css/jee.scss
+140 -72
View File
@@ -25,6 +25,24 @@ $column-gutter: rem-calc(20);
@import "misc.scss";
/*
__ ________ __ _____ _______
/ |/ / _/ |/ // _/ | / / ___/
/ /|_/ // / | / / // |/ /\__ \
/ / / // / / |_/ // /| /___/ /
/_/ /_/___//_/|_/___/_/ |_//____/
*/
@mixin bg-svg-png($img, $r:no-repeat, $x:center, $y:center) {
background: transparent url('../assets/img/#{$img}.png') $r $x $y;
background: none, url('../assets/img/#{$img}.svg') $r $x $y;
}
/*
___ ____ ____
/ | / __ \/ __ \
/ /| | / /_/ / /_/ /
/ ___ |/ ____/ ____/
/_/ |_/_/ /_/
*/
html{
position:relative;
// overflow:hidden;
@@ -89,6 +107,7 @@ body{
$animeLogoDuration:8s;
#header{
z-index:1;
position:absolute;
overflow:hidden;
width:700px;
@@ -115,19 +134,21 @@ $animeLogoDuration:8s;
opacity:0;
}
&:before{
background: transparent url('../assets/img/logo.svg') no-repeat center center;
@include bg-svg-png('logo');
animation: introLogo $animeLogoDuration linear 0s;
animation-fill-mode: forwards;
}
&:after{
background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
// background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
@include bg-svg-png('logo-blured');
animation: introLogoBlured $animeLogoDuration linear 0s;
animation-fill-mode: forwards;
}
}
h2{
background: transparent url('../assets/img/slogan.svg') no-repeat center center;
// background: transparent url('../assets/img/slogan.svg') no-repeat center center;
@include bg-svg-png('slogan');
position:absolute;
width:100%; height:100%;
a{display:block;margin-top:-500%;}
@@ -156,7 +177,79 @@ div.messages{
overflow:hidden;
}
/*
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
| | | | | | __ | __| | __ | | | | | | | \| __|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
*/
//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;}
}
//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;}
}
// 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;}
}
// 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;}
}
//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;}
}
//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;}
}
// 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-chapitre.node-teaser{
z-index: 2;
position:absolute;
/*
@@ -174,6 +267,10 @@ div.messages{
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
*/
opacity:1;
transition:1s ease-out;
transition-property:opacity;
h2.node-title{
transform:none;
transform-origin:bottom center;
@@ -225,6 +322,7 @@ div.messages{
*/
&.previewed{
z-index:100;
&:after{
opacity:1;
$pad:-2em;
@@ -241,6 +339,15 @@ div.messages{
}
}
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
| | |_ _| | __| _ |_ _| __| | | | \| __|
| | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
|_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
*/
&.mitigated{
opacity:0.3;
}
/*
@@ -253,8 +360,7 @@ div.messages{
*/
&:after{ // background
content:" ";
background-size:contain;
background-repeat: no-repeat;
background-size:contain!important;
position:absolute;
z-index:-1;
}
@@ -297,7 +403,8 @@ div.messages{
font-weight: 900;
color:#000!important;
width:8em; text-align: left;
background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
// background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
@include bg-svg-png('readmore-btn', no-repeat, right, center);
}
}
}
@@ -316,8 +423,8 @@ div.messages{
margin-bottom:0;
margin-left:0;
background-size: contain;
background-repeat: no-repeat;
background-origin: center center;
// background-repeat: no-repeat;
// background-origin: center center;
}
.field-type-text{ min-width:16em; }
.field-name-field-titre{
@@ -341,75 +448,12 @@ div.messages{
position:absolute;
top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
transform-origin:top left;
width:2px; background-color:red;
width:2px; //background-color:red;
opacity:0.4;
}
} // node-chapitre
/*
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
| | | | | | __ | __| | __ | | | | | | | \| __|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
*/
//SOL
#node-2{
&::after{ background-image : url(../assets/img/bgd-sol.svg); }
&, a{color:$SOL-col-txt;}
h2.node-title{&,a{color:$SOL-color;}}
.field-name-field-vignette{ background-image:url(../assets/img/shadow-sol.svg); }
.line{background-color:$SOL-col-active;}
}
//DPH
#node-3{
&::after{ background-image : url(../assets/img/bgd-dph.svg); }
&, a{color:$DPH-col-txt;}
h2.node-title{&,a{color:$DPH-color;}}
.field-name-field-vignette{ background-image:url(../assets/img/shadow-dph.svg); }
.line{background-color:$DPH-col-active;}
}
// SUB
#node-4{
&::after{ background-image : url(../assets/img/bgd-sub.svg); }
&, a{color:$SUB-col-txt;}
h2.node-title{&,a{color:$SUB-color;}}
.field-name-field-vignette{ background-image:url(../assets/img/shadow-sub.svg); }
.line{background-color:$SUB-col-active;}
}
// BC
#node-5{
&::after{ background-image : url(../assets/img/bgd-bc.svg); }
&, a{color:$BC-col-txt;}
h2.node-title{&,a{color:$BC-color;}}
.field-name-field-vignette{ background-image:url(../assets/img/shadow-bc.svg); }
.line{background-color:$BC-col-active;}
}
//OPP
#node-6{
&::after{ background-image : url(../assets/img/bgd-opp.svg); }
&, a{color:$OPP-col-txt;}
h2.node-title{&,a{color:$OPP-color;}}
.field-name-field-vignette{ background-image:url(../assets/img/shadow-opp.svg); }
.line{background-color:$OPP-col-active;}
}
//DUB
#node-7{
&::after{ background-image : url(../assets/img/bgd-dub.svg); }
&, a{color:$DUB-col-txt;}
h2.node-title{&,a{color:$DUB-color;}}
.field-name-field-vignette{ background-image:url(../assets/img/shadow-dub.svg); }
.line{background-color:$DUB-col-active;}
}
// JUSO
#node-8{
&::after{ background-image : url(../assets/img/bgd-juso.svg); }
&, a{color:$JUSO-col-txt;}
h2.node-title{&,a{color:$JUSO-color;}}
.field-name-field-vignette{ background-image:url(../assets/img/shadow-juso.svg); }
.line{background-color:$JUSO-col-active;}
}
.chapter-wrapper{
position:absolute;
top:0; left:0; bottom:0; right:0;
@@ -444,6 +488,30 @@ div.messages{
z-index: 1000;
}
@mixin bubble($w,$h,$bg){
position:absolute;
z-index:0;
display:block;
width:$w; height:$h;
// border:1px solid blue;
@include bg-svg-png($bg);
}
.bubble-1{
@include bubble(425px, 425px, 'bubble-01');
top:-200px; left:-200px;
}
.bubble-2{
@include bubble(885px, 885px, 'bubble-02');
bottom:-400px; right:-400px;
}
.star{
position:absolute;
z-index: 0; display:block;
width:10px; height:10px;
opacity:1;
@include bg-svg-png('star');
}
/* ____ __________ __ ________
/ __ \/ ____/ __ )/ / / / ____/
/ / / / __/ / __ / / / / / __