bump to jekyll 4

index.html

@@ -11,30 +11,99 @@ webm_path: /assets/vi/0001-0076.webm
     <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="pivot">
-    <h2>You are here</h2>
-    <h1><a href="/about/" alt="About Sakrecoer">Where am I?</a></h1>
-  </div>
-  <div class="pivot">
-    <h2>Stream</h2>
-    <h1><a href="/music/" alt="Music of Sakrecoer">Music</a></h1>
+
+   
+    
   </div>
   <div class="fullscreen-bg">
-    <video loop muted poster="{{ site.baseurl }}/assets/img/sakrecoer-logo2.svg" class="fullscreen-bg__video">
-      <source src="{{ site.baseurl }}{{ page.webm_path }}" type="video/webm">
-      <source src="{{ site.baseurl }}{{ page.mp4_path }}" type="video/mp4">
+    <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: url('/siteicon2.png');
+  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>