104 lines
3.1 KiB
HTML
104 lines
3.1 KiB
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 %}, {% 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> |