chantier-readme.html 24.5 KB
Newer Older
ludi's avatar
ludi committed
1 2 3 4 5 6 7 8 9
<html>

<head>
    <meta charset="UTF-8">
    <title>Up Pen Down</title>
</head>

<body>
    <h1>UP PEN DOWN</h1>
gijs's avatar
gijs committed
10 11 12
    <h3>
        <a href="http://balsamine.be/saison-16-17/up-pen-down.html">Théâtre la Balsamine (9-10-2017 → 13-10-2017)</a>
    </h3>
ludi's avatar
ludi committed
13 14
    <nav>
        <ul>
gijs's avatar
gijs committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
            <li>
                <a href="#dot">p.1 Dot</a>
            </li>
            <li>
                <a href="#line">p.2 Line</a>
            </li>
            <li>
                <a href="#corner">p.3 Corner</a>
            </li>
            <li>
                <a href="#circle">p.4 Circle</a>
            </li>
            <li>
                <a href="#ductus">p.5 Ductus</a>
            </li>
            <li>
                <a href="#curve">p.6 Curve</a>
            </li>
            <li>
                <a href="#improvisation">p.7 Improvisation</a>
            </li>
            <li>
                <a href="#grid">p.8 Grid</a>
            </li>
            <li>
                <a href="#process-path">Process path</a>
            </li>
            <li>
                <a href="#inventory">Inventory</a>
            </li>
ludi's avatar
ludi committed
45 46 47 48

        </ul>
    </nav>
    <hr />
gijs's avatar
gijs committed
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
    <section class="introductions">
        <article lang="en" class="introduction">
            <p>
                This webpage is an interpretation and continuation of the printparty Up Pen Down, performed at Balsamine Theater as a part
                of Saison des Cultures Numériques 2017. The performance was the first public moment of a research focused
                on that which is between digital type design and bodies. Letters and movements, dance notation and programming,
                digital codes and coded physical gestures, plotters and body parts interacted with each other and blured
                the distinction between choreographic and digital practices.
            </p>
        </article>
        <article lang="fr" class="introduction">
            <p> Cette page web est une interprètation et un prolongement de la printparty Up Pen Down performée au théâtre de
                la Balsamine dans le cadre de la Saison des Cultures Numériques 2017. Cette performance était le premier
                moment public d'une recherche située à la rencontre entre typographie digitale et corps. Lettres et mouvements,
                notation de danse et programmation, codes digitaux et gestes physiques codés, plotters et corps ont dialogués
                jusqu’à rendre confuse la distinction entre pratiques chorégraphiques et digitales.
            </p>
        </article>
        <article lang="nl" class="introduction">
            <p> Deze website is een interpretatie en vervolg van de printparty Up Pen Down, opgevoerd in het Balsamine Theater
                als onderdeel van Saison des Cultures Numériques 2017. Deze performance was het eerste publieke moment van
                een onderzoek in dat wat zich bevindt tussen digitaal letterontwerp en lichamen. Letters en beweging, dansnotatie
                en programmeren, digitale codes en fysieke bewegingen, plotters en lichaamsdelen gingen het gesprek aan en
                vervaagden de grens tussen choreografie en digitale praktijken.
            </p>
        </article>
    </section>
gijs's avatar
gijs committed
76 77 78 79 80 81 82 83 84
    <article id="dialogue">
        <h2>Dialogue</h2>
        <p>
            <span class="name">Pierre</span> Maybe imagine a human having a perception of a vector for the first time: a pregnant woman walks
            on the flat surface of a beach, to the background of the sunset. She hunts birds with a bow and an arrow. As
            she bends the bow, she feels how its straight rope interacts with the sturdiness of the bones of her arm and
            how the curved wood of the bow is in sync with the fibers of her muscles. All those straight and curved lines,
            along with the soft arc of her thick belly, are also drawn by the sun as her shadow stretches on the sand. She
            launches the arrow. The arrow itself could be seen as a vector-wave-movement. She also feels how rays of sun
ludi's avatar
ludi committed
85
            project her transformed shape of her shadow on the sand, following another straight line. She looks more closely
gijs's avatar
gijs committed
86 87 88 89 90
            at the border of the shadow, and sees the very moment where some grains of sand get lightened by the sun, like
            many corpuscules-pixels-bitmap, envisioning in simultaneously the two main components of digital images, and
            t two ways of describing tangible matter.
        </p>
        <p>
gijs's avatar
gijs committed
91 92 93 94
            <span class="name">Pierre</span> There are two matters within the digital, the molecular, which we recognise as bitmap and know
            very well, and the ondulatory – the vectors. I want to not only utilise vectors, but also to go anthropological
            about them. From that perspective I can tackle what is important in the aesthetics vectors create, beyond what
            things look like and into the way they operate and influence our own operations.
gijs's avatar
gijs committed
95 96 97 98 99 100
        </p>
        <p>
            <span class="name">Ludi</span> I have the need to include the body in the investigation of digital typography, because through intimate
            relations with vectors, we can trace back histories of writing that depended on the body and its movement.
        </p>
        <p>
gijs's avatar
gijs committed
101 102 103
            <span class="name">Ludi The body has its own intelligence. When I put, for example, the tension of the curve into this awkward body,
                some aspects of the digital practice become apparent in a way that I can't put the finger on, but I feel
                that only the body can detect.
gijs's avatar
gijs committed
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
        </p>
        <p>
            <span class="name">Ludi</span> OSPies like dancing. But we do end up sitting on a chair when ever we deal with type design. Its
            maybe a fantasy to think that such different modes of being could come together in an interesting way, but here
            we are, using one practice to reflect on and activate the other.
        </p>
        <p>
            <span class="name">Gijs</span> With Metapost, the human becomes the choreographer and the machine is the dancer, interpreting and
            improvising with the score.
        </p>
        <p>
            <span class="name">Gijs</span> Actually, a vector is a meta picture. Only when rendered it becomes a shape.
        </p>
        <p>
            <span class="name">Adva</span> So, could we say that vectors are like movements?
        </p>
        <p>
            <span class="name">Gijs</span> Yes, in this case the movement is a rendering device.</p>
        <p>
            <span class="name">Adva</span> Maybe both movement and vectors are potential, actualised through rendering processes, by the body,
            by the machine, by anything they activate?
        </p>
        <p>
            <span class="name">Pierre</span> I find both dance and graphic design poetic practices, but sometimes I felt we killed their poetry
            by forcing them to interact with each other.
        </p>
        <p>
            <span class="name">Ludi</span> We slowed the rendering process down so much in order to look into the process it facilitates. Maybe
ludi's avatar
ludi committed
132
            that's what killed the poetry?
gijs's avatar
gijs committed
133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
        </p>
        <p>
            <span class="name">Adva</span> I find poetry in the fact that we sometimes look at those technical processes through the perspective
            of movement.
        </p>
        <p>
            <span class="name">Gijs</span> If you think of programming from the perspective of movement, for exemple loops, the time it takes
            to execute the code, the electrons jumping, freezing, flowing, interacting through the processor - all become
            interesting in a different way.
        </p>
        <p>
            <span class="name">Adva</span> I understood at a certain point that Up Pen Down is not a linear research, but rather an environment
            we created for ourselves where methods, actions and questions we come up with can interact with pieces of art,
            of knowledge, of completed or unfinished explorations of others within the field. Up Pen Down is for me more
            of a place to be, than a well studied research question.
        </p>
        <p>
            <span class="name">Adva</span> By allowing different body practices to infiltrate one another, contemporary dance went through various
            exciting waves of new discoveries about movement. At a certain point the body withdrew and the conceptualisation
            of movement entered the field. I ask myself if there is something new to find about movement through looking
            for it within digital processes and if yes, can it maybe generate a new way of thinking body and of making dance?
        </p>
        <p>
            <span class="name">Adva</span> I read once a Kabalah text about the letter . Sometimes this letter is used to indicate the name
            of god. In that case, it should be written, but not pronounced. Its not because it represents god, but because
            they believe that the letter itself, when written, contains divine power that is lost in the transformation through
            the body from the written to the spoken. I like the idea of a letter carrying its own agency. This story is taken
            from a mystical culture, but also on the more up-pen-downish level, we create texts, choreographies and technologies
            that at a certain point become existing in themselves and start a relationship with us.
        </p>
    </article>

ludi's avatar
ludi committed
165
    <p>
gijs's avatar
gijs committed
166
        Five days preparation workshop : October 9 → 14 Commented performance : Saturday October 14, 8pm.
ludi's avatar
ludi committed
167 168 169
        <a href="http://balsamine.be/">Balsamine theater, Félix Marchallaan 1, 1030 Schaarbeek</a>
    </p>

gijs's avatar
gijs committed
170
    <article class="panel" id="one">
gijs's avatar
gijs committed
171 172 173 174 175 176 177
        <section class="content">
            <h2 id="dot">.</h2>
            <p class="narrative">Page 1 is the title page. This is where the plotter plot a simple dot. At the same time one person enters the
                grid, marking a dot in the grid while announcing the coordinates and starting the introduction. This moment
                marks the direct echo between the bodies and the machine. Space and language are transposed to the scale
                of the body.</p>
        </section>
gijs's avatar
gijs committed
178 179
    </article>
    <article class="panel" id="two">
gijs's avatar
gijs committed
180 181 182 183 184
        <section class="content">
            <h2 id="line">Line</h2>
            <p class="narrative">Page 2 draws a same line following the 3 languages in action : hpgl, Logo and Metapost. Alternately the body
                is the pen, the instructor and the interpreter. </p>
            <code data-lang="hpgl">
ludi's avatar
ludi committed
185
IN; SP1; PA1,1; PD3,5; PU;
gijs's avatar
gijs committed
186
</code>
gijs's avatar
gijs committed
187
            <code data-lang="logo">
ludi's avatar
ludi committed
188
RT26.57;FD4.47;
gijs's avatar
gijs committed
189
</code>
gijs's avatar
gijs committed
190
            <code data-lang="mp">
ludi's avatar
ludi committed
191 192 193 194 195 196 197
beginfig(1);
z1=(1,1);
z2=(3,5);
draw z1--z2;
endfig;
end
</code>
gijs's avatar
gijs committed
198
        </section>
gijs's avatar
gijs committed
199 200
    </article>
    <article class="panel" id="three">
gijs's avatar
gijs committed
201 202 203 204 205 206 207 208 209 210 211 212 213 214
        <section class="content">
            <h2 id="corner">Corner</h2>
            <p class="narrative"> Page 3. The team gathers to fill boxes of the grid with chalk. Now the full body is a pen carried by a body that
                plays the arm of the plotter. The hpgl plot of an angle appears in negative in the white space of the chalk.</p>
            <!-- Hm, here on the page appear a text about Logo but the corner instructions are in hpgl. -->
            <p class="documentation">
                Logo a été écrit pour les enfants. Né en 1966, c'es2t une méthode pédagogique et un langage de programmation qui la met en
                pratique. Inspirée des recherches de Jean Piaget, Logo a été développé par Seymour Papert comme une initiation
                à la la programmation et aux logiques numériques. Il passe par le dessin pour expliquer les concept d’unité,
                d'échelle et de récursivité. Ce qui nous intéresse en particulier avec Logo c’est sa “Tortue”; sorte de robot
                traçant piloté par de simples commandes: Pen Up, Pen Down, Forward & Rotate. Avec cette spécificité que la
                tortue se déplace dans un environnement relatif.
            </p>
        </section>
gijs's avatar
gijs committed
215 216
    </article>
    <article class="panel" id="four">
gijs's avatar
gijs committed
217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
        <section class="content">
            <h2 id="circle">Circle</h2>
            <p class="narrative"> Page 4 deals with curves and the simplest application of them : circles. Three circles are performed simultaneously
                starting as a canon and continuing in a loop. Each body performs the circle in a different posture and rhythm.
                The 3 languages come into confrontation, bodies have here to take into account collisions. Riding on the
                wall the Metapost circle meets the three-dimensional space of the stage. The path bumps into the folds of
                the page.</p>

            <p class="documentation">
                HPGL or Hewlett-Packard Graphics Language, is a drawing and programming language to command pen plotters. It developed into
                the industry standard and is still supported by contemporary devices. There are commands to send the pen
                to a coordinate, or position on the paper and commands to put the pen down on the paper: Pen Down, or to
                lift it again: Pen Up. If the pen is moving while it is down or on the paper the machine draws. There are
                commands to modify the pen and commands to modify the machine, as in return to default settings, to change
                the size of the paper or to pick a new one.
            </p>
        </section>
gijs's avatar
gijs committed
234
    </article>
ludi's avatar
ludi committed
235
    <article class="panel" id="five">
gijs's avatar
gijs committed
236
        <h2 id="ductus">Ductus</h2>
gijs's avatar
gijs committed
237 238 239 240 241 242 243 244
        <section class="content">
            <p class="narrative">Page 5 is the link with a more theoretical passage on the origin of our Latin ductus. The plotter superimposes
                the evolution of the lines of the ampersand sign - from the capitales ET to the & - by following Jean Mallon's
                documentary
                <i>Ductus</i>.</p>
            <p class="narrative"> We then retrace the historical relationships between E and ה.
            </p>
        </section>
gijs's avatar
gijs committed
245 246 247
    </article>
    <article class="panel" id="six">
        <h2 id="curve">Curve</h2>
gijs's avatar
gijs committed
248
        <section class="content">
ludi's avatar
ludi committed
249

gijs's avatar
gijs committed
250 251 252 253 254 255
            <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 Adva - only practitioner drawing this sign - the instructions and the projected drawing of Metapost is
                played out.
            </p>
gijs's avatar
gijs committed
256

gijs's avatar
gijs committed
257 258 259 260 261 262 263 264 265 266 267 268 269 270
            <p class="documentation">
                Linguists say that the E, fifth letter of the latin alphabet, is derived from the Greek Epsilon E, represented in egyptian
                hieroglyph by the rotated , and rotated again from the Phoenician that is rooted in two cuneiform letters
                from the semitic script aged from more than three millenaries, the fifth letter haw meaning the window and
                the eight letter heth meaning fence . In syriac and arabic, it gave a near rounded shape, and in hebrew the
                mix between the latinesque cornered letter and a rounded one, even more rounded in cursive .</p>
        </section>
        <section class="video">
            <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>
        </section>
gijs's avatar
gijs committed
271 272
    </article>
    <article class="panel" id="seven">
gijs's avatar
gijs committed
273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299
        <section class="content">
            <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
                and program itself is the 'dancer'. The plotter plot the ה with the rounded angle without direction, and
                on top of it, with direction (intention).
            </p>
            <p class="documentation">
                Metapost is a drawing language based on Metafont, the language developed by Donald Knuth to design fonts. In Metapost the
                drawing is deduced from a collection of mathematical equations. It is not obligatory but often the drawing
                is split in two parts in the first half the points of the drawing are defined. In the second part the connections
                between those lines are described, straight lines or curves and in which direction do they leave or enter
                the point.
            </p>
            <p class="documentation">
                «Let's consider the following mathematical problem: Given n points z1, z2,..., zn in the plane, what is the most pleasing
                closed curve that goes through them in the specified order [...] To avoid degenerate situations we may assume
                that n is at least 4. This problem is essentially like the dot-to-dot puzzles that we give to young children.
                Of course it is not a well-posed mathematical problem, since I didn't say what it means for a curve to be
                "most pleasing". Let's first postulate soractice of the drawing of this sign,me axioms that the most pleasing
                curve should satisfy. [... skipping mathematical properties 1 to 4 ...] Property 5 (smoothness) : There are
                nothe hpgl plot of an angle appears in negative in the white space of the chalk. sharp corners in the most
                pleasing curve. [...] In other words, there is a unique tangent at every point of the curve. Property 6 :
                if z1, z2, z3, z4 are consecutive points of a circle, the most pleasing curve through them is that circle.»
                Donald Knuth, "Mathematical typography", p. 355, in the Bulletin of the American Mathematical Society, Volume
                1, Number 2, March 1979
            </p>
        </section>
gijs's avatar
gijs committed
300 301 302
    </article>
    <article class="panel" id="eight">
        <h2 id="grid">Grid</h2>
gijs's avatar
gijs committed
303 304 305 306 307 308 309 310 311 312 313
        <section class="content">

            <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 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>
314
            <ol class="footnotes">
gijs's avatar
gijs committed
315 316 317
                <li id="note1">Esther Ferrer,
                    <a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a>
                </li>
318 319
            </ol>

gijs's avatar
gijs committed
320 321 322 323 324 325
            <p class="narrative">The grid has a proportion of 8 x 4 and allows us to overflow on the wall.</p>
            <p class="narrative">After placement of the grid by the bodies, light focus on the plotter who starts 'marking the territory'. One's
                filming next to it so that the audience can see the pen trajectory, plotter's dance projected on the side
                wall. On page 8, the grid is drawn.
            </p>
        </section>
gijs's avatar
gijs committed
326
    </article>
ludi's avatar
ludi committed
327 328

    <style type="text/css">
ludi's avatar
ludi committed
329
        @font-face {
gijs's avatar
gijs committed
330 331 332 333
            font-family: 'Ume';
            src: url('http://osp.kitchen/api/osp.live.up-pen-down/raw/fonts/ume-stroke180.ttf');
            font-weight: normal;
            font-style: normal;
ludi's avatar
ludi committed
334 335 336
        }

        @font-face {
gijs's avatar
gijs committed
337 338 339 340
            font-family: 'Nell';
            src: url('http://osp.kitchen/api/osp.live.up-pen-down/raw/fonts/Nell-Regular.ttf');
            font-weight: normal;
            font-style: normal;
ludi's avatar
ludi committed
341 342
        }

gijs's avatar
gijs committed
343 344 345
        body {
            margin: 21px;
        }
ludi's avatar
ludi committed
346

ludi's avatar
ludi committed
347

ludi's avatar
ludi committed
348 349 350
        #project-detail #project-detail-readme article img {
            max-width: 40%;
        }
gijs's avatar
gijs committed
351

gijs's avatar
gijs committed
352
        #project-detail-readme article figure {
ludi's avatar
ludi committed
353 354 355 356 357
            text-align: left !important;
            color: #9900ff;
            outline: none !important;
        }

gijs's avatar
gijs committed
358
        #project-detail-readme article h3,
ludi's avatar
ludi committed
359
        #project-detail-readme article h4 {
gijs's avatar
gijs committed
360 361
            color: #9900ff;
            text-decoration: none !important;
ludi's avatar
ludi committed
362
        }
ludi's avatar
ludi committed
363

gijs's avatar
gijs committed
364
        #project-detail-readme article h4 {
gijs's avatar
gijs committed
365 366 367 368
            font-size: 18pt !important;
            line-height: 21pt !important;
            margin-top: 21pt !important;
            margin-bottom: 9pt !important;
gijs's avatar
gijs committed
369 370 371
        }

        #dialogue {
gijs's avatar
gijs committed
372 373 374 375 376 377 378 379 380 381 382 383 384
            font-family: "Ume";
            font-size: 1em;
            line-height: 1.4em;
            font-family: "Ume";
            max-width: 25em;
            letter-spacing: 0.03em;
            font-size: 1em;
            letter-spacing: 0.03em;
            color: forestgreen;
            float: right;
            width: 20em;
            margin-right: 5 1em;
            margin-left: 1em;
ludi's avatar
ludi committed
385 386 387
        }

        code {
gijs's avatar
gijs committed
388 389 390 391 392 393 394
            font-family: "Ume";
            font-size: 1em;
            line-height: 1.4em;
            letter-spacing: 0.03em;
            color: navy;
            margin-right: 1em;
            margin-left: 1em;
gijs's avatar
gijs committed
395 396 397
        }

        #dialogue .name {
gijs's avatar
gijs committed
398
            margin-right: 2em;
ludi's avatar
ludi committed
399 400 401
        }

        #dialogue p:nth-child(odd) {
gijs's avatar
gijs committed
402 403
            margin-left: 30px;
            margin-top: 10em;
ludi's avatar
ludi committed
404
        }
gijs's avatar
gijs committed
405

ludi's avatar
ludi committed
406
        #dialogue p:nth-child(even) {
gijs's avatar
gijs committed
407
            margin-right: 30px;
ludi's avatar
ludi committed
408
        }
gijs's avatar
gijs committed
409

ludi's avatar
ludi committed
410
        #dialogue p:nth-child(3n+1):nth-child(even) {
gijs's avatar
gijs committed
411
            margin-top: 80px;
gijs's avatar
gijs committed
412
        }
gijs's avatar
gijs committed
413 414

        .introduction {
gijs's avatar
gijs committed
415 416 417 418 419 420 421 422
            font-family: "Nell";
            color: navy;
            font-size: 1.3em;
            line-height: 1.3em;
            vertical-align: top;
            display: inline-block;
            width: 30%;
            min-width: 300px;
ludi's avatar
ludi committed
423 424 425
        }

        .narrative {
gijs's avatar
gijs committed
426 427 428 429 430 431 432 433 434 435
            font-family: "Ume";
            max-width: 25em;
            letter-spacing: 0.03em;
            font-family: "Ume";
            max-width: 25em;
            letter-spacing: 0.03em;
            font-size: 1em;
            font-size: 1em;
            line-height: 1.4em;
            color: black;
gijs's avatar
gijs committed
436 437
        }

gijs's avatar
gijs committed
438 439 440 441 442 443
        .documentation {
            font-family: "Ume";
            max-width: 25em;
            letter-spacing: 0.03em;
            font-size: 1em;
            color: forestgreen;
ludi's avatar
ludi committed
444 445
        }

gijs's avatar
gijs committed
446 447 448 449 450
        .introduction:nth-child(n+2) {
            margin-left: 3%;
        }

        .panel {
ludi's avatar
ludi committed
451
            margin-top: 10em;
gijs's avatar
gijs committed
452
            position: relative;
ludi's avatar
ludi committed
453
            width: calc(90% - 20em);
ludi's avatar
ludi committed
454 455
            float: left;
            padding: 0px 9px 0px 9px;
gijs's avatar
gijs committed
456 457 458
        }

        .panel .content {
ludi's avatar
ludi committed
459 460
            background-size: contain;
            background-repeat: no-repeat;
ludi's avatar
ludi committed
461 462
            background-position: center center;
            min-height: 50vh;
ludi's avatar
ludi committed
463
        }
ludi's avatar
ludi committed
464

ludi's avatar
ludi committed
465
        .panel h2 {
gijs's avatar
gijs committed
466 467 468 469 470 471 472 473 474
            position: sticky;
            top: 1em;
            font-family: ume;
            text-transform: uppercase;
            font-weight: normal;
            color: #ff0000;
            text-shadow: 0px 0px 3px #fff;
            font-size: 120%;
            margin-left: 1em;
ludi's avatar
ludi committed
475 476 477
        }

        iframe {
gijs's avatar
gijs committed
478 479
            width: calc(90vw - 20em);
            height: calc((9 / 16) * (90vw - 20em));
ludi's avatar
ludi committed
480
        }
ludi's avatar
ludi committed
481

gijs's avatar
gijs committed
482 483
        #one .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg");
ludi's avatar
ludi committed
484
        }
gijs's avatar
gijs committed
485 486 487

        #two .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/2.svg");
ludi's avatar
ludi committed
488
        }
gijs's avatar
gijs committed
489 490 491

        #three .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/3.svg");
ludi's avatar
ludi committed
492
        }
gijs's avatar
gijs committed
493 494 495

        #four .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg");
ludi's avatar
ludi committed
496
        }
gijs's avatar
gijs committed
497 498 499

        #five .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/5-exploded.svg");
ludi's avatar
ludi committed
500
        }
gijs's avatar
gijs committed
501 502 503

        #six .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/6.svg");
ludi's avatar
ludi committed
504
        }
gijs's avatar
gijs committed
505 506 507

        #seven .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/7.svg");
ludi's avatar
ludi committed
508 509
        }

gijs's avatar
gijs committed
510 511 512
        #eight .content {
            background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.svg");
        }
ludi's avatar
ludi committed
513
    </style>
gijs's avatar
gijs committed
514

ludi's avatar
ludi committed
515 516
</body>

gijs's avatar
gijs committed
517
</html>