426 lines
11 KiB
SCSS
Executable File
426 lines
11 KiB
SCSS
Executable File
@charset "UTF-8";
|
|
|
|
@import "../bower_components/foundation/scss/normalize.scss";
|
|
@import "../bower_components/foundation/scss/foundation/functions";
|
|
|
|
$row-width: rem-calc(1250);
|
|
// $total-columns: 12;
|
|
$column-gutter: rem-calc(20);
|
|
|
|
//@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
|
|
@import "../bower_components/foundation/scss/foundation/components/global";
|
|
@import "../bower_components/foundation/scss/foundation/components/type";
|
|
@import "../bower_components/foundation/scss/foundation/components/clearing";
|
|
// @import "../bower_components/foundation/scss/foundation/components/inline-lists";
|
|
@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 "../bower_components/foundation/scss/foundation.scss"; // without importing the whole foundation, the final css files is 75% less heavier
|
|
|
|
/*
|
|
* ESADHaR
|
|
*/
|
|
@import "communs.scss";
|
|
@import "fonts.scss";
|
|
@import "misc.scss";
|
|
|
|
|
|
html{
|
|
position:relative;
|
|
}
|
|
|
|
body{
|
|
position:relative;
|
|
height:100%!important;
|
|
|
|
/* IE10 Consumer Preview */
|
|
background-image: -ms-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
/* Mozilla Firefox */
|
|
background-image: -moz-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
/* Opera */
|
|
background-image: -o-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
/* Webkit (Safari/Chrome 10) */
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFDE9), color-stop(1, #BECFD9));
|
|
/* Webkit (Chrome 11+) */
|
|
background-image: -webkit-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
|
|
/* W3C Markup, IE10 Release Preview */
|
|
background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);
|
|
}
|
|
|
|
#root{
|
|
position:relative;
|
|
width:100%;
|
|
height:100%;
|
|
overflow: hidden;
|
|
// width:1125px;
|
|
// height:900px;
|
|
// margin:-450px auto 0;
|
|
// top:50%;
|
|
}
|
|
|
|
@keyframes introLogo{
|
|
0% {opacity:0;}
|
|
35% {opacity:1;}
|
|
50% {opacity:1;}
|
|
75% {opacity:0;}
|
|
100% {opacity:0;}
|
|
}
|
|
@keyframes introLogoBlured{
|
|
0% {opacity:0;}
|
|
50% {opacity:0;}
|
|
60% {opacity:0.8;}
|
|
100% {opacity:0.8;}
|
|
}
|
|
@keyframes introSlogan{
|
|
0% {opacity:0;}
|
|
50% {opacity:0;}
|
|
70% {opacity:1;}
|
|
90% {opacity:1;}
|
|
100% {opacity:0;}
|
|
}
|
|
|
|
body{
|
|
user-select:none;
|
|
}
|
|
|
|
$animeLogoDuration:8s;
|
|
|
|
#header{
|
|
position:absolute;
|
|
overflow:hidden;
|
|
width:700px;
|
|
height:310px;
|
|
top:50%; left:50%;
|
|
margin-left:-350px;
|
|
margin-top:-155px;
|
|
transition-property: "transform";
|
|
transition-duration: 0.2s;
|
|
transition-timing-function:ease-out;
|
|
animation-fill-mode: forwards;
|
|
|
|
h1{
|
|
position:absolute;
|
|
width:100%; height:100%;
|
|
a{display:block;margin-top:-500%;}
|
|
// filter:url(#blur-effect);
|
|
&:after, &:before{
|
|
content:"";
|
|
display:block;
|
|
width:100%; height:100%;
|
|
position:absolute;
|
|
top:0; left:0;
|
|
opacity:0;
|
|
}
|
|
&:before{
|
|
background: transparent url('../assets/img/logo.svg') no-repeat center center;
|
|
animation: introLogo $animeLogoDuration linear 0s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
&:after{
|
|
background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
|
|
animation: introLogoBlured $animeLogoDuration linear 0s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
}
|
|
|
|
h2{
|
|
background: transparent url('../assets/img/slogan.svg') no-repeat center center;
|
|
position:absolute;
|
|
width:100%; height:100%;
|
|
a{display:block;margin-top:-500%;}
|
|
opacity:0;
|
|
animation: introSlogan $animeLogoDuration linear 0s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
} // #header
|
|
|
|
div.messages{
|
|
position:absolute;
|
|
top:20px; right:20px;
|
|
width:250px; max-height:30%;
|
|
overflow-y:auto;
|
|
}
|
|
|
|
#main{
|
|
position:absolute;
|
|
width:100%; height:100%;
|
|
|
|
&>.region, &>.region>.block-system, &>.region>.block-system>.content{
|
|
position:relative;
|
|
width:100%; height:100%;
|
|
}
|
|
|
|
.node-chapitre.node-teaser{
|
|
position:absolute;
|
|
transition: transform 0.2s ease-out;
|
|
// animation-fill-mode: forwards;
|
|
|
|
// INTERACTIVITÉ - - - - - - - - - - - --
|
|
// ----- DEFAULT MODE ----
|
|
.field-name-field-comprendre{
|
|
opacity:0; height:1px; overflow:hidden;
|
|
transition:1s ease-out;
|
|
transition-property:opacity height;
|
|
}
|
|
.field-name-field-partie{
|
|
opacity:0;
|
|
position:absolute;
|
|
transition:1s ease-out 1s;
|
|
transition-property: transform opacity;
|
|
// just let see the field vignette of first partie
|
|
&:nth-child(3){
|
|
z-index:2;
|
|
opacity:1;
|
|
transition-delay:0;
|
|
>.field-type-text{
|
|
opacity:0;
|
|
transition:1s ease-out;
|
|
transition-property: opacity;
|
|
}
|
|
>.field-name-field-vignette{cursor:pointer;z-index:2;}
|
|
}
|
|
}
|
|
// &.closed .field-name-field-partie{
|
|
// transform:none!important;
|
|
// }
|
|
.links{
|
|
opacity:0;>*{display:none;}
|
|
transition:1s ease-out 1s;
|
|
transition-property:opacity;
|
|
}
|
|
&:after{
|
|
opacity:0;
|
|
// display:none;
|
|
transition: 3s ease-out;
|
|
transition-property:opacity;
|
|
}
|
|
|
|
// ----- PREVIEW MODE ------
|
|
&.previewed{
|
|
&:after{opacity:1;}
|
|
.field-name-field-comprendre{opacity:1; height:6em;}
|
|
.links{opacity:1;>*{display:block;}}
|
|
.field-name-field-partie{
|
|
opacity:1; z-index:0;
|
|
// display all fields inside each parties
|
|
>.field{opacity:1;z-index:-1; cursor:default;}
|
|
}
|
|
}
|
|
|
|
// ------- GENERALS (non interactive) - - - - - - - - - - - - - - - - - -
|
|
&:after{ // background
|
|
content:" ";
|
|
background-size:contain;
|
|
// background-clip: content-box;
|
|
background-repeat: no-repeat;
|
|
position:absolute;
|
|
$pad:-2em;
|
|
top:-$pad;
|
|
left:$pad*6; right:$pad*6;
|
|
bottom:$pad*15;
|
|
// border: 1px solid blue;
|
|
z-index:-1;
|
|
}
|
|
|
|
h2.node-title{
|
|
font-family: "epflulb";
|
|
font-weight:normal;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
max-width: 8.5em;
|
|
line-height: 1.1em;
|
|
@media #{$large-up} {
|
|
font-size: 1.3em;
|
|
}
|
|
@media #{$xlarge-up} {
|
|
font-size:1.8em;
|
|
}
|
|
z-index: 5;
|
|
}
|
|
|
|
.field-name-field-comprendre{
|
|
h1,h2,h3,h4,h5,h6{display:none!important;}
|
|
max-width:15em;
|
|
p{margin:0;}
|
|
}
|
|
|
|
.field-name-field-partie{clear:both; padding-top:1em;}
|
|
|
|
.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:14em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
ul.links{
|
|
margin:0; text-align: right; z-index:5; position:relative;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
} // node-chapitre
|
|
|
|
// COLORS BY NODE - - - - - - - - - - - - - - - - - - - - -
|
|
$bs-blur:100px;
|
|
$bs-size:25px;
|
|
//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);
|
|
background-image:url(../assets/img/shadow-sol.svg);
|
|
}
|
|
// .field-name-field-vignette::before{
|
|
// box-shadow: 0 0 $bs-blur $bs-size $SOL-color;
|
|
// }
|
|
}
|
|
//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.png);
|
|
background-image:url(../assets/img/shadow-dph.svg);
|
|
}
|
|
// .field-name-field-vignette::before{
|
|
// box-shadow: 0 0 $bs-blur $bs-size $DPH-color;
|
|
// }
|
|
}
|
|
// 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.png);
|
|
background-image:url(../assets/img/shadow-sub.svg);
|
|
}
|
|
// .field-name-field-vignette::before{
|
|
// box-shadow: 0 0 $bs-blur $bs-size $SUB-color;
|
|
// }
|
|
}
|
|
// 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.png);
|
|
background-image:url(../assets/img/shadow-bc.svg);
|
|
}
|
|
// .field-name-field-vignette::before{
|
|
// box-shadow: 0 0 $bs-blur $bs-size $BC-color;
|
|
// }
|
|
}
|
|
//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.png);
|
|
background-image:url(../assets/img/shadow-opp.svg);
|
|
}
|
|
// .field-name-field-vignette::before{
|
|
// box-shadow: 0 0 $bs-blur $bs-size $OPP-color;
|
|
// }
|
|
}
|
|
//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.png);
|
|
background-image:url(../assets/img/shadow-dub.svg);
|
|
}
|
|
// .field-name-field-vignette::before{
|
|
// box-shadow: 0 0 $bs-blur $bs-size $DUB-color;
|
|
// }
|
|
}
|
|
// 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.png);
|
|
background-image:url(../assets/img/shadow-juso.svg);
|
|
}
|
|
// .field-name-field-vignette::before{
|
|
// box-shadow: 0 0 $bs-blur $bs-size $JUSO-color;
|
|
// }
|
|
}
|
|
|
|
.chapter-wrapper{
|
|
position:absolute;
|
|
top:0; left:0; bottom:0; right:0;
|
|
}
|
|
|
|
} // main
|
|
|
|
#footer{
|
|
position:fixed;
|
|
bottom:0; right:0;
|
|
.block{
|
|
display:inline-block;
|
|
vertical-align: top;
|
|
}
|
|
} |