sakrecoer-mother-web/index.html

---
title: Greetings Robot!
description: 'This is the motherweb of Sakrecoer. Music, art, thoughts and passion from innerspace.'
image: /siteicon.png
mp4_path: /assets/vi/0001-0076.mp4
webm_path: /assets/vi/0001-0076.webm
---

<div id="hero">
  <div class="pivot">
    <h1>{{ site.title }}</h1>
    <h2>{{ page.title }}</h2>
    <h2>{{ page.description }}</h2>
    <h3><a href="/about/" alt="About Sakrecoer">Read more</a></h3>
    {% include liberapay.html %}

   
    
  </div>
  <div class="fullscreen-bg">
    <video loop muted poster="{{ relBase }}/assets/img/sakrecoer-logo2.svg" class="fullscreen-bg__video">
      <source src="{{ relBase }}{{ page.webm_path }}" type="video/webm">
      <source src="{{ relBase }}{{ page.mp4_path }}" type="video/mp4">
    </video>
  </div>
</div>
<div class="button-group filters-button-group" style="margin: auto; padding: 20px;">

  <button class="button is-checked" data-filter="*">show all</button>

  <!-- create categories array-->
  {% assign categories_array = "" | split:"|" %}

  <!--Add each unique 'my_collection' category to the array-->
  {% for post in site.tracks %}
  {% for category in post.categories %}
  {% assign categories_array = categories_array | push: category | uniq %}
  {% endfor %}
  {% endfor %}

  <!--Output the categories-->
  {% for category in categories_array %}

  <button class="button" data-filter=".{{ category }}">{{ category }}</button>
  {% endfor %}
</div>

<div class="musiflex">

  {% for track in site.tracks reversed %}
  <div id="{{ track.uid }}" class="element-item trackcontainer {% for key in track.categories %}{{ key }} {% endfor %}">
    <a href="{{ track.url }}">
      <div class="track" style="background-image:url({{ track.image }});"></div>
    </a>
  </div>
  {% endfor %}

</div>

<script>
  // external js: isotope.pkgd.js

  // init Isotope
  var $grid = $('.musiflex').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows'
  });
  // filter functions

  // bind filter button click
  $('.filters-button-group').on('click', 'button', function () {
    var filterValue = $(this).attr('data-filter');
    // use filterFn if matches value

    $grid.isotope({ filter: filterValue });
  });
  // change is-checked class on buttons
  $('.button-group').each(function (i, buttonGroup) {
    var $buttonGroup = $(buttonGroup);
    $buttonGroup.on('click', 'button', function () {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $(this).addClass('is-checked');
    });
  });
</script>

<div style="background: linear-gradient(45deg, #deefb7, #5fb49c);">
  <div class="trackcontainer logo" style="margin-top:0;padding-top:0;">
      {% include cookiemonster.html %}
  </div>
</div>
<style>
  body {
    background: linear-gradient(230deg, #deefb7, #98dfaf, #5fb49c, #414288, #682d63);
    background-position: center;
    background-repeat: repeat;
    -webkit-animation: AnimationName 60s ease infinite;
    -moz-animation: AnimationName 60s ease infinite;
    animation: AnimationName 60s ease infinite; }
  #wallpaper {
    background-image: url('{{ page.image }}');
    background-position: center;
    background-repeat: repeat;
    -webkit-animation: AnimationName 60s ease infinite;
    -moz-animation: AnimationName 60s ease infinite;
    animation: AnimationName 60s ease infinite; 
  }
  
  </style>