started fixed header, fixed anchor links with fixed header

sites/all/modules/figureslibres/clameursmod/clameursmod.js

@@ -3,7 +3,7 @@
   Clameurs = function(){
 
     function init(){
-      console.log("Clameurs");
+      console.log("Clameurs Mod");
       initVideoEvents();
     }
 

sites/all/modules/figureslibres/clameursmod/clameursmod.module

@@ -156,7 +156,7 @@ function _clameursmod_thematiques_anchor_links(){
   foreach ($nids as $nid) {
     $node = node_load($nid);
     // dsm($node);
-    $alias = drupal_get_path_alias('node/'.$nid);
+    $alias = str_replace('/', '-', drupal_get_path_alias('node/'.$nid));
     // get the workflow state ID
     $current_state = workflow_state_load_single($node->workflow);
     // dsm($current_state, 'current_state');

sites/all/themes/figureslibres/clameurs/css/dist/styles.css

@@ -40,20 +40,37 @@ input {
   width: 1024px;
   margin: 0 auto; }
 
-#header h1 a {
-  display: block;
-  height: 335px;
-  background-image: url(../../images/logo.png);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  text-indent: -2000px;
-  overflow: hidden;
-  margin: 0; }
-
-#header h2 {
-  text-align: center;
-  color: #20c498; }
+#header {
+  position: fixed;
+  width: 100%;
+  max-height: 400px;
+  z-index: 20;
+  background-color: rgba(255, 255, 255, 0.9); }
+  #header hgroup.logo {
+    width: 1024px;
+    margin: 0 auto;
+    padding: 1em 0; }
+  #header h1 {
+    margin: 0; }
+  #header h1 a {
+    display: block;
+    height: 335px;
+    background-image: url(../../images/logo.png);
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    text-indent: -2000px;
+    overflow: hidden;
+    margin: 0; }
+  #header h2 {
+    text-align: center;
+    color: #20c498; }
+
+#main {
+  padding-top: 400px; }
+  #main > .region {
+    width: 1024px;
+    margin: 0 auto; }
 
 #node-63 {
   padding: 1em 0; }
@@ -267,7 +284,11 @@ body,
   .node-thematique > h2 {
     font-size: 3em;
     font-weight: 400;
-    padding-left: 0.18em; }
+    padding-left: 0.18em;
+    position: relative; }
+    .node-thematique > h2 span {
+      position: absolute;
+      top: -177px; }
   .node-thematique .content {
     letter-spacing: -0.25em; }
     .node-thematique .content .field-name-field-emvideo img {

sites/all/themes/figureslibres/clameurs/css/styles.scss

@@ -49,15 +49,30 @@ body{
 
 }
 
+@mixin main_centred(){
+	width:1024px; margin:0 auto;
+}
+
 #container{
 	width:1024px; margin:0 auto;
 	// overflow-x: visible;
 }
+$header_height:400px;
 
 #header{
+	position: fixed;
+	width:100%; max-height: $header_height;
+	z-index: 20;
+	background-color: transparentize(#fff, 0.1);
+	hgroup.logo{
+		@include main_centred();
+		padding: 1em 0;
+	}
+	h1{margin:0;}
 	h1 a{
 		display:block;
 		height:335px;
+		// transition: height 0.1s ease-in-out;
 		background-image: url(../../images/logo.png);
 		background-size: contain;
 		background-position: center;
@@ -72,6 +87,13 @@ body{
 	}
 }
 
+#main{
+	padding-top: $header_height;
+	>.region{
+		@include main_centred();
+	}
+}
+
 // about
 #node-63{
 	// color:$bleu;
@@ -268,6 +290,11 @@ body,
 		font-size: 3em;
 		font-weight: 400;
 		padding-left: 0.18em;
+		position:relative;
+		span{
+			position: absolute;
+			top:-177px;
+		}
 	}
 
 	.content{

sites/all/themes/figureslibres/clameurs/js/script.js

@@ -25,5 +25,29 @@
       });
   };
 
+  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);

sites/all/themes/figureslibres/clameurs/preprocess/node.pre.php

@@ -11,12 +11,13 @@ $vars['print_title'] = !$vars['page'];
 
 $alias = str_replace('/', '-', drupal_get_path_alias('node/'.$vars['node']->nid));
 
+$vars['anchor_target'] = null;
 if($node->type == "thematique"){
-  $vars['id'] =  $alias;
+  // $vars['id'] =  $alias;
   // dsm($node, 'node');
   // $current_state = workflow_state_load_single($node->workflow);
   // dsm($current_state, "state");
-
+  $vars['anchor_target'] = $alias;
 }else{
   $vars["classes_array"][] = $alias;
   $vars['id'] =  "node-".$node->nid;

sites/all/themes/figureslibres/clameurs/templates/html.tpl.php

@@ -1,4 +1,4 @@
-<?php 
+<?php
 /**
  * @file
  * Default theme implementation to display the basic html structure of a single
@@ -55,16 +55,16 @@
 		<!-- remove the no-js as fast as possible -->
 		<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
 
-		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
+		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
 		     Remove this if you use the .htaccess -->
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
 		<?php print $head; ?>
-		
+
 		<title><?php print $head_title; ?></title>
 		<?php print $styles; ?>
 
-	  
+
 	  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
 	       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
 	       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
@@ -73,24 +73,20 @@
 
 		<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 	</head>
-	
+
 	<body class="<?php print $classes; ?>"<?php print $attributes; ?>>
 	  <div id="skip-link">
 	    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
 	  </div>
 
-    <div id="container">		 		
 	
-		  <?php print $page_top; ?>
-		  <?php print $page; ?>
-		  <?php print $page_bottom; ?>
-	
-    </div> 
-    <!-- /container -->
+	  <?php print $page_top; ?>
+	  <?php print $page; ?>
+	  <?php print $page_bottom; ?>
 
 		<!-- Javascript at the bottom for fast page loading -->
 		<?php print $scripts; ?>
-		
+
 
 	  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
 	       chromium.org/developers/how-tos/chrome-frame-getting-started -->
@@ -100,5 +96,5 @@
 	  <![endif]-->
 
 	</body>
-	
-</html>
+
+</html>

sites/all/themes/figureslibres/clameurs/templates/node.tpl.php

@@ -85,7 +85,12 @@
   <?php print $user_picture; ?>
 
   <?php if ($print_title): ?>
-      <h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
+      <h2<?php print $title_attributes; ?>>
+        <?php if ($anchor_target): ?>
+          <span id="<?php print $anchor_target; ?>"></span>
+        <?php endif; ?>
+        <?php print $title; ?>
+      </h2>
   <?php endif; ?>
 
   <div class="content"<?php print $content_attributes; ?>>