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

preview opening works wery well now :)

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-08 21:36:07 +01:00
parent 10b99958e2
commit 76c7154f4e
4 changed files with 386 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/css/jee.css
+178 -138
View File
@@ -3931,30 +3931,66 @@ div.messages {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
width: 250px; width: 500px;
max-height: 30%; max-height: 60%;
overflow-y: auto; overflow-y: auto;
z-index: 1000;
} }
/* line 147, jee.scss */ /* line 148, jee.scss */
#main { #main {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
/*
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
| | | | | | __ | __| | __ | | | | | | | \| __|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
*/
} }
/* line 152, jee.scss */ /* line 153, jee.scss */
#main > .region, #main > .region > .block-system, #main > .region > .block-system > .content { #main > .region, #main > .region > .block-system, #main > .region > .block-system > .content {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
/* line 158, jee.scss */ /* line 159, jee.scss */
#main .node-chapitre.node-teaser { #main .node-chapitre.node-teaser {
position: absolute; position: absolute;
/*
_____ __________________ ___ _________________ __________________
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
*/
/*
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
| \| __| __| _ | | | ||_ _| | | | \| __|
| | | __| __| | | | |__| | | | | | | | | | __|
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
*/
/*
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
| _ | __ | __| | | | __| | | | | | | \| __|
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
*/
/*
_____________ ____________ ___ __ _____ __ _ __ __ _ _
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|_| /_/
*/
} }
/* line 166, jee.scss */ /* line 177, jee.scss */
#main .node-chapitre.node-teaser h2.node-title { #main .node-chapitre.node-teaser h2.node-title {
-webkit-transform: none; -webkit-transform: none;
-ms-transform: none; -ms-transform: none;
@@ -3966,9 +4002,14 @@ div.messages {
transition: 1s ease-out; transition: 1s ease-out;
-webkit-transition-property: -webkit-transform; -webkit-transition-property: -webkit-transform;
transition-property: transform; transition-property: transform;
z-index: 5;
} }
/* line 172, jee.scss */ /* line 184, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre { #main .node-chapitre.node-teaser > .content {
position: relative;
}
/* line 185, jee.scss */
#main .node-chapitre.node-teaser .texts {
opacity: 0; opacity: 0;
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
@@ -3976,103 +4017,86 @@ div.messages {
transition: 1s ease-out; transition: 1s ease-out;
-webkit-transition-property: opacity height; -webkit-transition-property: opacity height;
transition-property: opacity height; transition-property: opacity height;
position: absolute;
} }
/* line 177, jee.scss */ /* line 191, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie { #main .node-chapitre.node-teaser .field-name-field-partie {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
-webkit-transition: 1s ease-out 0.5s; -webkit-transition: 1s ease-in-out 0.1s;
transition: 1s ease-out 0.5s; transition: 1s ease-in-out 0.1s;
-webkit-transition-property: opacity -webkit-transform; -webkit-transition-property: opacity -webkit-transform;
transition-property: opacity transform; transition-property: opacity transform;
} }
/* line 183, jee.scss */ /* line 197, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) { #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) {
z-index: 2; z-index: 2;
opacity: 1; opacity: 1;
-webkit-transition-delay: 0;
transition-delay: 0;
} }
/* line 187, jee.scss */ /* line 201, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-type-text { #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-type-text {
opacity: 0; opacity: 0;
-webkit-transition: 1s ease-out 0.5s; -webkit-transition: 1s ease-out 0.9s;
transition: 1s ease-out 0.5s; transition: 1s ease-out 0.9s;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
transition-property: opacity; transition-property: opacity;
} }
/* line 192, jee.scss */ /* line 206, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-name-field-vignette { #main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-name-field-vignette {
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
} }
/* line 198, jee.scss */ /* line 209, jee.scss */
#main .node-chapitre.node-teaser .links {
opacity: 0;
-webkit-transition: 1s ease-out 1s;
transition: 1s ease-out 1s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
/* line 199, jee.scss */
#main .node-chapitre.node-teaser .links > * {
display: none;
}
/* line 203, jee.scss */
#main .node-chapitre.node-teaser:after { #main .node-chapitre.node-teaser:after {
opacity: 0; opacity: 0;
-webkit-transition: 3s ease-out; -webkit-transition: 2s ease-in;
transition: 3s ease-out; transition: 2s ease-in;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
transition-property: opacity; transition-property: opacity;
top: 1px;
left: 1px;
bottom: 2px;
right: 2px;
} }
/* line 216, jee.scss */ /* line 228, jee.scss */
#main .node-chapitre.node-teaser.previewed:after { #main .node-chapitre.node-teaser.previewed:after {
opacity: 1; opacity: 1;
top: 2em;
left: -12em;
right: -12em;
bottom: -30em;
} }
/* line 217, jee.scss */ /* line 235, jee.scss */
#main .node-chapitre.node-teaser.previewed h2.node-title { #main .node-chapitre.node-teaser.previewed h2.node-title {
-webkit-transform: scale(2, 2); -webkit-transform: scale(2, 2);
-ms-transform: scale(2, 2); -ms-transform: scale(2, 2);
transform: scale(2, 2); transform: scale(2, 2);
} }
/* line 218, jee.scss */ /* line 236, jee.scss */
#main .node-chapitre.node-teaser.previewed .field-name-field-comprendre { #main .node-chapitre.node-teaser.previewed .texts {
opacity: 1; opacity: 1;
height: 6em; height: 8em;
} }
/* line 219, jee.scss */ /* line 237, jee.scss */
#main .node-chapitre.node-teaser.previewed .links {
opacity: 1;
}
/* line 219, jee.scss */
#main .node-chapitre.node-teaser.previewed .links > * {
display: block;
}
/* line 220, jee.scss */
#main .node-chapitre.node-teaser.previewed .field-name-field-partie { #main .node-chapitre.node-teaser.previewed .field-name-field-partie {
opacity: 1; opacity: 1;
z-index: 0; z-index: 0;
} }
/* line 223, jee.scss */ /* line 240, jee.scss */
#main .node-chapitre.node-teaser.previewed .field-name-field-partie > .field { #main .node-chapitre.node-teaser.previewed .field-name-field-partie > .field {
opacity: 1; opacity: 1;
z-index: -1; z-index: -1;
cursor: default; cursor: default;
} }
/* line 228, jee.scss */ /* line 254, jee.scss */
#main .node-chapitre.node-teaser:after { #main .node-chapitre.node-teaser:after {
content: " "; content: " ";
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
top: 2em;
left: -12em;
right: -12em;
bottom: -30em;
z-index: -1; z-index: -1;
} }
/* line 242, jee.scss */ /* line 262, jee.scss */
#main .node-chapitre.node-teaser h2.node-title { #main .node-chapitre.node-teaser h2.node-title {
font-family: "epflulb"; font-family: "epflulb";
font-weight: normal; font-weight: normal;
@@ -4083,35 +4107,59 @@ div.messages {
z-index: 5; z-index: 5;
} }
@media only screen and (min-width: 64.063em) { @media only screen and (min-width: 64.063em) {
/* line 242, jee.scss */ /* line 262, jee.scss */
#main .node-chapitre.node-teaser h2.node-title { #main .node-chapitre.node-teaser h2.node-title {
font-size: 1.3em; font-size: 1.3em;
} }
} }
@media only screen and (min-width: 90.063em) { @media only screen and (min-width: 90.063em) {
/* line 242, jee.scss */ /* line 262, jee.scss */
#main .node-chapitre.node-teaser h2.node-title { #main .node-chapitre.node-teaser h2.node-title {
font-size: 1.8em; font-size: 1.8em;
} }
} }
/* line 258, jee.scss */ /* line 282, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre { #main .node-chapitre.node-teaser .field-name-field-comprendre {
max-width: 15em; min-width: 16em;
} }
/* line 259, jee.scss */ /* line 283, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre h1, #main .node-chapitre.node-teaser .field-name-field-comprendre h2, #main .node-chapitre.node-teaser .field-name-field-comprendre h3, #main .node-chapitre.node-teaser .field-name-field-comprendre h4, #main .node-chapitre.node-teaser .field-name-field-comprendre h5, #main .node-chapitre.node-teaser .field-name-field-comprendre h6 { #main .node-chapitre.node-teaser .field-name-field-comprendre h1, #main .node-chapitre.node-teaser .field-name-field-comprendre h2, #main .node-chapitre.node-teaser .field-name-field-comprendre h3, #main .node-chapitre.node-teaser .field-name-field-comprendre h4, #main .node-chapitre.node-teaser .field-name-field-comprendre h5, #main .node-chapitre.node-teaser .field-name-field-comprendre h6 {
display: none !important; display: none !important;
} }
/* line 261, jee.scss */ /* line 285, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre p { #main .node-chapitre.node-teaser .field-name-field-comprendre p {
margin: 0; margin: 0;
} }
/* line 264, jee.scss */ /* line 289, jee.scss */
#main .node-chapitre.node-teaser ul.links {
display: block;
margin: 0;
text-align: right;
z-index: 5;
position: relative;
width: 100%;
}
/* line 291, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore {
padding: 0;
}
/* line 293, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore 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;
}
/* line 305, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie { #main .node-chapitre.node-teaser .field-name-field-partie {
clear: both; clear: both;
padding-top: 1em; padding-top: 1em;
} }
/* line 268, jee.scss */ /* line 309, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-vignette { #main .node-chapitre.node-teaser .field-name-field-vignette {
position: relative; position: relative;
float: left; float: left;
@@ -4124,50 +4172,28 @@ div.messages {
background-repeat: no-repeat; background-repeat: no-repeat;
background-origin: center center; background-origin: center center;
} }
/* line 281, jee.scss */ /* line 322, jee.scss */
#main .node-chapitre.node-teaser .field-type-text { #main .node-chapitre.node-teaser .field-type-text {
min-width: 16em; min-width: 16em;
} }
/* line 282, jee.scss */ /* line 323, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-titre { #main .node-chapitre.node-teaser .field-name-field-titre {
font-family: "epflul"; font-family: "epflul";
font-size: 1.6em; font-size: 1.6em;
line-height: 1.1; line-height: 1.1;
} }
/* line 287, jee.scss */ /* line 328, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-sous-titre { #main .node-chapitre.node-teaser .field-name-field-sous-titre {
font-family: "epflul"; font-family: "epflul";
font-size: 1.4em; font-size: 1.4em;
line-height: 1.2; line-height: 1.2;
} }
/* line 292, jee.scss */ /* line 333, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-description { #main .node-chapitre.node-teaser .field-name-field-description {
font-size: 0.88em; font-size: 0.88em;
line-height: 1.2; line-height: 1.2;
} }
/* line 298, jee.scss */ /* line 339, jee.scss */
#main .node-chapitre.node-teaser ul.links {
margin: 0;
text-align: right;
z-index: 5;
position: relative;
}
/* line 300, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore {
padding: 0;
}
/* line 302, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore 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;
}
/* line 314, jee.scss */
#main .node-chapitre.node-teaser .line { #main .node-chapitre.node-teaser .line {
z-index: -1; z-index: -1;
position: absolute; position: absolute;
@@ -4180,147 +4206,147 @@ div.messages {
background-color: red; background-color: red;
opacity: 0.4; opacity: 0.4;
} }
/* line 328, jee.scss */ /* line 358, jee.scss */
#main #node-2::after { #main #node-2::after {
background-image: url(../assets/img/bgd-sol.svg); background-image: url(../assets/img/bgd-sol.svg);
} }
/* line 329, jee.scss */ /* line 359, jee.scss */
#main #node-2, #main #node-2 a { #main #node-2, #main #node-2 a {
color: #b24c14; color: #b24c14;
} }
/* line 330, jee.scss */ /* line 360, jee.scss */
#main #node-2 h2.node-title, #main #node-2 h2.node-title a { #main #node-2 h2.node-title, #main #node-2 h2.node-title a {
color: #d85509; color: #d85509;
} }
/* line 331, jee.scss */ /* line 361, jee.scss */
#main #node-2 .field-name-field-vignette { #main #node-2 .field-name-field-vignette {
background-image: url(../assets/img/shadow-sol.svg); background-image: url(../assets/img/shadow-sol.svg);
} }
/* line 332, jee.scss */ /* line 362, jee.scss */
#main #node-2 .line { #main #node-2 .line {
background-color: #ea5b0c; background-color: #ea5b0c;
} }
/* line 336, jee.scss */ /* line 366, jee.scss */
#main #node-3::after { #main #node-3::after {
background-image: url(../assets/img/bgd-dph.svg); background-image: url(../assets/img/bgd-dph.svg);
} }
/* line 337, jee.scss */ /* line 367, jee.scss */
#main #node-3, #main #node-3 a { #main #node-3, #main #node-3 a {
color: #686b00; color: #686b00;
} }
/* line 338, jee.scss */ /* line 368, jee.scss */
#main #node-3 h2.node-title, #main #node-3 h2.node-title a { #main #node-3 h2.node-title, #main #node-3 h2.node-title a {
color: #afaf00; color: #afaf00;
} }
/* line 339, jee.scss */ /* line 369, jee.scss */
#main #node-3 .field-name-field-vignette { #main #node-3 .field-name-field-vignette {
background-image: url(../assets/img/shadow-dph.svg); background-image: url(../assets/img/shadow-dph.svg);
} }
/* line 340, jee.scss */ /* line 370, jee.scss */
#main #node-3 .line { #main #node-3 .line {
background-color: #cecd00; background-color: #cecd00;
} }
/* line 344, jee.scss */ /* line 374, jee.scss */
#main #node-4::after { #main #node-4::after {
background-image: url(../assets/img/bgd-sub.svg); background-image: url(../assets/img/bgd-sub.svg);
} }
/* line 345, jee.scss */ /* line 375, jee.scss */
#main #node-4, #main #node-4 a { #main #node-4, #main #node-4 a {
color: #b71330; color: #b71330;
} }
/* line 346, jee.scss */ /* line 376, jee.scss */
#main #node-4 h2.node-title, #main #node-4 h2.node-title a { #main #node-4 h2.node-title, #main #node-4 h2.node-title a {
color: #cd0734; color: #cd0734;
} }
/* line 347, jee.scss */ /* line 377, jee.scss */
#main #node-4 .field-name-field-vignette { #main #node-4 .field-name-field-vignette {
background-image: url(../assets/img/shadow-sub.svg); background-image: url(../assets/img/shadow-sub.svg);
} }
/* line 348, jee.scss */ /* line 378, jee.scss */
#main #node-4 .line { #main #node-4 .line {
background-color: #de003a; background-color: #de003a;
} }
/* line 352, jee.scss */ /* line 382, jee.scss */
#main #node-5::after { #main #node-5::after {
background-image: url(../assets/img/bgd-bc.svg); background-image: url(../assets/img/bgd-bc.svg);
} }
/* line 353, jee.scss */ /* line 383, jee.scss */
#main #node-5, #main #node-5 a { #main #node-5, #main #node-5 a {
color: #033d6f; color: #033d6f;
} }
/* line 354, jee.scss */ /* line 384, jee.scss */
#main #node-5 h2.node-title, #main #node-5 h2.node-title a { #main #node-5 h2.node-title, #main #node-5 h2.node-title a {
color: #024b87; color: #024b87;
} }
/* line 355, jee.scss */ /* line 385, jee.scss */
#main #node-5 .field-name-field-vignette { #main #node-5 .field-name-field-vignette {
background-image: url(../assets/img/shadow-bc.svg); background-image: url(../assets/img/shadow-bc.svg);
} }
/* line 356, jee.scss */ /* line 386, jee.scss */
#main #node-5 .line { #main #node-5 .line {
background-color: #0066b1; background-color: #0066b1;
} }
/* line 360, jee.scss */ /* line 390, jee.scss */
#main #node-6::after { #main #node-6::after {
background-image: url(../assets/img/bgd-opp.svg); background-image: url(../assets/img/bgd-opp.svg);
} }
/* line 361, jee.scss */ /* line 391, jee.scss */
#main #node-6, #main #node-6 a { #main #node-6, #main #node-6 a {
color: #7f1965; color: #7f1965;
} }
/* line 362, jee.scss */ /* line 392, jee.scss */
#main #node-6 h2.node-title, #main #node-6 h2.node-title a { #main #node-6 h2.node-title, #main #node-6 h2.node-title a {
color: #941b80; color: #941b80;
} }
/* line 363, jee.scss */ /* line 393, jee.scss */
#main #node-6 .field-name-field-vignette { #main #node-6 .field-name-field-vignette {
background-image: url(../assets/img/shadow-opp.svg); background-image: url(../assets/img/shadow-opp.svg);
} }
/* line 364, jee.scss */ /* line 394, jee.scss */
#main #node-6 .line { #main #node-6 .line {
background-color: #af1380; background-color: #af1380;
} }
/* line 368, jee.scss */ /* line 398, jee.scss */
#main #node-7::after { #main #node-7::after {
background-image: url(../assets/img/bgd-dub.svg); background-image: url(../assets/img/bgd-dub.svg);
} }
/* line 369, jee.scss */ /* line 399, jee.scss */
#main #node-7, #main #node-7 a { #main #node-7, #main #node-7 a {
color: #22742c; color: #22742c;
} }
/* line 370, jee.scss */ /* line 400, jee.scss */
#main #node-7 h2.node-title, #main #node-7 h2.node-title a { #main #node-7 h2.node-title, #main #node-7 h2.node-title a {
color: #288d80; color: #288d80;
} }
/* line 371, jee.scss */ /* line 401, jee.scss */
#main #node-7 .field-name-field-vignette { #main #node-7 .field-name-field-vignette {
background-image: url(../assets/img/shadow-dub.svg); background-image: url(../assets/img/shadow-dub.svg);
} }
/* line 372, jee.scss */ /* line 402, jee.scss */
#main #node-7 .line { #main #node-7 .line {
background-color: #62a530; background-color: #62a530;
} }
/* line 376, jee.scss */ /* line 406, jee.scss */
#main #node-8::after { #main #node-8::after {
background-image: url(../assets/img/bgd-juso.svg); background-image: url(../assets/img/bgd-juso.svg);
} }
/* line 377, jee.scss */ /* line 407, jee.scss */
#main #node-8, #main #node-8 a { #main #node-8, #main #node-8 a {
color: #0b7f8a; color: #0b7f8a;
} }
/* line 378, jee.scss */ /* line 408, jee.scss */
#main #node-8 h2.node-title, #main #node-8 h2.node-title a { #main #node-8 h2.node-title, #main #node-8 h2.node-title a {
color: #009aa8; color: #009aa8;
} }
/* line 379, jee.scss */ /* line 409, jee.scss */
#main #node-8 .field-name-field-vignette { #main #node-8 .field-name-field-vignette {
background-image: url(../assets/img/shadow-juso.svg); background-image: url(../assets/img/shadow-juso.svg);
} }
/* line 380, jee.scss */ /* line 410, jee.scss */
#main #node-8 .line { #main #node-8 .line {
background-color: #33b4b5; background-color: #33b4b5;
} }
/* line 383, jee.scss */ /* line 413, jee.scss */
#main .chapter-wrapper { #main .chapter-wrapper {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -4329,24 +4355,32 @@ div.messages {
right: 0; right: 0;
} }
/* line 389, jee.scss */ /* __________ ____ ________________
/ ____/ __ \/ __ \/_ __/ ____/ __ \
/ /_ / / / / / / / / / / __/ / /_/ /
/ __/ / /_/ / /_/ / / / / /___/ _, _/
/_/ \____/\____/ /_/ /_____/_/ |_|
*/
/* line 426, jee.scss */
#footer { #footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
/* line 392, jee.scss */ /* line 429, jee.scss */
#footer .block { #footer .block {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
/* line 398, jee.scss */ /*
.backdom { __ ____________ ______
display: none; / |/ / _/ ___// ____/
} / /|_/ // / \__ \/ /
/ / / // / ___/ / /___
/* line 402, jee.scss */ /_/ /_/___//____/\____/
*/
/* line 441, jee.scss */
#fullscreen-btn { #fullscreen-btn {
position: fixed; position: fixed;
top: 20px; top: 20px;
@@ -4354,7 +4388,13 @@ div.messages {
z-index: 1000; z-index: 1000;
} }
/* line 409, jee.scss */ /* ____ __________ __ ________
/ __ \/ ____/ __ )/ / / / ____/
/ / / / __/ / __ / / / / / __
/ /_/ / /___/ /_/ / /_/ / /_/ /
/_____/_____/_____/\____/\____/
*/
/* line 454, jee.scss */
#fps { #fps {
position: fixed; position: fixed;
top: 20px; top: 20px;
@@ -4362,7 +4402,7 @@ div.messages {
z-index: 1000; z-index: 1000;
} }
/* line 415, jee.scss */ /* line 460, jee.scss */
#nav-cursor { #nav-cursor {
position: absolute; position: absolute;
width: 6px; width: 6px;
sites/all/themes/gui/jee/css/jee.scss
+102 -57
View File
@@ -140,8 +140,9 @@ $animeLogoDuration:8s;
div.messages{ div.messages{
position:absolute; position:absolute;
top:20px; right:20px; top:20px; right:20px;
width:250px; max-height:30%; width:500px; max-height:60%;
overflow-y:auto; overflow-y:auto;
z-index: 1000;
} }
#main{ #main{
@@ -157,66 +158,82 @@ div.messages{
.node-chapitre.node-teaser{ .node-chapitre.node-teaser{
position:absolute; position:absolute;
// transition:0.1s ease-out;
// transition-property:transform;
// animation-fill-mode: forwards;
// INTERACTIVITÉ - - - - - - - - - - - -- /*
// ----- DEFAULT MODE ---- _____ __________________ ___ _________________ __________________
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
*/
/*
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
| \| __| __| _ | | | ||_ _| | | | \| __|
| | | __| __| | | | |__| | | | | | | | | | __|
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
*/
h2.node-title{ h2.node-title{
transform:none; transform:none;
transform-origin:bottom center; transform-origin:bottom center;
transition:1s ease-out; transition:1s ease-out;
transition-property:transform; transition-property:transform;
z-index:5;
} }
.field-name-field-comprendre{ >.content{position:relative;}
.texts{
opacity:0; height:1px; overflow:hidden; opacity:0; height:1px; overflow:hidden;
transition:1s ease-out; transition:1s ease-out;
transition-property:opacity height; transition-property:opacity height;
position:absolute;
} }
.field-name-field-partie{ .field-name-field-partie{
opacity:0; opacity:0;
position:absolute; position:absolute;
transition:1s ease-out 0.5s; transition:1s ease-in-out 0.1s;
transition-property: opacity transform; transition-property: opacity transform;
// just let see the field vignette of first partie // just let see the field vignette of first partie
&:nth-child(3){ &:nth-child(2){
z-index:2; z-index:2;
opacity:1; opacity:1;
transition-delay:0; // transition-delay:0;
>.field-type-text{ >.field-type-text{
opacity:0; opacity:0;
transition:1s ease-out 0.5s; transition:1s ease-out 0.9s;
transition-property: opacity; transition-property: opacity;
} }
>.field-name-field-vignette{cursor:pointer;z-index:2;} >.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{ &:after{
opacity:0; opacity:0;
// display:none; transition: 2s ease-in;
transition: 3s ease-out;
transition-property:opacity; transition-property:opacity;
top:1px; left:1px; bottom:2px; right:2px;
} }
.line{ .line{
// transition: 0.5s ease-out; // transition: 0.1s ease-out;
// transition-property:height transform; // transition-property:height transform;
} }
// ----- PREVIEW MODE ------ /*
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
| _ | __ | __| | | | __| | | | | | | \| __|
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
*/
&.previewed{ &.previewed{
&:after{opacity:1;} &:after{
opacity:1;
$pad:-2em;
top:-$pad;
left:$pad*6; right:$pad*6;
bottom:$pad*15;
}
h2.node-title{transform:scale(2,2);} h2.node-title{transform:scale(2,2);}
.field-name-field-comprendre{opacity:1; height:6em;} .texts{opacity:1; height:8em;}
.links{opacity:1;>*{display:block;}}
.field-name-field-partie{ .field-name-field-partie{
opacity:1; z-index:0; opacity:1; z-index:0;
// display all fields inside each parties // display all fields inside each parties
@@ -224,18 +241,21 @@ div.messages{
} }
} }
// ------- GENERALS (non interactive) - - - - - - - - - - - - - - - - - -
/*
_____________ ____________ ___ __ _____ __ _ __ __ _ _
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|_| /_/
*/
&:after{ // background &:after{ // background
content:" "; content:" ";
background-size:contain; background-size:contain;
// background-clip: content-box;
background-repeat: no-repeat; background-repeat: no-repeat;
position:absolute; position:absolute;
$pad:-2em;
top:-$pad;
left:$pad*6; right:$pad*6;
bottom:$pad*15;
// border: 1px solid blue;
z-index:-1; z-index:-1;
} }
@@ -255,10 +275,31 @@ div.messages{
z-index: 5; z-index: 5;
} }
.texts{
// position:relative;
}
.field-name-field-comprendre{ .field-name-field-comprendre{
h1,h2,h3,h4,h5,h6{display:none!important;} h1,h2,h3,h4,h5,h6{display:none!important;}
max-width:15em; // max-width:15em;
p{margin:0;} 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;
}
}
} }
.field-name-field-partie{clear:both; padding-top:1em;} .field-name-field-partie{clear:both; padding-top:1em;}
@@ -295,22 +336,6 @@ div.messages{
line-height:1.2; 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;
}
}
}
.line{ .line{
z-index:-1; z-index:-1;
position:absolute; position:absolute;
@@ -322,7 +347,12 @@ div.messages{
} // node-chapitre } // node-chapitre
// COLORS BY NODE - - - - - - - - - - - - - - - - - - - - - /*
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
| | | | | | __ | __| | __ | | | | | | | \| __|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
*/
//SOL //SOL
#node-2{ #node-2{
&::after{ background-image : url(../assets/img/bgd-sol.svg); } &::after{ background-image : url(../assets/img/bgd-sol.svg); }
@@ -386,6 +416,13 @@ div.messages{
} }
} // main } // main
/* __________ ____ ________________
/ ____/ __ \/ __ \/_ __/ ____/ __ \
/ /_ / / / / / / / / / / __/ / /_/ /
/ __/ / /_/ / /_/ / / / / /___/ _, _/
/_/ \____/\____/ /_/ /_____/_/ |_|
*/
#footer{ #footer{
position:fixed; position:fixed;
bottom:0; right:0; bottom:0; right:0;
@@ -394,18 +431,26 @@ div.messages{
vertical-align: top; vertical-align: top;
} }
} }
/*
.backdom{ __ ____________ ______
display:none; / |/ / _/ ___// ____/
} / /|_/ // / \__ \/ /
/ / / // / ___/ / /___
/_/ /_/___//____/\____/
*/
#fullscreen-btn{ #fullscreen-btn{
position:fixed; position:fixed;
top:20px; left:20px; top:20px; left:20px;
z-index: 1000; z-index: 1000;
} }
// DEBUG /* ____ __________ __ ________
/ __ \/ ____/ __ )/ / / / ____/
/ / / / __/ / __ / / / / / __
/ /_/ / /___/ /_/ / /_/ / /_/ /
/_____/_____/_____/\____/\____/
*/
#fps{ #fps{
position:fixed; position:fixed;
top:20px; right:20px; top:20px; right:20px;
sites/all/themes/gui/jee/js/jee.js
+89 -74
View File
@@ -47,18 +47,16 @@ jQuery(document).ready(function($) {
// launchIntoFullscreen(document.documentElement); // the whole page // launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("root")); // any individual element launchIntoFullscreen(document.getElementById("root")); // any individual element
}); });
}; };
function initDebug(){ function initDebug(){
$('<p>').attr('id', 'fps').appendTo(_$body); $('<p>').attr('id', 'fps').appendTo(_$container);
_fps = document.getElementById('fps'); _fps = document.getElementById('fps');
requestAnimationFrame(displayFps); requestAnimationFrame(displayFps);
_$nav_cursor = $('<div id="nav-cursor"></div>').appendTo('body'); _$nav_cursor = $('<div id="nav-cursor"></div>').appendTo(_$container);
moveDebugCursor(); moveDebugCursor();
};
};
function displayFps(){ function displayFps(){
requestAnimationFrame(displayFps); requestAnimationFrame(displayFps);
@@ -75,7 +73,6 @@ jQuery(document).ready(function($) {
left:_nav_pos.x+_center.x+"px", left:_nav_pos.x+_center.x+"px",
top:_nav_pos.y+_center.y+"px" top:_nav_pos.y+_center.y+"px"
}); });
}; };
function initChapters(){ function initChapters(){
@@ -213,12 +210,15 @@ jQuery(document).ready(function($) {
this.trans = {x:0, y:0}; this.trans = {x:0, y:0};
this.ease = randB(0.05, 0.3); this.ease = randB(0.05, 0.3);
//preview
this.is_previewed = false;
//parties //parties
this.$parties = $('.field-name-field-partie', e); this.$parties = $('.field-name-field-partie', e);
this.parts_pos = {xs:new Array(), ys:new Array()};
this.lines = new Array(); this.lines = new Array();
this.linesAnimeInterval = null; this.linesAnimeStartTime = 0,
this.linesAnimeCounter = 0; this.linesAnimeDuration = 2000; // milli sec
this.linesAnimeTime = 2; // sec
// prototypes // prototypes
if (typeof Chapter.initialized == "undefined") { if (typeof Chapter.initialized == "undefined") {
@@ -290,8 +290,13 @@ jQuery(document).ready(function($) {
}; };
Chapter.prototype.preview = function(e){ Chapter.prototype.preview = function(e){
// don't relaunch preview more that one time
if(this.is_previewed) return;
console.log('preview', this.i); console.log('preview', this.i);
this.is_previewed = true;
// close other chapters // close other chapters
for (var i = _chapitres_len - 1; i >= 0; i--) { for (var i = _chapitres_len - 1; i >= 0; i--) {
if(i !== this.i) if(i !== this.i)
@@ -299,51 +304,50 @@ jQuery(document).ready(function($) {
}; };
// define randomly position of parties // define randomly position of parties
var px, py, tXt = new Array(), tYt = new Array(); this.resetPartsPos();
for (var i = 0; i < 3; i++) {
switch(i){
case 0:
px=randB(-30, 30); py=randB(40, 60);
break;
case 1:
px=randB(180, 280); py=randB(200,300);
break;
case 2:
px=randB(-280, -180); py=randB(380,480);
break;
}
tXt.push(px);
tYt.push(py);
};
console.log("tXt", tXt);
console.log("tYt", tYt);
tXt = shuffleArray(tXt);
tYt = shuffleArray(tYt);
// apply new position to parties // apply new position to parties
var that = this;
this.$parties.each(function(i, e) { this.$parties.each(function(i, e) {
setTimeout( setTimeout(
(function(i, e, tXt, tYt){ (function(i, e, xs, ys){
return function(){ return function(){
$(e) $(e)
.css({ .css({
translate:[tXt[i], tYt[i]], transform:"translate3d("+xs[i]+"px,"+ys[i]+"px,0)",
}); });
} }
}(i, e, tXt, tYt)), }(i, e, that.parts_pos.xs, that.parts_pos.ys)),
10); 10);
}); // each $parties }); // each $parties
this.$e.addClass('previewed'); this.$e.addClass('previewed');
this.animeLines(); requestAnimationFrame(this.animeLines.bind(this));
};
Chapter.prototype.resetPartsPos = function(){
this.parts_pos = {xs:new Array(), ys:new Array()};
for (var i = 0; i < 3; i++) {
switch(i){
case 0:
this.parts_pos.xs.push(randB(-30,30)); this.parts_pos.ys.push(randB(90,110)); break;
case 1:
this.parts_pos.xs.push(randB(180,280)); this.parts_pos.ys.push(randB(250,350)); break;
case 2:
this.parts_pos.xs.push(randB(-280,-180)); this.parts_pos.ys.push(randB(430,530)); break;
}
};
this.parts_pos.xs = shuffleArray(this.parts_pos.xs);
this.parts_pos.ys = shuffleArray(this.parts_pos.ys);
}; };
Chapter.prototype.closePreview = function(){ Chapter.prototype.closePreview = function(){
this.$e.removeClass('previewed') this.$e.removeClass('previewed')
.find('.field-name-field-partie') .find('.field-name-field-partie')
.css({transform:"none"}); .css({transform:"none"});
this.animeLines(); requestAnimationFrame(this.animeLines.bind(this));
this.is_previewed = false;
}; };
Chapter.prototype.drawLines = function(){ Chapter.prototype.drawLines = function(){
@@ -354,52 +358,49 @@ jQuery(document).ready(function($) {
}; };
}; };
Chapter.prototype.animeLines = function(){ Chapter.prototype.animeLines = function(timestamp){
this.linesAnimeCounter = 0; // console.log("anime line "+this.nid);
this.linesAnimeInterval = setInterval( // get the time on first anime launch
(function(_this){ if(this.linesAnimeStartTime === 0)
return function(){ this.linesAnimeStartTime = timestamp;
// console.log("partie pos : ", _this.$parties.eq(2).position());
// get the lines length // limit the animation time
var l, a, pos1, pos2; if(timestamp - this.linesAnimeStartTime < this.linesAnimeDuration){
for (var i = 0; i < _this.lines.length; i++) { requestAnimationFrame(this.animeLines.bind(this));
pos1 = _this.$parties.eq(i).position(); }else{
pos2 = _this.$parties.eq(i+1).position(); this.linesAnimeStartTime = 0;
}
l = Math.sqrt( // get the lines length
Math.pow( var l, a, pos1, pos2;
pos2.left - pos1.left for (var i = 0; i < this.lines.length; i++) {
,2 pos1 = this.$parties.eq(i).position();
) pos2 = this.$parties.eq(i+1).position();
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// get the rotation l = Math.sqrt(
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l); Math.pow(
if(pos2.left > pos1.left) pos2.left - pos1.left
a *= -1; ,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// console.log("a = "+a); // get the rotation
_this.lines[i].$line.css({ a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
'height':l, if(pos2.left > pos1.left)
rotate:a+"deg" a *= -1;
});
}; // console.log("a = "+a);
this.lines[i].$line.css({
'height':l,
transform:"rotate3d(0,0,1,"+a+"deg)"
});
console.log("anime line interval"); };
// limit the naimation time
_this.linesAnimeCounter ++;
if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
clearInterval(_this.linesAnimeInterval);
};
}(this)),
_fps);
}; };
Chapter.prototype.loadNode = function(e){ Chapter.prototype.loadNode = function(e){
@@ -441,6 +442,20 @@ jQuery(document).ready(function($) {
return o; return o;
}; };
if (!Date.now) {
Date.now = function now() {
return new Date().getTime();
};
}
/*
_ _ __
(_)___ (_) /_
/ / __ \/ / __/
/ / / / / / /_
/_/_/ /_/_/\__/
*/
init(); init();
}); });
sites/all/themes/gui/jee/templates/node--chapitre.tpl.php
+17 -98
View File
@@ -1,102 +1,21 @@
<?php <section id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - $title: the (sanitized) title of the node.
* - $content: An array of node items. Use render($content) to print them all,
* or print a subset such as render($content['field_example']). Use
* hide($content['field_example']) to temporarily suppress the printing of a
* given element.
* - $user_picture: The node author's picture from user-picture.tpl.php.
* - $date: Formatted creation date. Preprocess functions can reformat it by
* calling format_date() with the desired parameters on the $created variable.
* - $name: Themed username of node author output from theme_username().
* - $node_url: Direct URL of the current node.
* - $display_submitted: Whether submission information should be displayed.
* - $submitted: Submission information created from $name and $date during
* template_preprocess_node().
* - $classes: String of classes that can be used to style contextually through
* CSS. It can be manipulated through the variable $classes_array from
* preprocess functions. The default values can be one or more of the
* following:
* - node: The current template type; for example, "theming hook".
* - node-[type]: The current node type. For example, if the node is a
* "Blog entry" it would result in "node-blog". Note that the machine
* name will often be in a short form of the human readable label.
* - node-teaser: Nodes in teaser form.
* - node-preview: Nodes in preview mode.
* The following are controlled through the node publishing options.
* - node-promoted: Nodes promoted to the front page.
* - node-sticky: Nodes ordered above other non-sticky nodes in teaser
* listings.
* - node-unpublished: Unpublished nodes visible only to administrators.
* - $title_prefix (array): An array containing additional output populated by
* modules, intended to be displayed in front of the main title tag that
* appears in the template.
* - $title_suffix (array): An array containing additional output populated by
* modules, intended to be displayed after the main title tag that appears in
* the template.
*
* Other variables:
* - $node: Full node object. Contains data that may not be safe.
* - $type: Node type; for example, story, page, blog, etc.
* - $comment_count: Number of comments attached to the node.
* - $uid: User ID of the node author.
* - $created: Time the node was published formatted in Unix timestamp.
* - $classes_array: Array of html class attribute values. It is flattened
* into a string within the variable $classes.
* - $zebra: Outputs either "even" or "odd". Useful for zebra striping in
* teaser listings.
* - $id: Position of the node. Increments each time it's output.
*
* Node status variables:
* - $view_mode: View mode; for example, "full", "teaser".
* - $teaser: Flag for the teaser state (shortcut for $view_mode == 'teaser').
* - $page: Flag for the full page state.
* - $promote: Flag for front page promotion state.
* - $sticky: Flags for sticky post setting.
* - $status: Flag for published status.
* - $comment: State of comment settings for the node.
* - $readmore: Flags true if the teaser content of the node cannot hold the
* main body content.
* - $is_front: Flags true when presented in the front page.
* - $logged_in: Flags true when the current user is a logged-in member.
* - $is_admin: Flags true when the current user is an administrator.
*
* Field variables: for each field instance attached to the node a corresponding
* variable is defined; for example, $node->body becomes $body. When needing to
* access a field's raw values, developers/themers are strongly encouraged to
* use these variables. Otherwise they will have to explicitly specify the
* desired field language; for example, $node->body['en'], thus overriding any
* language negotiation rule that was previously applied.
*
* @see template_preprocess()
* @see template_preprocess_node()
* @see template_process()
*
* @ingroup themeable
*/
?>
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<?php if (!$page): ?> <?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?> <?php endif; ?>
<?php <div class="content">
print render($title_suffix); <?php
// We hide the comments and links now so that we can render them later.
// We hide the comments and links now so that we can render them later. // dsm($content, "content");
hide($content['comments']); hide($content['comments']);
hide($content['links']); hide($content['links']);
print render($content); hide($content['field_comprendre']);
?>
<div class="texts">
<?php
print render($content['field_comprendre']);
print render($content['links']); print render($content['links']);
?> ?>
</div>
</div> <?php print render($content); ?>
</div>
</section>