|
|
@@ -35,6 +35,7 @@ $column-gutter: rem-calc(20);
|
|
|
background: transparent url('../assets/img/#{$img}.png') $r $x $y;
|
|
|
background: none, url('../assets/img/#{$img}.svg') $r $x $y;
|
|
|
}
|
|
|
+
|
|
|
/*
|
|
|
___ ____ ____
|
|
|
/ | / __ \/ __ \
|
|
|
@@ -44,8 +45,8 @@ $column-gutter: rem-calc(20);
|
|
|
*/
|
|
|
html{
|
|
|
position:relative;
|
|
|
- // overflow:hidden;
|
|
|
- // height:100%;
|
|
|
+ height:100%; width:100%;
|
|
|
+ overflow:hidden;
|
|
|
}
|
|
|
|
|
|
body{
|
|
|
@@ -113,11 +114,20 @@ $animeNodesDuration:3s;
|
|
|
z-index:0;
|
|
|
position:absolute;
|
|
|
overflow:hidden;
|
|
|
- width:700px;
|
|
|
- height:310px;
|
|
|
- top:50%; left:50%;
|
|
|
- margin-left:-350px;
|
|
|
- margin-top:-155px;
|
|
|
+ @media #{$small-only}{
|
|
|
+ width:200px;
|
|
|
+ height:88px;
|
|
|
+ top:50%; left:50%;
|
|
|
+ margin-left:-100px;
|
|
|
+ margin-top:-44px;
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ 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;
|
|
|
@@ -138,12 +148,14 @@ $animeNodesDuration:3s;
|
|
|
}
|
|
|
&:before{
|
|
|
@include bg-svg-png('logo');
|
|
|
+ background-size: contain;
|
|
|
animation: introLogo $animeLogoDuration linear 0s;
|
|
|
animation-fill-mode: forwards;
|
|
|
}
|
|
|
&:after{
|
|
|
// background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
|
|
|
@include bg-svg-png('logo-blured');
|
|
|
+ background-size: contain;
|
|
|
animation: introLogoBlured $animeLogoDuration linear 0s;
|
|
|
animation-fill-mode: forwards;
|
|
|
}
|
|
|
@@ -152,6 +164,7 @@ $animeNodesDuration:3s;
|
|
|
h2{
|
|
|
// background: transparent url('../assets/img/slogan.svg') no-repeat center center;
|
|
|
@include bg-svg-png('slogan');
|
|
|
+ background-size: contain;
|
|
|
position:absolute;
|
|
|
width:100%; height:100%;
|
|
|
a{display:block;margin-top:-500%;}
|
|
|
@@ -188,6 +201,18 @@ div.messages{
|
|
|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|
|
|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
|
|
|
*/
|
|
|
+
|
|
|
+ @mixin title-size($w, $h) {
|
|
|
+ $factor: 0.5;
|
|
|
+ @media #{$small-only} {
|
|
|
+ width:$w*$factor; height:$h*$factor;
|
|
|
+ margin:0 $w*(1-$factor)*0.4;
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ width:$w; height:$h;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
//SOL
|
|
|
#node-2{
|
|
|
&.node-teaser{
|
|
|
@@ -195,7 +220,11 @@ div.messages{
|
|
|
&, a{color:$SOL-col-txt;}
|
|
|
h2.node-title{
|
|
|
&,a{color:$SOL-color;}
|
|
|
- a{@include bg-svg-png('title-SOL'); width:170px; height:35px;}
|
|
|
+ a{
|
|
|
+ @include bg-svg-png('title-SOL');
|
|
|
+ @include title-size(170px, 35px);
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
.field-name-field-vignette{@include bg-svg-png('shadow-sol');}
|
|
|
.line{background-color:$SOL-col-active;}
|
|
|
@@ -214,7 +243,11 @@ div.messages{
|
|
|
&, a{color:$DPH-col-txt;}
|
|
|
h2.node-title{
|
|
|
&,a{color:$DPH-color;}
|
|
|
- a{@include bg-svg-png('title-DPH'); width:180px; height:80px;}
|
|
|
+ a{
|
|
|
+ @include bg-svg-png('title-DPH');
|
|
|
+ @include title-size(180px, 80px);
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
.field-name-field-vignette{@include bg-svg-png('shadow-dph');}
|
|
|
.line{background-color:$DPH-col-active;}
|
|
|
@@ -233,7 +266,11 @@ div.messages{
|
|
|
&, a{color:$SUB-col-txt;}
|
|
|
h2.node-title{
|
|
|
&,a{color:$SUB-color;}
|
|
|
- a{@include bg-svg-png('title-SUB'); width:200px; height:35px;}
|
|
|
+ a{
|
|
|
+ @include bg-svg-png('title-SUB');
|
|
|
+ @include title-size(200px, 35px);
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
.field-name-field-vignette{@include bg-svg-png('shadow-sub');}
|
|
|
.line{background-color:$SUB-col-active;}
|
|
|
@@ -252,7 +289,11 @@ div.messages{
|
|
|
&, a{color:$BC-col-txt;}
|
|
|
h2.node-title{
|
|
|
&,a{color:$BC-color;}
|
|
|
- a{@include bg-svg-png('title-BC'); width:120px; height:45px;}
|
|
|
+ a{
|
|
|
+ @include bg-svg-png('title-BC');
|
|
|
+ @include title-size(120px, 45px);
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
.field-name-field-vignette{@include bg-svg-png('shadow-bc');}
|
|
|
.line{background-color:$BC-col-active;}
|
|
|
@@ -271,7 +312,11 @@ div.messages{
|
|
|
&, a{color:$OPP-col-txt;}
|
|
|
h2.node-title{
|
|
|
&,a{color:$OPP-color;}
|
|
|
- a{@include bg-svg-png('title-OPP'); width:245px; height:95px;}
|
|
|
+ a{
|
|
|
+ @include bg-svg-png('title-OPP');
|
|
|
+ @include title-size(245px, 95px);
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
.field-name-field-vignette{@include bg-svg-png('shadow-opp');}
|
|
|
.line{background-color:$OPP-col-active;}
|
|
|
@@ -290,7 +335,11 @@ div.messages{
|
|
|
&, a{color:$DUB-col-txt;}
|
|
|
h2.node-title{
|
|
|
&,a{color:$DUB-color;}
|
|
|
- a{@include bg-svg-png('title-DUB'); width:195px; height:65px;}
|
|
|
+ a{
|
|
|
+ @include bg-svg-png('title-DUB');
|
|
|
+ @include title-size(195px, 65px);
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
.field-name-field-vignette{@include bg-svg-png('shadow-dub');}
|
|
|
.line{background-color:$DUB-col-active;}
|
|
|
@@ -309,7 +358,11 @@ div.messages{
|
|
|
&, a{color:$JUSO-col-txt;}
|
|
|
h2.node-title{
|
|
|
&,a{color:$JUSO-color;}
|
|
|
- a{@include bg-svg-png('title-JUSO'); width:200px; height:65px; }
|
|
|
+ a{
|
|
|
+ @include bg-svg-png('title-JUSO');
|
|
|
+ @include title-size(200px, 65px);
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
}
|
|
|
.field-name-field-vignette{@include bg-svg-png('shadow-juso');}
|
|
|
.line{background-color:$JUSO-col-active;}
|
|
|
@@ -369,7 +422,7 @@ div.messages{
|
|
|
z-index:5;
|
|
|
}
|
|
|
}
|
|
|
- >.content{position:relative;}
|
|
|
+ >.content{position:relative; left:0;}
|
|
|
.texts{
|
|
|
opacity:0; height:1px; overflow:hidden;
|
|
|
transition:1s ease-out;
|
|
|
@@ -533,7 +586,11 @@ div.messages{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .field-name-field-partie{clear:both; padding-top:1em;}
|
|
|
+ .field-name-field-partie{clear:both;
|
|
|
+ @media #{$medium-up} {
|
|
|
+ padding-top:1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
|
|
|
$shadow-size:3.5em;
|
|
|
@@ -591,6 +648,7 @@ div.messages{
|
|
|
position:absolute;
|
|
|
top:0; left:0;
|
|
|
width:100%; height:100%;
|
|
|
+ overflow:hidden;
|
|
|
z-index: -1;
|
|
|
opacity:0;
|
|
|
transition:2s ease-out;
|
|
|
@@ -624,7 +682,15 @@ div.messages{
|
|
|
.field-name-field-partager .field-label{
|
|
|
color:$SOL-col-active;
|
|
|
}
|
|
|
- h2.node-title{@include bg-svg-png('title-SOL-blur');}
|
|
|
+ @media #{$small-only} {
|
|
|
+ h2.node-title{
|
|
|
+ @include bg-svg-png('title-SOL-activ');
|
|
|
+ height:1.5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ h2.node-title{@include bg-svg-png('title-SOL-blur');}
|
|
|
+ }
|
|
|
}
|
|
|
// DPH
|
|
|
#node-3{
|
|
|
@@ -635,7 +701,15 @@ div.messages{
|
|
|
.field-name-field-partager .field-label{
|
|
|
color:$DPH-col-active;
|
|
|
}
|
|
|
- h2.node-title{@include bg-svg-png('title-DPH-blur');}
|
|
|
+ @media #{$small-only} {
|
|
|
+ h2.node-title{
|
|
|
+ @include bg-svg-png('title-DPH-activ');
|
|
|
+ height:5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ h2.node-title{@include bg-svg-png('title-DPH-blur');}
|
|
|
+ }
|
|
|
}
|
|
|
// SUB
|
|
|
#node-4{
|
|
|
@@ -646,7 +720,15 @@ div.messages{
|
|
|
.field-name-field-partager .field-label{
|
|
|
color:$SUB-col-active;
|
|
|
}
|
|
|
- h2.node-title{@include bg-svg-png('title-SUB-blur');}
|
|
|
+ @media #{$small-only} {
|
|
|
+ h2.node-title{
|
|
|
+ @include bg-svg-png('title-SUB-activ');
|
|
|
+ height:1.5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ h2.node-title{@include bg-svg-png('title-SUB-blur');}
|
|
|
+ }
|
|
|
}
|
|
|
// BC
|
|
|
#node-5{
|
|
|
@@ -657,7 +739,15 @@ div.messages{
|
|
|
.field-name-field-partager .field-label{
|
|
|
color:$BC-col-active;
|
|
|
}
|
|
|
- h2.node-title{@include bg-svg-png('title-BC-blur');}
|
|
|
+ @media #{$small-only} {
|
|
|
+ h2.node-title{
|
|
|
+ @include bg-svg-png('title-BC-activ');
|
|
|
+ height:4em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ h2.node-title{@include bg-svg-png('title-BC-blur');}
|
|
|
+ }
|
|
|
}
|
|
|
// OPP
|
|
|
#node-6{
|
|
|
@@ -668,7 +758,15 @@ div.messages{
|
|
|
.field-name-field-partager .field-label{
|
|
|
color:$OPP-col-active;
|
|
|
}
|
|
|
- h2.node-title{@include bg-svg-png('title-OPP-blur');}
|
|
|
+ @media #{$small-only} {
|
|
|
+ h2.node-title{
|
|
|
+ @include bg-svg-png('title-OPP-activ');
|
|
|
+ height:6em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ h2.node-title{@include bg-svg-png('title-OPP-blur');}
|
|
|
+ }
|
|
|
}
|
|
|
// DUB
|
|
|
#node-7{
|
|
|
@@ -679,7 +777,15 @@ div.messages{
|
|
|
.field-name-field-partager .field-label{
|
|
|
color:$DUB-col-active;
|
|
|
}
|
|
|
- h2.node-title{@include bg-svg-png('title-DUB-blur');}
|
|
|
+ @media #{$small-only} {
|
|
|
+ h2.node-title{
|
|
|
+ @include bg-svg-png('title-DUB-activ');
|
|
|
+ height:5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ h2.node-title{@include bg-svg-png('title-DUB-blur');}
|
|
|
+ }
|
|
|
}
|
|
|
// JUSO
|
|
|
#node-8{
|
|
|
@@ -690,7 +796,15 @@ div.messages{
|
|
|
.field-name-field-partager .field-label{
|
|
|
color:$JUSO-col-active;
|
|
|
}
|
|
|
- h2.node-title{@include bg-svg-png('title-JUSO-blur');}
|
|
|
+ @media #{$small-only} {
|
|
|
+ h2.node-title{
|
|
|
+ @include bg-svg-png('title-JUSO-activ');
|
|
|
+ height:3em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ h2.node-title{@include bg-svg-png('title-JUSO-blur');}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
@@ -705,6 +819,10 @@ div.messages{
|
|
|
position:relative;
|
|
|
height:100%; width:100%;
|
|
|
a{color:inherit;}
|
|
|
+
|
|
|
+ @media #{$small-only} {
|
|
|
+ overflow-y:auto;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.node-title{
|
|
|
@@ -714,24 +832,47 @@ div.messages{
|
|
|
text-align: center;
|
|
|
// max-width: 8.5em;
|
|
|
line-height: 0.85;
|
|
|
- font-size: 2.268em;
|
|
|
- position:absolute; display:block;
|
|
|
- top:0; left:0; width:100%; height:100%;
|
|
|
- background-size: contain!important;
|
|
|
- text-indent: -5000px;
|
|
|
- z-index:-1;
|
|
|
- opacity:0.4;
|
|
|
+
|
|
|
+ @media #{$small-only} {
|
|
|
+ width:80%;
|
|
|
+ margin:2em auto 1em;
|
|
|
+ background-size: contain!important;
|
|
|
+ background-position: center center;
|
|
|
+ text-indent: -5000px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media #{$medium-up} {
|
|
|
+ font-size: 2.268em;
|
|
|
+ position:absolute; display:block;
|
|
|
+ top:0; left:0; width:100%; height:100%;
|
|
|
+ background-size: contain!important;
|
|
|
+ text-indent: -5000px;
|
|
|
+ z-index:-1;
|
|
|
+ opacity:0.4;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- .node>.field, .node>.block{
|
|
|
- position:absolute;
|
|
|
+ @media #{$medium-up} {
|
|
|
+ .node>.field, .node>.block{
|
|
|
+ position:absolute;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.field-type-text-long, .field-type-text{
|
|
|
background-color: rgba(255,255,255,0.9);
|
|
|
- min-height:5em; width:19em; padding:1em;
|
|
|
- z-index:10;
|
|
|
- cursor:move;
|
|
|
+ min-height:5em; padding:1em;
|
|
|
+
|
|
|
+ @media #{$small-only} {
|
|
|
+ width:80%;
|
|
|
+ margin:1em auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media #{$medium-up} {
|
|
|
+ width:19em;
|
|
|
+ z-index:10;
|
|
|
+ cursor:move;
|
|
|
+ }
|
|
|
|
|
|
.field-label{
|
|
|
text-transform: uppercase;
|
|
|
@@ -751,6 +892,7 @@ div.messages{
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.field-name-field-dbatre{
|
|
|
left:60em;
|
|
|
ul{
|
|
|
@@ -771,8 +913,8 @@ div.messages{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.field-name-field-partie{
|
|
|
+ // position:absolute;
|
|
|
height:60%; width:100%;
|
|
|
top:20%; left:0;
|
|
|
.field-items{
|
|
|
@@ -806,9 +948,19 @@ div.messages{
|
|
|
*/
|
|
|
#static-wrapper{
|
|
|
position:absolute;
|
|
|
- top:15%; bottom:0; right:20px;
|
|
|
- width:80%; max-width:55em;
|
|
|
- z-index: -1;
|
|
|
+
|
|
|
+ @media #{$small-only} {
|
|
|
+ top:10%;
|
|
|
+ bottom:0; right:0;
|
|
|
+ width:100%;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ top:15%; bottom:0; right:20px;
|
|
|
+ width:80%; max-width:55em;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
background-color: #fff;
|
|
|
|
|
|
opacity:0;
|
|
|
@@ -823,16 +975,29 @@ div.messages{
|
|
|
|
|
|
>.close{
|
|
|
position:absolute;
|
|
|
- top:20px; right:20px;
|
|
|
- z-index: 500;
|
|
|
- width:25px; height:25px;
|
|
|
+ @media #{$small-only} {
|
|
|
+ top:10px; right:10px;
|
|
|
+ z-index: 500;
|
|
|
+ width:15px; height:15px;
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ top:20px; right:20px;
|
|
|
+ z-index: 500;
|
|
|
+ width:25px; height:25px;
|
|
|
+ }
|
|
|
cursor:pointer;
|
|
|
@include bg-svg-png('close');
|
|
|
}
|
|
|
|
|
|
>.inner{
|
|
|
- padding:5em 7em;
|
|
|
- width:100%; height:100%; overflow:hidden;
|
|
|
+ @media #{$small-only} {
|
|
|
+ padding:1em 1em 1.5em;
|
|
|
+ width:100%; height:100%; overflow:hidden;
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ padding:5em 7em;
|
|
|
+ width:100%; height:100%; overflow:hidden;
|
|
|
+ }
|
|
|
|
|
|
>.node{
|
|
|
width:100%; height:100%; overflow-y:auto; overflow-x:hidden;
|
|
|
@@ -909,7 +1074,13 @@ div.messages{
|
|
|
ul{
|
|
|
margin:0; padding:0;
|
|
|
li{
|
|
|
- margin:0 1em 0 0; padding:0;
|
|
|
+ @media #{$small-only} {
|
|
|
+ margin:0 0.5em 0.5em 0;
|
|
|
+ }
|
|
|
+ @media #{$medium-up} {
|
|
|
+ margin:0 1em 0 0;
|
|
|
+ }
|
|
|
+ padding:0;
|
|
|
display:inline-block;
|
|
|
list-style: none;
|
|
|
a{
|
Bachir Soussi Chiadmi
