hq/sakrecoer-mother-web
hq/sakrecoer-mother-web
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

layout with isotope

Browse source
This commit is contained in:
Set Sakrecoer 2019-11-05 11:31:36 +01:00
parent 20ebba4337
commit 864b1ccc7f
4 changed files with 85 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_layouts/music.html
View file

@ -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 %}&nbsp;|&nbsp;{% endunless %}{% endfor %}<br />{{ page.date | date: '%Y - %B' }}
<br />
<span id="tracktime" style="font-weight: normal;">&nbsp;</span></p>

112
_sass/isotope.scss
View file

@ -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
View file

@ -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 %},&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>

15
musicindex.html
View file

@ -21,23 +21,24 @@ sitemap: false
<button class="button" data-filter=".{{ category }}">{{ category }}</button>
{% endfor %}
</div>
<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>&#9998;</strong> Edit Resource</a></p>
<p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" rel="nofollow"
class="btn"><strong>&#9998;</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>