Download raw (8.2 KB)

{% extends "base.html" %}
{% block content %}
{% block content_title %}
{% endblock %}

<div id="content" class="index columns">
    <div id="about" class="section">
        <div class="intro">
            <h1>Laboratorium</h1>
            <p class="header">
            <p>Laboratorium is the experimental lab for art/design and biotechnology at KASK / School of Arts Ghent. As a biolab in art and design it focuses on exploring different interactions between art, science and technology.</p>
            <p>If you are interested in participating or using our facilities, send us an email to <a href="mailto:info@laboratorium.bio">info@laboratorium.bio</a>
            </p>
            <p class="footer-more"><a href="laboratorium.html">→ read more about laboratorium</a></p>
            <br />
            <br />
            <h1>Ecology of Colour</h1>
            <p>Inspired by living creatures who’s colours derive from pigments and structures, Ecology of colour focuses on the reproduction of biological nanostructures as a colouring material.</p>
            <p class="footer-more"><a href="https://ecologyofcolour.be/">→ read more about Ecology of colour</a></p>
            <br />
            <br />
            <h1>Colourlab</h1>
            <p>The Colourlab was the first project focused on new ways of approaching the colour field.</p>
            <p>Starting from traditional colouring, to living organisms or waste, this project aimed to reflect about the possibilities of new pigment sources, and the implications involved.</p>
            <p class="footer-more"><a href="database.html">→ read more about the pigments used</a></p>
        </div>
    </div>
    <div id="projects" class="section">
        <div class="intro patterned-border">
            <div class="patterned-background ">
                <h1>Projects</h1>
                <p class="header">
                Laboratorium develops projects in collaboration with artists and scientists applying the research from the
                color biolab project.</p>
                <p class="footer-more">
                <a href="">↓ Latest posts</a>
                </p>
            </div>
        </div>
        {% for category, articles in categories %}
            <!-- projects -->
            {% if category.name == 'projects' %}
            <div class="column-rows">
                {% for article in articles %}
                    <div class="row">
                        <div class="left-spacer"></div>
                        <div class="item patterned-border">
                            <div class="patterned-background">
                                <a href="projects.html#{{ article.slug }}">
                                    <h2 class="">{{ article.title}}</h2>
                                    {{ article.summary }}
                                    <br class="clear">
                                </a>
                            </div>
                        </div>
                        <div class="right-spacer"></div>
                    </div>
                {% endfor %}
            </div>
            {% endif %}
        {% endfor %}
        <div class="background25 fill patterned"></div>
    </div>
    <div id="education" class="section">
        <div class="intro patterned-border">
        <div class="patterned-background">
            <h1>Activities</h1>
            <p class="header">
            Laboratorium organises workshops, lectures and participates in the academic programme of KASK within the
            topics as colors, biomaterials, Art+&shy;Science and DIYbio. Here you can find info of the previous activities organised
            as well as a list of the upcoming events.</p>
            <p class="footer-more">
            <a href="">↓ Latest posts</a>
            </p>
        </div>
        </div>
        <div class="fill patterned"></div>
        {% for category, articles in categories %}
            {% if category.name == 'activities' %}
                <div class="column-rows">
                    {% for article in articles %}
                        <div class="row">
                            <div class="left-spacer"></div>
                            <div class="item patterned-border">
                                <div class="patterned-background">
                                    <a href="activities.html#{{ article.slug }}">
                                        <h2>{{ article.title }}</h2>
                                        {{ article.summary }}
                                        <br class="clear">
                                    </a>
                                </div>
                            </div>
                            <div class="right-spacer"></div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>
<img src="{{ SITEURL }}/theme/images/logos-kask-hogent.png" id="logo-kask-hogent" />
<script>
  (function () {
    var column = document.querySelector('#projects'),
      fill = column.querySelector('.fill'),
      intro = column.querySelector('.intro'),
      lastY, listOffset;

    if (fill && intro) {
      function tick() {
        if (window.scrollY !== lastY || intro.getBoundingClientRect().height !== listOffset) {
          lastY = window.scrollY;
          listOffset = intro.getBoundingClientRect().height;
          var scrollDistance = document.body.scrollHeight - window.innerHeight,
            position = window.scrollY / scrollDistance,
            top = window.scrollY + (1 - position) * (listOffset + 150),
            bottom = position * (window.innerHeight - (listOffset + 150)) + (1 - position) * (column.getBoundingClientRect().height - window.innerHeight);

          fill.style.setProperty('top', top.toString() + 'px');
          fill.style.setProperty('bottom', bottom.toString() + 'px');

        }

        window.requestAnimationFrame(tick);
      }

      window.requestAnimationFrame(tick);
    }
  })();

  (function () {
    var column = document.querySelector('#education'),
      fill = column.querySelector('.fill'),
      intro = column.querySelector('.intro'),
      lastY, listOffset;

    if (fill && intro) {  
      function tick() {
        if (window.scrollY !== lastY || intro.getBoundingClientRect().height !== listOffset) {
          lastY = window.scrollY;
          introHeight = intro.getBoundingClientRect().height;
          var scrollDistance = document.body.scrollHeight - window.innerHeight,
              position = window.scrollY / scrollDistance;
          //   top = window.scrollY + (1 - position) * (listOffset + 150);

          // fill.style.setProperty('top', top.toString() + 'px');

          fill.style.setProperty('top', (window.scrollY + position * (introHeight + 150)).toString() + 'px');
          fill.style.setProperty('bottom', ((1 - position) * (column.getBoundingClientRect().height - introHeight - 150)).toString() + 'px');
        }

        window.requestAnimationFrame(tick);
      }

      window.requestAnimationFrame(tick);
    }
  })();

  document.querySelectorAll('#projects, #education').forEach(function (column) {
    var lastY, lastWindowWidth, lastWindowHeight,
        list = column.querySelector('.column-rows'),
        compensation, scrollDistance, position;

    function tick () {
      var redraw = false;

      if (lastWindowWidth !== window.innerWidth || lastWindowHeight !== window.innerHeight) {
        lastWindowWidth = window.innerWidth,
        lastWindowHeight = window.innerHeight,
        top = parseInt(list.style.getPropertyValue('top')),
        compensation = Math.floor(column.getBoundingClientRect().bottom - list.getBoundingClientRect().bottom) + ((typeof top === 'number') ? top : 0);
        redraw = true;
      }

      if (window.scrollY !== lastY) {
        lastY = window.scrollY;
        scrollDistance = document.body.scrollHeight - window.innerHeight,
        redraw = true;
      }

      if (redraw) {
        position = window.scrollY / scrollDistance;
        list.style.setProperty('top', Math.round(position * (compensation)).toString() + 'px');
      }

      window.requestAnimationFrame(tick);
    }
    
    window.requestAnimationFrame(tick);
  });

</script>
<!-- /#content -->
{% endblock content %}