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

mobile responsive

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-04-15 18:48:24 +02:00
parent 183b167be0
commit 2a949edab0
19 changed files with 1241 additions and 994 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/css/jee.css
+544 -260
View File
File diff suppressed because it is too large Load Diff
sites/all/themes/gui/jee/css/jee.scss
+216 -45
View File
@@ -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{