From 0509d74884d1614dbb3c9b772b3d1e5dd394a245 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 28 Feb 2017 17:28:05 +0100 Subject: [PATCH] started responsive dev for mobile --- .../clameurs/css/dist/styles.css | 260 +++++++++++------- .../figureslibres/clameurs/css/styles.scss | 186 ++++++++++--- .../clameurs/js/dist/script.min.js | 2 +- .../figureslibres/clameurs/js/script.js | 15 +- 4 files changed, 320 insertions(+), 143 deletions(-) diff --git a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css index 4bc78458..25fef4aa 100755 --- a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css +++ b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css @@ -2,6 +2,11 @@ * Primary Drupal Styles * Author: Bachir Soussi Chiadmi */ +/* between 0 & 640px */ +/* between 640px & 1000px */ +/* between 1001px & 1025px */ +/* between 1026px & 1920px */ +/* between 1920px & infinity */ body { font-size: 16px; font-family: "aileron", Arial, "MS Trebuchet", sans-serif; } @@ -36,29 +41,33 @@ input { #header, #main, #footer { padding: 0; } -#container { - width: 1024px; - margin: 0 auto; } - #header { - position: fixed; width: 100%; - max-height: 400px; z-index: 20; background-color: rgba(255, 255, 255, 0.95); background-image: url(../../images/fond-trame-logo-lite.png); background-repeat: no-repeat; background-position: center top; - background-size: contain; } + background-size: contain; + max-height: 200px; } + @media only screen and (min-width: 62.5625em) { + #header { + position: fixed; } } + @media only screen and (min-width: 62.5625em) { + #header { + max-height: 400px; } } #header hgroup.logo { - width: 1024px; + width: 95%; margin: 0 auto; padding: 1em 0 0; } + @media only screen and (min-width: 62.5625em) { + #header hgroup.logo { + max-width: 1000px; } } #header h1 { margin: 0; } #header h1 a { display: block; - height: 300px; + height: 120px; background-image: url(../../images/logo.png); background-size: contain; background-position: center; @@ -66,15 +75,27 @@ input { text-indent: -2000px; overflow: hidden; margin: 0; } + @media only screen and (min-width: 62.5625em) { + #header h1 a { + height: 320px; } } #header h2 { text-align: center; - color: #20c498; } + color: #20c498; + font-size: 1em; } + @media only screen and (min-width: 62.5625em) { + #header h2 { + font-size: 2em; } } -#main { - padding-top: 400px; } - #main > .region { - width: 1024px; - margin: 0 auto; } +@media only screen and (min-width: 62.5625em) { + #main { + padding-top: 400px; } } + +#main > .region { + width: 95%; + margin: 0 auto; } + @media only screen and (min-width: 62.5625em) { + #main > .region { + max-width: 1000px; } } #node-63 { padding: 1em 0; } @@ -96,7 +117,11 @@ input { font-weight: 500; } #thematique-anchor-links { + display: none; padding: 1em 0; } + @media only screen and (min-width: 62.5625em) { + #thematique-anchor-links { + display: block; } } #thematique-anchor-links ul { display: -ms-flexbox; display: flex; @@ -171,14 +196,21 @@ input { .node-thematique::before { position: absolute; content: " "; - width: 110%; - height: 110%; - top: -5%; - left: -5%; z-index: -1; background-position: center; - background-size: contain; - background-repeat: no-repeat; } + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 100%; + top: 0; + left: 0; } + @media only screen and (min-width: 62.5625em) { + .node-thematique::before { + background-size: contain; + width: 110%; + height: 110%; + top: -5%; + left: -5%; } } .node-thematique.node-32::before { background-image: url(../../images/fond-theme-0-flat.png); } .node-thematique.node-32.en_attente::before { @@ -302,21 +334,26 @@ input { .node-thematique > h2 { font-size: 3em; font-weight: 400; - position: relative; } + position: relative; + margin: 2em 0 0; + padding: 0 2em 0 0; } + @media only screen and (min-width: 62.5625em) { + .node-thematique > h2 { + padding: 0; } } .node-thematique > h2 span { position: absolute; top: -170px; } .node-thematique .content { letter-spacing: -0.25em; } - .node-thematique .content .field-name-field-emvideo img { - width: 100%; } .node-thematique .content > * { letter-spacing: normal; } .node-thematique .content article.main { - display: inline-block; - vertical-align: top; - width: 69.5%; overflow: hidden; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content article.main { + display: inline-block; + vertical-align: top; + width: 69.5%; } } .node-thematique .content article.main .field-name-body { position: relative; z-index: 3; } @@ -324,34 +361,46 @@ input { padding: 0 1em 0 0; } .node-thematique .content article.main .field-name-body .summary { position: relative; - height: 5.75em; - overflow: hidden; - background-color: #fff; + background-color: rgba(255, 255, 255, 0.6); transition: background-color 0.5 ease-in-out; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content article.main .field-name-body .summary { + height: 5.75em; + overflow: hidden; } } .node-thematique .content article.main .field-name-body .summary p { font-size: 1.1em; padding: 0.5em 0.5em 0.5em 0; font-weight: 500; } .node-thematique .content article.main .field-name-body .value { + display: none; position: absolute; height: 1px; margin-bottom: 0; transition: height 0.5s ease-in-out; background-color: #fff; overflow: hidden; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content article.main .field-name-body .value { + display: block; } } .node-thematique .content article.main .field-name-body .value p { font-size: 1em; padding: 0.5em; } - .node-thematique .content article.main .field-name-body:hover .summary { - background-color: #fff; } - .node-thematique .content article.main .field-name-body:hover .value { - height: 700px; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content article.main .field-name-body:hover .summary { + background-color: #fff; } + .node-thematique .content article.main .field-name-body:hover .value { + height: 700px; } } .node-thematique .content article.main .field-name-body p { padding: 0 0 1em; margin: 0; } .node-thematique .content article.main .group-video { - position: relative; - min-height: 432px; } + position: relative; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content article.main .group-video { + min-height: 432px; } } + .node-thematique .content article.main .group-video .field-name-field-emvideo img { + max-width: 100%; + height: auto; } .node-thematique .content article.main .group-video .field-name-field-emvideo a { display: block; line-height: 0; } @@ -390,13 +439,18 @@ input { .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { opacity: 1; } .node-thematique .content aside.right { - display: inline-block; - vertical-align: top; - width: 30.5%; } - .node-thematique .content aside.right .field-name-field-eclairages { - padding-left: 1em; } - .node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) { - padding-bottom: 1.2em; } + margin-top: 1.2em; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content aside.right { + display: inline-block; + vertical-align: top; + width: 30.5%; + margin-top: 0; } } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content aside.right .field-name-field-eclairages { + padding-left: 1em; } } + .node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) { + padding-bottom: 1.2em; } .node-thematique .content aside.right .node-documentair { min-height: 160px; background-color: #fff; } @@ -413,7 +467,7 @@ input { left: 0; width: 90%; height: 80%; - margin: 5%; } + margin: 15px; } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc { font-size: 1em; font-weight: 600; @@ -434,6 +488,9 @@ input { background-color: rgba(255, 255, 255, 0.9); opacity: 0; transition: opacity 0.3s ease-in-out; } + .node-thematique .content aside.right .node-documentair .content .group-video img { + width: 100%; + height: auto; } .node-thematique .content aside.right .node-documentair .content .group-video a { display: block; line-height: 0; } @@ -454,7 +511,10 @@ input { background-color: #fff; opacity: 0.8; } .node-thematique .content aside.bottom { - padding-top: 0.6em; } + padding-top: 1.2em; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content aside.bottom { + padding-top: 0.6em; } } .node-thematique .content aside.bottom .field-name-field-episodes .field-label { font-size: 1em; font-weight: 600; @@ -462,58 +522,64 @@ input { background-color: rgba(255, 255, 255, 0.9); display: inline-block; margin-bottom: 0.3em; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: justify; - justify-content: space-between; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { - display: block; - width: 19%; - background-color: #fff; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { - position: relative; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt { - cursor: pointer; - pointer-events: none; - box-sizing: border-box; - position: absolute; - z-index: 2; - overflow: hidden; - top: 0; - left: 0; - width: 90%; - height: 80%; - margin: 5%; - padding: 5%; - background-color: rgba(255, 255, 255, 0.9); - opacity: 1; - transition: opacity,background-color 0.3s ease-in-out; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { - font-size: 4em; - font-weight: 800; - font-style: italic; - text-align: center; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a { - display: block; - line-height: 0; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt { - opacity: 0.9; - background-color: rgba(255, 255, 255, 0.3); } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content { - position: relative; } - .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: " "; - z-index: 10; - background-color: #fff; - opacity: 0.8; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: justify; + justify-content: space-between; } } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { + display: block; + background-color: #fff; } + @media only screen and (min-width: 62.5625em) { + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { + width: 19%; } } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { + position: relative; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt { + cursor: pointer; + pointer-events: none; + box-sizing: border-box; + position: absolute; + z-index: 2; + overflow: hidden; + top: 0; + left: 0; + width: 90%; + height: 80%; + margin: 5%; + padding: 5%; + background-color: rgba(255, 255, 255, 0.9); + opacity: 1; + transition: opacity,background-color 0.3s ease-in-out; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { + font-size: 4em; + font-weight: 800; + font-style: italic; + text-align: center; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img { + width: 100%; + height: auto; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a { + display: block; + line-height: 0; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt { + opacity: 0.9; + background-color: rgba(255, 255, 255, 0.3); } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content { + position: relative; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: " "; + z-index: 10; + background-color: #fff; + opacity: 0.8; } .node-thematique.en_attente .content > .main { position: relative; } .node-thematique.en_attente .content > .main::before { diff --git a/sites/all/themes/figureslibres/clameurs/css/styles.scss b/sites/all/themes/figureslibres/clameurs/css/styles.scss index bd22622d..f78007bc 100755 --- a/sites/all/themes/figureslibres/clameurs/css/styles.scss +++ b/sites/all/themes/figureslibres/clameurs/css/styles.scss @@ -3,6 +3,50 @@ * Author: Bachir Soussi Chiadmi */ + @function lower-bound($range) { + @if length($range) <= 0 { + @return 0; + } + @return nth($range, 1); + } + + @function upper-bound($range) { + @if length($range) < 2 { + @return 999999999999; + } + @return nth($range, 2); + } + + @function em-calc($px-value, $rem-base: 16) { + $value: $px-value / $rem-base; + @return $value * 1em; + } + + $small-range: (0, em-calc(640)); /* between 0 & 640px */ + $medium-range: (em-calc(641), em-calc(1000)); /* between 640px & 1000px */ + $large-range: (em-calc(1001), em-calc(1025)); /* between 1001px & 1025px */ + $xlarge-range: (em-calc(1026), em-calc(1920)); /* between 1026px & 1920px */ + $xxlarge-range: (em-calc(1921), 99999999px); /* between 1920px & infinity */ + + $screen: 'only screen'; + $landscape: '#{$screen} and (orientation: landscape)'; + $portrait: '#{$screen} and (orientation: portrait)'; + $small-up: $screen; + + $small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})'; + $medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})'; + $medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})'; + + $large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})'; + $large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})'; + + $xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})'; + $xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})'; + + $xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})'; + $xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})'; + + body{ font-size:16px; @@ -47,20 +91,23 @@ $coul5 : #8800aa; body{ } - +$maxw:1000px; @mixin main_centred(){ - width:1024px; margin:0 auto; + width:95%; + margin:0 auto; + @media #{$large-up} { + max-width: $maxw; + } } -#container{ - width:1024px; margin:0 auto; - // overflow-x: visible; -} -$header_height:400px; +$header_height_small:200px; +$header_height_large:400px; #header{ - position: fixed; - width:100%; max-height: $header_height; + @media #{$large-up} { + position: fixed; + } + width:100%; z-index: 20; background-color: transparentize(#fff, 0.05); background-image: url(../../images/fond-trame-logo-lite.png); @@ -68,6 +115,11 @@ $header_height:400px; background-position: center top; background-size: contain; + max-height: $header_height_small; + @media #{$large-up} { + max-height: $header_height_large; + } + // box-shadow: 0 3px 3px transparentize(#fff, 0.05); hgroup.logo{ @@ -77,7 +129,10 @@ $header_height:400px; h1{margin:0;} h1 a{ display:block; - height:300px; + height:$header_height_small*0.6; + @media #{$large-up} { + height: $header_height_large*0.8; + } // transition: height 0.1s ease-in-out; background-image: url(../../images/logo.png); background-size: contain; @@ -90,11 +145,19 @@ $header_height:400px; h2{ text-align: center; color:$vert; + font-size: 1em; + @media #{$large-up} { + font-size: 2em; + } } } #main{ - padding-top: $header_height; + // padding-top: $header_height_small; + @media #{$large-up} { + padding-top: $header_height_large; + } + >.region{ @include main_centred(); } @@ -121,6 +184,11 @@ $header_height:400px; } #thematique-anchor-links{ + display:none; + @media #{$large-up} { + display:block; + } + padding:1em 0; ul{ display: flex; @@ -231,13 +299,18 @@ $header_height:400px; &::before{ position: absolute; content:" "; - width:110%; height:110%; - top:-5%; left:-5%; z-index: -1; background-position: center; - background-size: contain; background-repeat: no-repeat; - // border: 1px dotted red; + + background-size: cover; + width:100%; height:100%; + top:0; left:0; + @media #{$large-up} { + background-size: contain; + width:110%; height:110%; + top:-5%; left:-5%; + } } @mixin node_thema($bg, $sb_bg, $coul){ @@ -307,6 +380,11 @@ $header_height:400px; font-weight: 400; // padding-left: 0.18em; position:relative; + margin:2em 0 0; + padding: 0 2em 0 0; + @media #{$large-up} { + padding:0; + } span{ position: absolute; top:-170px; @@ -314,7 +392,6 @@ $header_height:400px; } .content{ - .field-name-field-emvideo img{width: 100%;} letter-spacing: -0.25em; >*{letter-spacing: normal;} @@ -329,18 +406,24 @@ $header_height:400px; // / / / / / / /_/ / / / / / // /_/ /_/ /_/\__,_/_/_/ /_/ article.main{ - display: inline-block; - vertical-align: top; - width:$main_w; + + @media #{$large-up} { + display: inline-block; + vertical-align: top; + width:$main_w; + } + overflow: hidden; .field-name-body{ position: relative; z-index: 3; >*{padding:0 1em 0 0;} .summary{ position: relative; - height:5.75em; overflow: hidden; - background-color: #fff; + background-color: transparentize(#fff, 0.4); transition: background-color 0.5 ease-in-out; + @media #{$large-up} { + height:5.75em; overflow: hidden; + } p{ font-size: 1.1em; padding:0.5em 0.5em 0.5em 0; @@ -348,6 +431,10 @@ $header_height:400px; } } .value{ + display:none; + @media #{$large-up} { + display: block; + } position:absolute; height:1px; margin-bottom: 0; transition:height 0.5s ease-in-out; @@ -357,17 +444,24 @@ $header_height:400px; font-size: 1em; padding: 0.5em; } } - &:hover{ - .summary{background-color: #fff;} - .value{ - height:700px; + @media #{$large-up} { + &:hover{ + .summary{background-color: #fff;} + .value{ + height:700px; + } } } p{padding:0 0 1em; margin: 0;} } //field-name-body .group-video{ position: relative; - min-height: 432px; + @media #{$large-up} { + min-height: 432px; + } + .field-name-field-emvideo img{ + max-width: 100%; height: auto; + } .field-name-field-emvideo a{ display: block; line-height: 0;} .group-description{ cursor: pointer; pointer-events: none; @@ -413,11 +507,18 @@ $header_height:400px; // / /_/ / /_/ / /__(__ ) // \__,_/\____/\___/____/ aside.right{ - display: inline-block; - vertical-align: top; - width: $right_w; + margin-top:$gouttiere; + + @media #{$large-up} { + display: inline-block; + vertical-align: top; + width: $right_w; + margin-top: 0; + } .field-name-field-eclairages{ - padding-left:1em; + @media #{$large-up} { + padding-left:1em; + } .field-item:not(:last-child){ padding-bottom: $gouttiere; } @@ -432,7 +533,7 @@ $header_height:400px; box-sizing: border-box; position:absolute; z-index: 2; overflow: hidden; top:0; left:0; width:90%; height:80%; - margin:5%; + margin:15px; // opacity: 0; .field-name-field-doc{ @include vidlabel; @@ -450,6 +551,7 @@ $header_height:400px; transition:opacity 0.3s ease-in-out; } } + .group-video img{ width:100%; height:auto;} .group-video a{ display: block; line-height: 0;} } &:not(.en_attente):hover .group-txt{ @@ -479,7 +581,10 @@ $header_height:400px; // \___/ .___/_/____/\____/\__,_/\___/____/ // /_/ aside.bottom{ - padding-top: $gouttiere*0.5; + padding-top: $gouttiere; + @media #{$large-up} { + padding-top: $gouttiere*0.5; + } .field-name-field-episodes{ // letter-spacing: -0.25em; @@ -488,17 +593,17 @@ $header_height:400px; margin-bottom: 0.3em; } &>.field-items{ - display: flex; - flex-flow: row nowrap; - justify-content: space-between; + @media #{$large-up} { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + } &>.field-item{ display: block; - // letter-spacing: normal; - // display: inline-block; - width:19%; - // padding-right:1%; - // min-height: 110px; background-color: #fff; + @media #{$large-up} { + width:19%; + } .node-episode{ .content{ position: relative; @@ -518,6 +623,7 @@ $header_height:400px; text-align: center; } } + .group-video img{ width:100%; height:auto;} .group-video a{ display: block; line-height: 0;} } diff --git a/sites/all/themes/figureslibres/clameurs/js/dist/script.min.js b/sites/all/themes/figureslibres/clameurs/js/dist/script.min.js index ec455115..ae22c9e5 100755 --- a/sites/all/themes/figureslibres/clameurs/js/dist/script.min.js +++ b/sites/all/themes/figureslibres/clameurs/js/dist/script.min.js @@ -1,3 +1,3 @@ (function($){Drupal.behaviors.init_theme=function(context){$('#messages-and-help > div.messages:not(.processed)').addClass('processed').each(function(){if($('a',this).size()||$(this).is('.error')||$(this).is('.warning')||$(this).text().length>100){$(this).prepend("X");$('span.close',this).click(function(){$(this).parent().slideUp('fast');});} -else{$(this).animate({opacity:1},5000,'linear',function(){$(this).slideUp('fast');});}});};function init(){console.log('Clameurs Theme');initHeaderAnime();};function initHeaderAnime(){var $header=$('#header a'),header_height=$header.height(),$slogan=$('#header h2'),fontsize=parseInt($slogan.css('font-size')),tmpfs,scrolltop;console.log('font-size',fontsize);$(window).on('scroll',function(event){scrolltop=$(this).scrollTop()*.5;console.log('scrolltop',scrolltop);$header.height(header_height-scrolltop>90?header_height-scrolltop:90);tmpfs=(300-(scrolltop<100?scrolltop:100))/300*fontsize;$slogan.css('font-size',tmpfs+"px");});};init();})(jQuery); \ No newline at end of file +else{$(this).animate({opacity:1},5000,'linear',function(){$(this).slideUp('fast');});}});};function init(){console.log('Clameurs Theme');initHeaderAnime();};function initHeaderAnime(){var $header=$('#header a'),header_height=$header.height(),$slogan=$('#header h2'),fontsize=parseInt($slogan.css('font-size')),tmpfs,scrolltop,limit=300;console.log('font-size',fontsize);$(window).on('scroll',function(event){scrolltop=limit-$(this).scrollTop()*.5;scrolltop=Math.max(limit*0.35,scrolltop);alpha=scrolltop/limit;console.log('scrolltop '+scrolltop+' | allpha '+alpha);$header.height(header_height*alpha);tmpfs=fontsize*alpha;$slogan.css('font-size',tmpfs+"px");});};init();})(jQuery); \ No newline at end of file diff --git a/sites/all/themes/figureslibres/clameurs/js/script.js b/sites/all/themes/figureslibres/clameurs/js/script.js index 5cda1ccb..010680c5 100755 --- a/sites/all/themes/figureslibres/clameurs/js/script.js +++ b/sites/all/themes/figureslibres/clameurs/js/script.js @@ -35,15 +35,20 @@ header_height = $header.height(), $slogan = $('#header h2'), fontsize = parseInt($slogan.css('font-size')), tmpfs, - scrolltop; + scrolltop, limit = 300; console.log('font-size', fontsize); $(window).on('scroll', function(event) { - scrolltop = $(this).scrollTop() * .5; - console.log('scrolltop', scrolltop); - $header.height(header_height-scrolltop > 90 ? header_height-scrolltop : 90); - tmpfs = (300 - (scrolltop < 100 ? scrolltop : 100)) / 300 * fontsize; + scrolltop = limit - $(this).scrollTop() * .5; + scrolltop = Math.max(limit*0.35,scrolltop); + // console.log('scrolltop', scrolltop); + alpha = scrolltop/limit; + console.log('scrolltop '+scrolltop+' | allpha '+alpha); + + $header.height(header_height*alpha); + + tmpfs = fontsize*alpha; $slogan.css('font-size', tmpfs+"px"); }); };