randogoth/scopesessions.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

nicer layout with dark buttons and topic highlights

Browse source
This commit is contained in:
Kiritan Flux 2017-01-23 11:15:49 +01:00
parent e8c2fd545f
commit 3ca644241a
3 changed files with 46 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
6_video.html
View file

@ -25,7 +25,7 @@ permalink: /video/
{% assign allTopicsABC = allTopics | sort %}
<div class="content container-fluid">
<div class="content">
<div class="row">
@ -38,6 +38,14 @@ permalink: /video/
{% endfor %}
</div>
</div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="dark_bg col-md-10 col-md-offset-1">
<div id="video-roster" class="container-fluid">
{% for post in site.posts %}
@ -47,7 +55,7 @@ permalink: /video/
{% if talk.topics %}
{% assign tags = (talk.topics | split:",") %}
{% endif %}
<div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3" vimeo="{{vimeo_id}}">
<div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3 embed-responsive embed-responsive-16by9" vimeo="{{vimeo_id}}">
<div class="video-title">{{talk.artist}}</div>
<div class="playbutton"></div>
<div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p></div>
@ -134,6 +142,7 @@ permalink: /video/
});
$('#video-roster').isotope({
// options
itemSelector: '.videobox'
});
// init Isotope
@ -143,6 +152,8 @@ permalink: /video/
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
$('.filter-button-group').find('button').css('background-color', 'black');
$(this).css('background-color', '#5a4b68');
});
});
</script>