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

Snapshots | iceberg

Inside this repository

home-location.html
text/html

Download raw (10.6 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;
    }

        @font-face {
      font-family: "Executive";
      src: url("../fonts/Executive/Executive-Bold.woff2") format("woff2"),
        url("../fonts/Executive/Executive-Bold.woff") format("woff"),
        url("../fonts/Executive/Executive-Bold.otf") format("OpenType");
      font-weight: 800;
      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%;
*/    }
    dt {

      font-weight: 800;
      margin-bottom: var(--line-height);
    }

    dd {
      margin: 0;
    }

    p {
      margin-top: 0;
      margin-bottom: 1.3em;
      max-width: 70ch;
    }
    #logo a {
      font-weight: 800; 
    }
    #logo {
      padding: 0;
      margin: 0;
      max-width: 145px;
    }
    .selected {
      color: red;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    nav a {
      color:white;  
    }
    a:hover {
      color:var(--c--three);
      text-decoration: none;
      margin-left: var(--line-height);
    }
    li {
    list-style: none;
    }
    ul {
    font-size: 1.6em;
    line-height: calc(var(--line-height) * 1.7);
    margin: 0;
    margin-bottom: 0px;
    padding: 0;
    margin-bottom: 2em;
  }
  .home h2 {
    font-size: 1em;
    margin-bottom: 0;  
}

  </style>
</head>

<body class="home">
  <nav>
<!--     <figure ><img src="../layout/logo-white.png"/></figure>
 -->    <div id="logo"><a href="">The Oceanographies Institute</a></div>
    <dl class="meta private">
      <dt>Sort by</dt>
        <dd><a href="" class="selected">Location</a></dd>
        <dd><a href="">Tools</a></dd>
        <dd><a href="">Elements</a></dd>
        <dd><a href="">Thematics</a></dd>
        <dd><a href="">Shores</a></dd>
    </dl>
  </nav>
  <main>
    <h2>Brussels</h2>
      <ul>
        <li><a href="">Ocean Conversation with L.J.</a></li>
        <li><a href="">Immensity</a></li>
        <li><a href="">Horizon Infinity</a></li>
        <li><a href="">Glacier Moving</a></li>
        <li><a href="">Ocean Conversation with T.V.A.</a></li>
        <li><a href="">Ocean Conversation with H.G.</a></li>
      </ul>
    <h2>Ostende</h2>
      <ul>
        <li><a href="">Ocean Conversation with P.H.</a></li>
        <li><a href="">Ocean Conversation with C.G.</a></li>
        <li><a href="">Ocean Conversation with P.V.</a></li>
        <li><a href="">Shore (Sound)</a></li>
      </ul>
  </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>