started responsive dev for mobile

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; }
-
-#main {
-  padding-top: 400px; }
-  #main > .region {
-    width: 1024px;
-    margin: 0 auto; }
+    color: #20c498;
+    font-size: 1em; }
+    @media only screen and (min-width: 62.5625em) {
+      #header h2 {
+        font-size: 2em; } }
+
+@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 {

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;}
 							}
 

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");
     });
   };