sakrecoer-mother-web/music.html

---
title: Sakrecoer Music Tracks
description: Officially released but also exclusive audio-material by Sakrecoer
layout: default
image: /assets/img/world.svg
---
{% include relBase.html %}
{% include navmenu.html %}

<div id="hero" style="height: 40vh; background:transparent;" >
    

    <div class="pivot">
       
      <a href="{{ relBase }}/"><h2>Back</h2></a>
      <h1>Music</h1>
      <p>{{ page.description }}</p>
      {% include liberapay.html %}

    </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="{{ relBase }}{{ track.url }}">
      <div class="track" style="background-image:url({{ relBase }}{{ site.audio_url }}{{ track.image }});"></div>
      <h3>{{ track.title }}</h3>
    </a>
    <p>{% for c in track.categories %}{{ c }}{% unless forloop.last %},&nbsp;{% endunless %}{% endfor %}</p>
  </div>
  {% endfor %}
  <div>{% include cookiemonster.html %}</div>
</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>
<style>
body {
  background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9));
  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('{{ relBase }}{{ 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>