the-oceanographies-institute
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

sliding-panels.html
text/html

Download raw (15.7 KB)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: "Executive";
      src: url("../fonts/Executive/Executive-Regular.woff2") format("woff2"),
        url("../fonts/Executive/Executive-Regular.woff") format("woff"),
                url("../fonts/Executive/Executive-Regular.otf") format("OpenType");

      font-weight: 400;
      font-style: normal;
    }

    @font-face {
      font-family: "Executive";
      src: url("../fonts/Executive/Executive-Medium.woff2") format("woff2"),
        url("../fonts/Executive/Executive-Medium.woff") format("woff"),
        url("../fonts/Executive/Executive-Medium.otf") format("OpenType");
      font-weight: 600;
      font-style: normal;
    }

    :root {
      --c--main: #0000ff;
      --c--header: #ccccff;
      --c--one: #e6e6ff;
      --c--two: #0606ff;
      --c--three: #3d3dff;
      --c--four: #7f7fff;
      --c--five: #4c4cff;
      --c--six: #3333ff;
      --line-height: 1.3rem;
    }

    html, body {
      overflow: hidden;
    }

    body {
      font-family: "Executive";
      display: flex;
      flex-direction: row;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font-size: 1vw;
      line-height: 1.3;
    }

    @media screen and (max-width: 1400px) {
      body {
        font-size: 14pt;
      }
    }

    nav, main, aside {
      max-height: 100vh;
      box-sizing: border-box;
    }

    main {
      overflow-y: auto;
    }

    nav {
      flex: 0 1 400px;
      background: var(--c--main);
      color: white;
    }

    main {
      flex: 1 0;
      background: white;
      color: var(--c--main);
      padding: var(--line-height) calc(3 * var(--line-height));
      overflow-y: auto;
    }

    aside {
      flex: 0 1 400px;
      background: lightsteelblue;
      display: flex;
      flex-direction: column;
      max-height: 100vh;
      position: sticky;
      top: 0;
    }


    @media screen and (max-width: 1400px) {
      nav {
        flex: 0 0 250px;
      }

      aside {
        flex: 0 0 300px;
      }
    }

    section.subpanel {
      padding: var(--line-height) calc(2 * var(--line-height));
      width: 80vw;
      background: var(--background-color);
      flex: 1 0;
      margin-right: calc(-1 * 80vw);
      transition: .2s left;
      position: relative;
      left: 0;
      cursor: w-resize;
    }

    section.subpanel:hover {
      left: -15vw;
      transition: .2s left;
    }

    section.subpanel[data-active] {
      left: -60vw;
      transition: .2s left;
      cursor: e-resize;
    }

    section.panel--heading {
      padding: var(--line-height) calc(2 * var(--line-height));
      color: var(--c--main);
      background-color: var(--c--header);
    }

    section.subpanel .content {
      position: absolute;
      width: 100%;
      top: 100%;
      min-height: 40vh;
      background: var(--background-color);
      display: none;
      margin-left:  calc(-2 * var(--line-height));
      margin-right:  calc(-2 * var(--line-height));
      padding-left:  calc(2 * var(--line-height));
      padding-right: calc(2 * var(--line-height));
    }

    section.subpanel:hover .content,
    section.subpanel[data-active] .content {
      display: block;
    }

    section.subpanel:nth-of-type(1) {
      --background-color: var(--c--one);
      color: var(--c--main);
    }

    section.subpanel:nth-of-type(2) {
      color: white;
      --background-color: var(--c--two);
    }

    section.subpanel:nth-of-type(3),
    section.subpanel:nth-of-type(7) {
      color: white;
      --background-color: var(--c--three);
    }

    section.subpanel:nth-of-type(4),
    section.subpanel:nth-of-type(8) {
      color: white;
      --background-color: var(--c--four);
    }

    section.subpanel:nth-of-type(5) {
      color: white;
      --background-color: var(--c--five);
    }

    section.subpanel:nth-of-type(6) {
      color: white;
      --background-color: var(--c--six);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    nav {
      box-sizing: border-box;
      padding: var(--line-height) calc(2 * var(--line-height));
    }

    dl {
      font-size: 75%;
    }

    dd {
      margin: 0;
    }

    p {
      margin-top: 0;
      margin-bottom: 1.3em;
      max-width: 70ch;
    }

  </style>
</head>

<body>
  <nav>
    <dl class="meta private">
      <dt>Voice</dt>
      <dd><p>L’s voice is young and full of enthusiasm. It’s also soft and gentle. Her mother tongue is Dutch but she speaks fluent english with an almost perfect American accent.</p></dd>
  
      <dt>Space</dt>
      <dd><p>The conversation takes place in the first floor of L.’s house, in the “praktijk” (i.e. office) of L.s mother, a psychotherapist for children and adolescents. The space is very beautiful, light, and actually consisting of two adjacent rooms, connected through a large arch. The space is full of toys, children’s books, musical instruments and drawings. We sit on a small desk in the second room, in the right corner of the space, surrounded by windows on both sides.</p></dd>
  
      <dt>Initials</dt>
      <dd><p>L.J., M.L.</p></dd>
  
      <dt>Location</dt>
      <dd><p>Ostende, Belgium</p></dd>
  
      <dt>Title</dt>
      <dd><p>Ocean Conversation with L.J.</p></dd>
  
      <dt>Date</dt>
      <dd><p>13.02.2020</p></dd>
  
      <dt>Editors</dt>
      <dd>
          <p>osp et charlie</p>
      </dd>
      <dt>Words</dt><dd><p>771</p></dd><dt>Characters</dt><dd><p>3527</p></dd><dt>Images</dt><dd><p>0</p></dd></dl>
  </nav>
  <main>
    <h1>Ocean Conversation with L.J.</h1>
    <p>M.M.:&nbsp;What’s your relationship <br> with the ocean?</p>
    <p>STESTESTEST<br>ESTE</p>
    <p>L.J.:&nbsp;Until now, I’ve spent my <strong>whole life near the sea/ </strong>or near<strong>
    water</strong>.</p>
    <p>I&nbsp;was born in Norway.</p>
    <p>The<strong> first year </strong>of my life<strong> </strong>we lived in<strong> Fyresdal → </strong>which is
    next to a <strong>huge lake </strong>in the middle of the forest<strong>.</strong></p>
    <p>So&nbsp;I’ve <strong>(almost) </strong>lived my <strong>whole life in Ostend -</strong>except of this
    first year.</p>
    <p>I&nbsp;<strong>really like the ocean.</strong></p>
    <p>The&nbsp;first <strong>five years </strong>of my life<strong>→I&nbsp;didn’t really like the
    ocean, I&nbsp;was more into the forest</strong></p>
    <p><strong>But&nbsp;now I&nbsp;like the ocean more.</strong></p>
    <p>And&nbsp;something happens to me every time I&nbsp;am close to water.</p>
    <p>I&nbsp;see it and feel drawn to it. I&nbsp;<strong>walk to it </strong>and enter it and start
    <strong>walk</strong>ing<strong> through the water</strong>.</p>
    <p>Inside the water<strong> my creativity explodes. </strong></p>
    <p>I&nbsp;start <strong>making </strong>up<strong> a story in my head.</strong> <strong>Mostly I’m&nbsp;speaking it</strong>
    to my self, while I’m&nbsp;making it.</p>
    <p>I&nbsp;am <strong>imagining this story</strong> in the moment.</p>
    <p>It’s <strong>like meditating I&nbsp;guess.</strong></p>
    <p>I&nbsp;<strong>walk through the water</strong></p>
    <p>and I&nbsp;<strong>feel the water flowing</strong> between my legs – and its like I’m&nbsp;<strong>in
    </strong>a<strong> trance</strong>.</p>
    <p>I&nbsp;start<strong> improvising a story that goes on and on and on until someone
    takes me out </strong>of the water.</p>
    <p>M.M.:&nbsp;Can&nbsp;you also get out of it yourself? Or&nbsp;does someone have to come
    and take you out of the water?</p>
    <p>L.J.:&nbsp;This state usually lasts quite long so until now it was always
    someone else that had to take me out of the water. When I’m&nbsp;in this
    trance,</p>
    <p><strong>I&nbsp;really enjoy it. I&nbsp;feel very comfortable </strong></p>
    <p><strong>and peaceful.</strong></p>
    <p><strong>If&nbsp;there are rocks </strong>it’s great cause the water is flowing with force
    and I&nbsp;like to</p>
    <p><strong>climb over the rocks </strong>and stuff<strong>.</strong></p>
    <p>On&nbsp;and on I<strong> walk through the water. With the </strong></p>
    <p><strong>water up to my knees.</strong></p>
    <p><strong>M.M.:&nbsp;How&nbsp;do stories appear?</strong></p>
    <p><strong>L.J.:&nbsp;Don’t know. </strong>It’s like a being in a<strong> trance. </strong>It&nbsp;just<strong> flows
    </strong>like the water<strong>. </strong>And&nbsp;<strong>I&nbsp;keep making it and making it.</strong></p>
    <p><strong>Then I&nbsp;gradually forget it</strong>.</p>
    <p><strong>M.M.:&nbsp;So&nbsp;it’s a bit like a dream?</strong></p>
    <p><strong>L.J.:&nbsp;Yes. When I’m&nbsp;in the water </strong>there are really<strong> a lot of details
    </strong>to the story.</p>
    <p><strong>When I&nbsp;go out I&nbsp;</strong>only just <strong>remember the storyline</strong></p>
    <p><strong>and then after some days, I&nbsp;forget </strong>everything<strong>.</strong></p>
    <p><strong>M.M.:&nbsp;</strong>So&nbsp;the stories<strong> </strong>appear<strong> when </strong>you’re <strong>in contact </strong>with
    the water <strong>mostly? </strong></p>
    <p><strong>L.J.:&nbsp;When</strong> I’m&nbsp;<strong>in the water they are more intense and</strong> <strong><em>way</em></strong>
    <strong>longer.</strong></p>
    <p><strong>When </strong>I’m<strong> out of the water stories also </strong>sometimes<strong> come but
    then</strong> my<strong> concentration fades (quickly or more quickly) </strong>and I&nbsp;start
    doing other things<strong>.</strong></p>
    <p>M.M.:&nbsp;What are the stories about?</p>
    <p>L.J.:&nbsp;They <strong>can be anything </strong>really<strong>. </strong>Usually stories are <strong>related
    to things I&nbsp;think about a lot: </strong></p>
    <p><strong>M.M.:&nbsp;Like Harry Potter stuff, for&nbsp;example?</strong></p>
    <p><strong>L.J.:&nbsp;Yes, I&nbsp;would be in the </strong>same<strong> wizarding world</strong> <strong>but </strong>I
    would be doing other things<strong>.</strong></p>
    <p><strong>M.M.:</strong> Did&nbsp;the stories appear when you were</p>
    <p><strong>in the boat?</strong></p>
    <p>L.J.:&nbsp;On&nbsp;the boat I&nbsp;was concentrated on what was happening around me,
    also because there were people around.</p>
    <p><strong>I&nbsp;</strong>mostly<strong> get the stories when I’m&nbsp;by myself </strong>and in the
    water <strong><em>up to the knees</em></strong>.</p>
    <p><strong>Cold water </strong>preferably.</p>
    <p>M.M.:&nbsp;Is&nbsp;there an element of the ocean that you like the most?</p>
    <p>L.J.:&nbsp;I&nbsp;like that it’s<strong> wild and free and so beautiful.</strong></p>
    <p>It&nbsp;<strong>takes the place that it needs</strong></p>
    <p>It’s <strong>very powerful. </strong></p>
    <p>I&nbsp;think of the ocean as a</p>
    <p><strong>very powerful and strong woman.</strong></p>
    <p>I&nbsp;have<strong> great respect for her</strong></p>
    <p><strong>She’s amazing.</strong></p>
    <p><strong>She’s </strong>full of<strong> life. </strong>She’s<strong> [Untamable.] </strong>(<strong>→</strong> That
    includes all of it.)</p>
    <p><strong>I&nbsp;would like to be like her:</strong></p>
    <p><strong><em>Wise</em></strong>/<strong><em>Wild</em></strong></p>
    <p><strong>Powerful</strong></p>
    <p><strong>Young</strong></p>
    <p><strong>Always changing</strong></p>
    <p><strong>Beautiful</strong></p>
    <p>while she’s<strong> just being herself</strong></p>
    <p>I&nbsp;think of her as<strong> very playful and strong and in her element.</strong>
  </main>
  <aside>
    <section class="subpanel">
      <h2>Demonstration</h2>
      <section class="content"></section>
    </section>
    <section class="panel--heading">
      Protocols
    </section>
    <section class="subpanel">
      <h2>Reading</h2>
      <section class="content">
        <p>
          Familiarize yourself with a conversation text by first reading it to yourself.<br>
          Then, read it out loud. <br>
          Try to project to your listener(s), so even if you don’t look at them, mentally address your reading to them.<br>
          Notice and accentuate your intonation and phrasing but without exaggerating it too much.    <br>
          Polyphonic: Each person reads with their own intonation the same (or a different) text at the same time. [Polyphonic reading usually happens between the Ocean Conversations and the Conversation notes.]
        </p>
      </section>
    </section>
    <section class="subpanel">
      <h2>Songing</h2>
      <section class="content">
        <p><em>Speech becoming song.</em></p>

        <p>
          Solo: Find your body note. (See “body note” protocol).<br>
          Using the intonation scores (see “intonation” protocol) mark two notes above and two notes below your body note. If the body note is at the center of your intonation, what are the two notes below and above this note respectively? Allocate these notes to the text as you go along, so that the text is song following your (or another’s) intonation.
        </p>
        
        <p>
          Refrain: Make a scale out of the five notes you are using and apply this scale on to a sentence or two from the text. Continue with the text and the songing protocol (as above) and then repeat the scale for another one or two sentences further down on the text. Keep coming back to the scale.<br>
          Alternative: You can switch the procedure, so that you apply the scale on the whole text, and on the refrain you do the songing protocol -as described above.
        </p>
        
        <p>
          Polyphonic: All voices apply their intonation and notes to the same text. Sing the text simultaneously creating  (dis-)harmonies between you.<br>
          Refrain: Each voice simultaneously sings “their” scale, creating (dis-)harmonies between them. Alternatively: follow the variation described above.
        </p>
      </section>
    </section>
    <section class="subpanel">
      <h2>Presence/ Volume (in notebook)</h2>
      <section class="content"></section>
    </section>
    <section class="subpanel">
      <h2>Silence / Sound of pencil on a page</h2>
      <section class="content">
        <p>
          One or more people<br>
          Mechanical pencil<br>
          Small condenser microphone<br>
          Monitors + mixing desk with bass levels turned up; and/or subwoofer
        </p>
        
        <p>
          Attach microphone to mechanical pencil. This is in order to amplify the sounds of the pencil while it touches the surface of the paper.<br>
          The pencil lead should be pushed back inside the pencil to not make any marks.
        </p>
        
        <p>
          Read text internally, at a comfortable speaking speed.<br>
          Draw a line under the text, at the same speed.<br>
          Press hard enough to be able to hear a rumble of the speakers;<br>
          This is the rumble of the sea, heard ear to the sand.
        </p>
      </section>
    </section>
    <section class="subpanel">
      <h2>Liason</h2>
      <section class="content"></section>
    </section>
    <section class="subpanel">
      <h2>Hocket (in a notebook)</h2>
      <section class="content"></section>
    </section>
    <section class="subpanel">
      <h2>Looping</h2>
      <section class="content"></section>
    </section>
  </aside>
  <script>
    (function () {
      var panels = document.querySelectorAll('.subpanel');

      panels.forEach(p => {
        p.addEventListener('click', function () {
          if ('active' in this.dataset) {
            delete this.dataset.active;
          } else {
            this.dataset.active = 'active';
          }
        });
      });
    })();
  </script>
</body>

</html>