109 lines
3.3 KiB
HTML
109 lines
3.3 KiB
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> |