From d1260f07493f937a86cf14f3077ad51ec79931e0 Mon Sep 17 00:00:00 2001
From: Ludi <hello@ludi.be>
Date: Mon, 12 Feb 2018 14:32:16 +0100
Subject: [PATCH] update styles and embeded videos

---
 chantier-readme.html | 30 ++++++++++++++++++++++--------
 process-path.md      |  2 +-
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/chantier-readme.html b/chantier-readme.html
index f898c32..0b70318 100644
--- a/chantier-readme.html
+++ b/chantier-readme.html
@@ -231,6 +231,7 @@ end
     </article>
     <article class="panel" id="six">
         <h2 id="curve">Curve</h2>
+
         <p class="narrative">Page 6 tells the specificities of the letter and bring us back to curves. Starting from a minimal straight plotted
             version of the ×” and the 3 points defining its upper right part, we play with curve tensions variations, making
             legible the self initiative behaviour of Metapost dealing with curves. A dialogue between the indications of
@@ -245,6 +246,8 @@ end
             the latinesque cornered letter and a rounded one, even more rounded in cursive .</p>
 
     </article>
+    <iframe src="https://player.vimeo.com/video/255353606" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+    <p><a href="https://vimeo.com/255353606">page6-curve</a> from <a href="https://vimeo.com/user80784832">OSP</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
     <article class="panel" id="seven">
         <h2 id="improvisation">Improvisations</h2>
         <p class="narrative"> Page 7 introduces the Metafont "most pleasing curve" concept. That's when the programmer becomes a choreographer
@@ -275,8 +278,7 @@ end
         <h2 id="grid">Grid</h2>
 
         <p class="narrative">Drawing of the grid is the first element of the presentation. Developed as a group the scene start as the audience
-            is still coming in. Equiped with different coloured technical tapes, each one cthe hpgl plot of an angle appears
-            in negative in the white space of the chalk.oordinates in solo or binomial to place the different markers. The
+            is still coming in. Equiped with different coloured technical tapes, each one coordinates in solo or binomial to place the different markers. The
             installation of the tape uses walking techniques inspired by the performance of Esther Ferrer<sup><a href="#note1">[1]</a></sup> or measured movements,
             rolled developed for the occasion. In the background we listen to Laurie Anderson - O Superman.</p>
             <ol class="footnotes">
@@ -367,6 +369,7 @@ end
 
         #dialogue p:nth-child(odd) {
           margin-left: 30px;
+          margin-top: 10em;
         }
         #dialogue p:nth-child(even) {
           margin-right: 30px;
@@ -405,8 +408,6 @@ end
           letter-spacing: 0.03em;
           font-size: 1em;
           color: forestgreen;
-          position: absolute;
-          bottom: 9px;
         }
 
         .introduction:nth-child(n+2) {
@@ -414,16 +415,29 @@ end
         }
 
         .panel {
+            margin-top: 10em;
             position: relative;
-            height: 100vh;
-            width: calc(45% - 18px - 10em);
-            max-width: 600px;
+            width: calc(90% - 20em);
             float: left;
             padding: 0px 9px 0px 9px;
             background-size: contain;
             background-repeat: no-repeat;
+            background-position: center center;
+            min-height: 50vh;
         }
 
+        .panel h2 {
+          position: sticky;
+          top: 1em;
+          font-family: ume;
+          text-transform: uppercase;
+          font-weight: normal;
+        }
+
+        iframe {
+          width: calc(90vw - 20em);
+          height: calc((9 / 16) * (90vw - 20em));
+        }
 
         #one {
           background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg");
@@ -435,7 +449,7 @@ end
           background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/3.svg");
         }
         #four {
-          background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg");
+          background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg");12em
         }
         #five {
           background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/5-exploded.svg");
diff --git a/process-path.md b/process-path.md
index e797cd5..92fe67e 100644
--- a/process-path.md
+++ b/process-path.md
@@ -25,7 +25,7 @@ http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%20
 For this 2 day workshop OSP invited artist / dancer / choreographer Adva Zakai to reinterpret a workshop originially organised at xxxx Valence. And took as a starting point the relation between typographic movement and code. We started by executing simple commands or computer code ― walking on the lines a computer would have drawn. We quickly tried to develop movements through more abstract ways. In a exercice, movement rules were regulating the move of a groupe of people, in other each participant was inventing its own movement rules that other participants had to decode. Rapidly we developed a new game of coding and decoding.
 
 
-#### 2016 - Workshop Metahoguet at La Maison du Livre in the frame of the Saison numérique s, OSP invited Adva Zakai as a professional performance artist, close to us. {#metahoguet-2015}
+#### 2016 - Workshop Metahoguet at La Maison du Livre in the frame of the Saison numériques.{#metahoguet-2015}
 
 <figure>
 <img src="https://cloud.osp.kitchen/s/ZNGNY9mJ0RoxKrd/download" />
-- 
GitLab