Prepare the stage...

Signed-off-by: Martin Richard <martius@martiusweb.net>

_config.yml

@@ -4,4 +4,5 @@ server_port: 4000
 
 source: .
 destination: ./_generated
+#exclude: [Makefile, css/less, server]
 #plugins: ./_plugins

_layouts/base.html

@@ -21,7 +21,7 @@
         <li><a href="./index.html">Home</a></li>
         {% if page.id == "about" %}<li><a href="./about.html">À propos</a></li>{% endif %}
         {% if page.id == "bio" %}<li><a href="./bio.html">Biographie, Cinématographie</a></li>{% endif %}
-        {% if page.id == "cine" %}<li><a href="./cine.html">Techniques cinématographiques</a></li>{% endif %}
+        {% if page.id == "cine" %}<li><a href="./cine.html">Analyse cinématographique</a></li>{% endif %}
       </ol>
     </nav>
 	</header>

cine.html

@@ -1,10 +1,37 @@
 ---
 layout: base
 title: "Analyse cinématographique"
-class: cine
+class: cine rightbar
 id: cine
 ---
-
-<h1>Analyse cinématographique</h1>
-<section>
-</section>
+<!--
+<article>
+  <section>
+    <h1>Analyse cinématographique</h1>
+  </section>
+</article>
+-->
+<article id="scenario">
+  <section>
+    <h1>Comment construit-on le scénario&nbsp;?</h1>
+    <ul>
+      <li>Personnages</li>
+      <li>Narration</li>
+      <li>Script</li>
+    </ul>
+  </section>
+  <aside>
+  <ol>
+    <li>
+      <h3>Alors ?</h3>
+      <p>Ici la description, qui peut être affichée étape par étape.</p>
+    <li>
+      <h3>Alors ?</h3>
+      <p>Ici la description, qui peut être affichée étape par étape.</p>
+    <li>
+      <h3>Alors ?</h3>
+      <p>Ici la description, qui peut être affichée étape par étape.</p>
+    </li>
+  </ol>
+  </aside>
+</article>

css/style.css

@@ -538,6 +538,48 @@ body.home {
   transition: right 1500ms ease;
 }
 
+/** Cine */
+.cine section {
+  overflow: none;
+}
+.cine aside {
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size: 0.9em;
+}
+.cine aside > ol {
+  list-style: none;
+  padding: 0;
+}
+.cine aside > ol > li {
+  background-color: #444444;
+  box-shadow: 0px 0px 3px #333333;
+  color: #F5F5F5;
+  border-radius: 5px;
+  margin: 1em 0;
+  padding: 5px;
+
+}
+.cine aside > ol > li h3 {
+  letter-spacing: 0;
+  margin: 0;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+}
+
+/** Sidebar */
+body.rightbar article {
+  width: 98%;
+  margin: 0 auto;
+}
+body.rightbar article > section {
+  width: 74.359%;
+  float: left;
+}
+body.rightbar article > aside {
+  float: left;
+  width: 23.0769%;
+  margin-left: 2.5641%;
+}
+
 /* =============================================================================
    Non-semantic helper classes
    Please define your styles before this section.

js/script.js

@@ -88,6 +88,28 @@ $.msw.Timeline.prototype.previous = function() {
   this.moveTo(this.position-1);
 };
 
+/**
+ * Scenario : allows to create progressive animations
+ * TODO
+ */
+$.msw.Scenario = function(args) {
+	/**
+	 * For each step we trigger an animation script.
+	 */
+	this.step = [];
+	/**
+	 * Comments are displayed while animating each step
+	 */
+	this.steps = $(args.comments);
+/*
+	var step = function() {
+		this.delayComment(10); // attendre 10ms avant d'afficher le commentaire
+		this.noComment(); // pas de commentaire pour cette étape
+	};
+*/
+};
+
+
 /**
  * Bootstrap
  */