layout with isotope
This commit is contained in:
Set Sakrecoer
parent
20ebba4337
commit
864b1ccc7f
|
|
@ -23,7 +23,7 @@ layout: default
|
|||
<div class="trackcontainer">
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p style="margin-bottom: 0px;">{{ page.tags }}<br />{{ page.date | date: '%Y - %B' }}
|
||||
<p style="margin-bottom: 0px;">{% for c in page.categories %}{{ c }}{% unless forloop.last %} | {% endunless %}{% endfor %}<br />{{ page.date | date: '%Y - %B' }}
|
||||
|
||||
<br />
|
||||
<span id="tracktime" style="font-weight: normal;"> </span></p>
|
||||
|
|
|
|||
|
|
@ -47,118 +47,6 @@
|
|||
border-radius: 0 0.5em 0.5em 0;
|
||||
}
|
||||
|
||||
/* ---- isotope ---- */
|
||||
|
||||
.grid {
|
||||
|
||||
// border: 1px solid #333;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1180px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* clear fix */
|
||||
.grid:after {
|
||||
content: '';
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ---- .element-item ---- */
|
||||
|
||||
.element-item {
|
||||
flex: 1 0 250px;
|
||||
height: 600px;
|
||||
width: 300px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #ff00ff;
|
||||
background-position-x: center;
|
||||
background-position-y: -20px;
|
||||
background-size: 100%;
|
||||
transition: .2s ease-in-out;
|
||||
border-radius: 3px;
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
align-self: flex-end;
|
||||
justify-items: flex-start;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.cartouche {
|
||||
background-color: #f4f4f4;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
border-radius: 3px;
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
|
||||
h4, h5, p {
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.5em;
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
background-color: #fff;
|
||||
}
|
||||
p, a {
|
||||
font-size: 1em;
|
||||
}
|
||||
a.cta {
|
||||
border-radius: 100px;
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(270deg, #ff00ff, #426a00);
|
||||
background-size: 400% 400%;
|
||||
color: #fff;
|
||||
-webkit-animation: AnimationName 15s ease infinite;
|
||||
-moz-animation: AnimationName 15s ease infinite;
|
||||
animation: AnimationName 15s ease infinite;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: 1s ease;
|
||||
|
||||
|
||||
@-webkit-keyframes AnimationName {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@-moz-keyframes AnimationName {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@keyframes AnimationName {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
}
|
||||
a:hover.cta {
|
||||
background: #fff;
|
||||
color: #ff00ff;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.element-item>* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
53
music.html
53
music.html
|
|
@ -21,16 +21,65 @@ image: /assets/img/world.svg
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="button-group filters-button-group">
|
||||
|
||||
<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="trackcontainer">
|
||||
<div id="{{ track.uid }}" style="min-width:300px;" 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>
|
||||
<h3>{{ track.title }}</h3>
|
||||
</a>
|
||||
<p>{{ track.tags }}</p>
|
||||
<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>
|
||||
|
|
@ -2,47 +2,48 @@
|
|||
layout: default
|
||||
sitemap: false
|
||||
---
|
||||
<div class="button-group filters-button-group">
|
||||
<div class="button-group filters-button-group">
|
||||
|
||||
<button class="button is-checked" data-filter="*">show all</button>
|
||||
|
||||
<!-- create categories array-->
|
||||
{% assign categories_array = "" | split:"|" %}
|
||||
<!-- create categories array-->
|
||||
{% assign categories_array = "" | split:"|" %}
|
||||
|
||||
<!--Add each unique 'my_collection' category to the array-->
|
||||
{% for post in site.tracks %}
|
||||
<!--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 %}
|
||||
{% endfor %}
|
||||
|
||||
<!--Output the categories-->
|
||||
{% for category in categories_array %}
|
||||
<!--Output the categories-->
|
||||
{% for category in categories_array %}
|
||||
|
||||
<button class="button" data-filter=".{{ category }}">{{ category }}</button>
|
||||
{% endfor %}
|
||||
<button class="button" data-filter=".{{ category }}">{{ category }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid" style="display:flex;flex-wrap: wrap;">
|
||||
<div class="grid" style="display:flex;flex-wrap: wrap;">
|
||||
{% for resource in site.tracks %}
|
||||
<div class="element-item {% for key in resource.categories %}{{ key | replace_first: ',', ''}} {% endfor %}" style="flex 1 1 150px;">
|
||||
<div class="cartouche filtered" style="background-color: rgba(232, 241, 223, 1);background-image:url('{{ resource.image }}');background-position: center;">
|
||||
<div class="element-item {% for key in resource.categories %}{{ key | replace_first: ',', ''}} {% endfor %}"
|
||||
style="flex 1 1 150px;">
|
||||
<div class="cartouche filtered"
|
||||
style="background-color: rgba(232, 241, 223, 1);background-image:url('{{ resource.image }}');background-position: center;">
|
||||
|
||||
</div>
|
||||
<div class="cartouche">
|
||||
<p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" rel="nofollow" class="btn"><strong>✎</strong> Edit Resource</a></p>
|
||||
<p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" rel="nofollow"
|
||||
class="btn"><strong>✎</strong> Edit Resource</a></p>
|
||||
<h4>{{ resource.title }}</h4>
|
||||
<p>{{ resource.description | truncate: 65 }}</p>
|
||||
<p>{{ resource.media_type }}</p>
|
||||
<p><a class="cta" href="{{ resource.url }}" alt="länk till ressurs" target="_blank" rel="noopener noreferrer">Läs mer...</a></p>
|
||||
<p><a class="cta" href="{{ resource.url }}" alt="länk till ressurs" target="_blank" rel="noopener noreferrer">Läs
|
||||
mer...</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// external js: isotope.pkgd.js
|
||||
|
|
|
|||
Loading…
Reference in a new issue