adding selector

Gemfile.lock

@@ -1,8 +1,8 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.6.0)
+    addressable (2.7.0)
-      public_suffix (>= 2.0.2, < 4.0)
+      public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
     concurrent-ruby (1.1.5)
     em-websocket (0.5.1)
@@ -42,20 +42,18 @@ GEM
       listen (~> 3.0)
     kramdown (1.17.0)
     liquid (4.0.3)
-    listen (3.1.5)
+    listen (3.2.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.7)
+      rb-inotify (~> 0.9, >= 0.9.10)
-      ruby_dep (~> 1.2)
     mercenary (0.3.6)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     posix-spawn (0.3.13)
-    public_suffix (3.1.1)
+    public_suffix (4.0.1)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)
       ffi (~> 1.0)
-    rouge (3.6.0)
+    rouge (3.12.0)
-    ruby_dep (1.5.0)
     safe_yaml (1.0.5)
     sass (3.7.4)
       sass-listen (~> 4.0.0)

_config.yml

@@ -32,7 +32,6 @@ social:
   link: 
     - https://twitter.com/sakrecoer
     - https://instagram.com/sakrecoer
-    - https://www.facebook.com/PipersHudvard/
     - https://open.spotify.com/playlist/2EDQlOV0cZe3KHLiSf1nly?si=4iwj3I4ETYqnym8RHXuKMw
 ### Build settings
 plugins:
@@ -51,9 +50,10 @@ collections:
   tracks:
     output: true
     permalink: /music/:title.html
+  categories:
+    output: false
 
 # defaults
-# timezone: Europe/Stockholm
 permalink: /:categories/:title/ 
 defaults:
   - 
@@ -61,33 +61,8 @@ defaults:
       path: ""
     values:
       layout: default
-#   - 
-#     scope:
-#       path: ""
-#       type: "posts"
-#     values:
-#       layout: "post"
-#       permalink: "/:year/:month/:day/:title/"
-#   - 
-#     scope:
-#       path: ""
-#       type: "behandlingar"
-#     values: 
-#       layout: "post"
-#       _options:
-#         content:
-#           uploads_dir: "images/behandlingar"
-#           width: "1200"
-#           height: "400"
-#           resize_style: "cover"
-#         image:
-#           uploads_dir: "images/behandlingar"
-#           width: "1200"
-#           height: "400"
-#           resize_style: "cover"
-#           mime_type: "image/jpeg"
-#           expandable: "true"
 
 exclude: [".rvmrc", ".rbenv-version", "README.md", "Rakefile", "changelog.md", "*.*~", "Gemfile", "Gemfile.lock", ".gitignore" ]
 audio_url : 'https://media.sakrecoer.com'
-banner: /assets/img/set.png
+banner: /assets/img/set.png
+

_layouts/default.html

@@ -9,6 +9,7 @@
 <link rel="shortcut icon" href="{{ site.baseurl }}/favicon.png" type="image/png" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style2019-07.css" />
 <script src="/assets/js/jquery-3.4.1.min.js"></script>
+<script type="text/javascript" src="/assets/js/isotope.pkgd.min.js"></script>
 {% include seo.html %}  
 <style>
 body{

_layouts/music.html

@@ -23,7 +23,7 @@ layout: default
   <div class="trackcontainer">
   
     <h1>{{ page.title }}</h1>
-    <p style="margin-bottom: 0px;">{{ page.keywords }}<br />{{ page.date | date: '%Y - %B' }}
+    <p style="margin-bottom: 0px;">{{ page.tags }}<br />{{ page.date | date: '%Y - %B' }}
   
       <br />
       <span id="tracktime" style="font-weight: normal;">&nbsp;</span></p>

_sass/isotope.scss

@@ -0,0 +1,164 @@
+
+
+/* ---- button ---- */
+
+.button {
+  display: inline-block;
+  padding: 10px 18px;
+  margin-bottom: 10px;
+  background: #EEE;
+  border: none;
+  border-radius: 3px;
+  color: #222;
+  font-size: 16px;
+  text-shadow: 0 1px white;
+  transition: all .2s ease;
+}
+
+.button:hover {
+
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
+  color: #222;
+}
+
+.button:active,
+.button.is-checked {
+  background-color: #28F;
+}
+
+.button.is-checked {
+  color: white;
+  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
+}
+
+.button:active {
+  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
+}
+
+/* ---- button-group ---- */
+
+
+
+.button-group .button:first-child {
+  border-radius: 0.5em 0 0 0.5em;
+}
+
+.button-group .button:last-child {
+  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;
+}
+
+
+

_tracks/2006-04-06-badboys3.md

@@ -4,9 +4,13 @@ title: Bad Boys 3
 mp3: https://media.sakrecoer.com/2006-reset_sakrecoer-best_of_sakrecoer_2004-2009-bad_boys_3.mp3
 ogg: https://media.sakrecoer.com/2006-reset_sakrecoer-best_of_sakrecoer_2004-2009-bad_boys_3.ogg
 uid: badboys3
-category: music
 image: https://media.sakrecoer.com/2006-reset_sakrecoer-best_of_sakrecoer_2004-2009-bad_boys_3.jpg
-keywords: reSet, pop, indy, vocals, electro, Yngwie Malmsteen,
+categories: 
+  - reset
+  - pop
+  - indy
+  - vocals
+  - electro
 duration: 207000
 ---
 Some people are fake, some people are aware.\\

_tracks/2008-06-24-NowFuture.md

@@ -5,8 +5,13 @@ mp3: https://media.sakrecoer.com/2008-sakrecoer-pa_manen_007-now_future.mp3
 ogg: https://media.sakrecoer.com/2008-sakrecoer-pa_manen_007-now_future.ogg
 image: https://media.sakrecoer.com/2008-sakrecoer-pa_manen_007-now_future.jpg
 uid: nowfuture
-category: music
+categories: 
-keywords: reSet, chill out, vocals, electro, acid, now future, no future,
+  - reset
+  - chillout
+  - vocals
+  - electro
+  - acid
+
 ---
 Life is full of mysteries,\\
 And if you want to cope with these,\\

_tracks/2009-12-24-XmasBowie.md

@@ -4,8 +4,13 @@ title: Xmas Bowie
 mp3: https://media.sakrecoer.com/2009-reset_sakrecoer-bootleg-xmas_bowie.mp3
 ogg: https://media.sakrecoer.com/2009-reset_sakrecoer-bootleg-xmas_bowie.ogg
 uid: xmasbowie
-category: music
+
 image: https://media.sakrecoer.com/2009-reset_sakrecoer-bootleg-xmas_bowie.jpg
-keywords: reSet, pop, chiptune, Bowie, Lets dance, red shoes, cover,
+categories: 
+  - reset
+  - pop
+  - chiptune
+  - bowie
+  - cover
 ---
 For Mama Noel

_tracks/2010-07-07-Feelin4u.md

@@ -5,9 +5,13 @@ mp3: https://media.sakrecoer.com/2010-sakrecoer-pa_manen_007-feeling_4_u.mp3
 ogg: https://media.sakrecoer.com/2010-sakrecoer-pa_manen_007-feeling_4_u.ogg
 image: https://media.sakrecoer.com/2010-sakrecoer-pa_manen_007-feeling_4_u.jpg
 uid: feelin4u
-category: music
+categories: 
-tag: reSet
+  - cybersoul
-keywords: Soul, R&B, CyberSoul, Hiphop, vocals, singer, crooner, GNU, Linux
+  - hiphop
+  - vocals
+  - singer
+  - crooner
+  - reset
 ---
 The better i know you the more i feel this is true.\\
 The more i read you the stronger i feel for you.\\

_tracks/2010-09-22-Dumb-Bum.md

@@ -1,12 +1,17 @@
 ---
 title: Dum Bum
 layout: music
-category: music
 mp3: https://media.sakrecoer.com/2010-reset_sakrecoer-polyglotte-dumb_bumm.mp3
 ogg: https://media.sakrecoer.com/2010-reset_sakrecoer-polyglotte-dumb_bumm.ogg
 uid: dumbum
 image: https://media.sakrecoer.com/2010-reset_sakrecoer-polyglotte-dumb_bumm.jpg
-keywords: reSet, blues, electro, vocals, industry go to hell, music, freedom,
+categories: 
+  - reset
+  - blues
+  - electro
+  - vocals
+  - music
+  - freedom
 ---
 You say i should act like Bob,\\
 You want me to do the dirty job.\\

_tracks/2011-01-27-Lovemoney.md

@@ -4,9 +4,14 @@ title: Lovemoney
 mp3: https://media.sakrecoer.com/2011-reset_sakrecoer-polyglotte-lovemoney.mp3
 ogg: https://media.sakrecoer.com/2011-reset_sakrecoer-polyglotte-lovemoney.ogg
 uid: lovemoney
-category: music
 image: https://media.sakrecoer.com/2011-reset_sakrecoer-polyglotte-lovemoney.jpg
-keywords: reSet, pop, emo, vocals, love, money, midlife crisis,
+categories: 
+  - reset
+  - pop
+  - emo
+  - vocals
+  - love
+  - money
 ---
 2x\\
 Money here,\\

_tracks/2011-02-15-Fantasii.md

@@ -4,9 +4,14 @@ title: Fantasii
 mp3: https://media.sakrecoer.com/2011-sakrecoer-gentle_songs_for_neighbourdreams-fantasii.mp3
 ogg: https://media.sakrecoer.com/2011-sakrecoer-gentle_songs_for_neighbourdreams-fantasii.ogg
 uid: fantasii
-category: music
+
 image: https://media.sakrecoer.com/2011-sakrecoer-gentle_songs_for_neighbourdreams-fantasii.jpg
-keywords: reSet, vocals, pop, evolutionary, poetry,
+categories: 
+  - reset
+  - vocals
+  - pop
+  - evolutionary
+  - poetry
 ---
 Dreams of light and spreading ideas,\\
 Green and bright well rooted trees.\\

_tracks/2012-01-02-Supernova.md

@@ -4,8 +4,13 @@ title: Supernova
 mp3: https://media.sakrecoer.com/2012-sakrecoer-uhm-supernova.mp3
 ogg: https://media.sakrecoer.com/2012-sakrecoer-uhm-supernova.ogg
 uid: supernova
-category: music
+
 image: https://media.sakrecoer.com/2012-sakrecoer-uhm-supernova.jpg
-keywords: Simio, chillout, techno, melodic, classic break,
+categories: 
+  - simio
+  - chillout
+  - techno
+  - melodic
+  - breaks
 ---
 This I give you...

_tracks/2012-06-06-WeHaveToDecide.md

@@ -4,9 +4,15 @@ title: We Have To Decide
 mp3: https://media.sakrecoer.com/2012-pusset_sakrecoer--we_have_to_decide.mp3
 ogg: https://media.sakrecoer.com/2012-pusset_sakrecoer--we_have_to_decide.ogg
 uid: wehavetodecide
-category: music
+
 image: https://media.sakrecoer.com/2012-pusset_sakrecoer--we_have_to_decide.jpg
-keywords: pusSet, vocals, house, chillout, classic break, evolutionary,
+categories: 
+  - pusset
+  - vocals
+  - house
+  - chillout
+  - breaks
+  - evolutionary
 ---
 I have been waiting all night long,\\
 For this question to come,\\

_tracks/2012-10-16-Caribcreol.md

@@ -4,9 +4,16 @@ title: Un Barcelones En Carib Malmo
 mp3: https://media.sakrecoer.com/2012-pusset_sakrecoer-carib-un_barcelones_en_carib_malmo_160kbps.mp3
 ogg: https://media.sakrecoer.com/2012-pusset_sakrecoer-carib-un_barcelones_en_carib_malmo_160kbps.ogg
 uid: caribmalmo
-category: music
+
 image: https://media.sakrecoer.com/2012-pusset_sakrecoer-carib-un_barcelones_en_carib_malmo_160kbps.jpg
-keywords: pusSet, tropical, house, kick-n-base, instrumental, funky, hot,
+categories: 
+  - pusset
+  - tropical
+  - house
+  - kick-n-base
+  - instrumental
+  - funky
+  - hot
 ---
 The title says it all!\\
 This is SweidoCaribean Kick'N'Base Baby!

_tracks/2012-12-29-Avide_codeinedit.md

@@ -4,9 +4,16 @@ title: Avide (Codein Edit)
 mp3: https://media.sakrecoer.com/2012-redith_piaf-codeine_edit-avide_de_danser.mp3
 ogg: https://media.sakrecoer.com/2012-redith_piaf-codeine_edit-avide_de_danser.ogg
 uid: avidanse
-category: music
+
 image: https://media.sakrecoer.com/2012-redith_piaf-codeine_edit-avide_de_danser.jpg
-keywords: Simio, vocals, french, poetry, codein, purple drank, slowmo,
+categories: 
+  - simio
+  - vocals
+  - french 
+  - poetry
+  - codein
+  - purpledrank
+  - slowmo
 ---
 This song is about sex. It is the story of choosing love for the tempo AMONG the crowd instead of OVER it, and emulates the readjustments of heartbeat that occur on this path. While it is arguable that the song is a bit sour, I won't do anything about it. Perfection is not only far from my current research, since i dropped these lines, i consider it a worthless dead-end trip. "Life is much better made than a roller-caster..."
 

_tracks/2013-02-04-Powertodo.md

@@ -4,9 +4,13 @@ title: Power To Do
 mp3: https://media.sakrecoer.com/2013-reset_sakrecoer-power_to_do-power_to_do.mp3
 ogg: https://media.sakrecoer.com/2013-reset_sakrecoer-power_to_do-power_to_do.ogg
 uid: powertodo
-category: music
 image: https://media.sakrecoer.com/2013-reset_sakrecoer-power_to_do-power_to_do.jpg
-keywords: reSet, evolutionary, vocals, public enemy, calssic break, semi-rap,
+categories: 
+  - reset
+  - evolutionary
+  - vocals
+  - breaks
+  - semi-rap
 ---
 I don't want to deal with money,\\
 I don't want to deal.\\

_tracks/2013-02-08-InvisiblePowerfull.md

@@ -4,9 +4,13 @@ title: Invisible Powerfull
 mp3: https://media.sakrecoer.com/2013-reset_sakrecoer-invisible_powerfull-the_wall.mp3
 ogg: https://media.sakrecoer.com/2013-reset_sakrecoer-invisible_powerfull-the_wall.ogg
 uid: thewall
-category: music
+
 image: https://media.sakrecoer.com/2013-reset_sakrecoer-invisible_powerfull-the_wall.jpg
-keywords: reSet, brick in the wall, mindset, magick, self empowerement, break the rules,
+categories:
+  - reset
+  - mindset
+  - magick
+  - pop
 ---
 
 The wall,\\

_tracks/2013-04-03-AlbinoLion.md

@@ -4,9 +4,12 @@ title: Albino Lion (Negative Bounty)
 mp3: https://media.sakrecoer.com/2013-pusset_sakrecoer-exclusive-albino_lion.mp3
 ogg: https://media.sakrecoer.com/2013-pusset_sakrecoer-exclusive-albino_lion.ogg
 uid: albinolion
-category: music
 image: https://media.sakrecoer.com/2013-pusset_sakrecoer-exclusive-albino_lion.jpg
-keywords: pusSet, cyber rnb, bass, Janie Joelle, sexy,
+categories: 
+  - pusset
+  - cybersoul
+  - bass
+  - sexy
 ---
 
 My 2013 motto is to record live versions of sexy beats i do right away and post them everywhere. This way I'm hoping to help people keep focused on making love rather than fucking eachother up. In the midst of 2077, I hope to have a number of new songs worth flying to venus with. Then I'll make them sound even nicer, but most likeley just do better new ones or save the world.

_tracks/2013-04-18-WorkForFreeTime.md

@@ -4,9 +4,11 @@ title: Work For Free Time
 mp3: https://media.sakrecoer.com/2013-pusset_sakrecoer-yet_another_super_hit-work_for_free_time.mp3
 ogg: https://media.sakrecoer.com/2013-pusset_sakrecoer-yet_another_super_hit-work_for_free_time.ogg
 uid: freetime
-category: music
 image: https://media.sakrecoer.com/2013-pusset_sakrecoer-yet_another_super_hit-work_for_free_time.jpg
-keywords: pusSet, everyday reality, emo, kick-n-base,
+categories: 
+  - pusset
+  - emo
+  - kick-n-base
 ---
 
 Monday, Thursday, Friday, Saturday, Saturday, Saturday, Sunday.

_tracks/2013-04-27-acidlounge.md

@@ -4,9 +4,12 @@ title: Acid In My Lounge
 mp3: https://media.sakrecoer.com/2013-simio_sakrecoer-critter_and_guitari-acid_in_my_lounge.mp3
 ogg: https://media.sakrecoer.com/2013-simio_sakrecoer-critter_and_guitari-acid_in_my_lounge.ogg
 uid: acidmylounge
-category: music
 image: https://media.sakrecoer.com/2013-simio_sakrecoer-critter_and_guitari-acid_in_my_lounge.jpg
-keywords: Simio, Acid, Chillout, instrumental,
+categories: 
+  - simio
+  - acid
+  - chillout
+  - instrumental
 ---
 Made without any Guitars nor Criterias,\\
 But with alot of Critter&Guitari.\\

_tracks/2014-01-23-filosofisk-Logik.md

@@ -4,9 +4,13 @@ title: Filosofisk Logik
 mp3: https://media.sakrecoer.com/2014-reset_sakrecoer-total_demokratisk-philosofisk_logik.mp3
 ogg: https://media.sakrecoer.com/2014-reset_sakrecoer-total_demokratisk-philosofisk_logik.ogg
 uid: filosofisklogik
-category: music
 image: https://media.sakrecoer.com/2014-reset_sakrecoer-total_demokratisk-philosofisk_logik.jpg
-keywords: reSet, philosophy, vocals, evolutionary, rnb,
+categories: 
+  - reset
+  - philosophy
+  - vocals
+  - evolutionary
+  - rnb
 ---
 Politkern sa:\\
 "Lyssna på min filosofiska logik,\\

_tracks/2014-01-31-medans-iSaver.md

@@ -4,8 +4,12 @@ title: Medans iSaover
 mp3: https://media.sakrecoer.com/2014-simio_sakrecoer-medans_i_saver-medans_i_saver.mp3
 ogg: https://media.sakrecoer.com/2014-simio_sakrecoer-medans_i_saver-medans_i_saver.ogg
 uid: medansisaver
-category: music
 image: https://media.sakrecoer.com/2014-simio_sakrecoer-medans_i_saver-medans_i_saver.jpg
-keywords: Simio, Kick-n-base, tropical, vocoder, robolove,
+categories: 
+  - simio
+  - kick-n-base
+  - tropical
+  - vocoder
+  - robolove
 ---
 Robots are feeling things, while you sleep.

_tracks/2014-02-03-burner.md

@@ -4,9 +4,12 @@ title: Burner
 mp3: https://media.sakrecoer.com/2014-simio_sakrecoer-burner-burner.mp3
 ogg: https://media.sakrecoer.com/2014-simio_sakrecoer-burner-burner.ogg
 uid: burner
-category: music
 image: https://media.sakrecoer.com/2014-simio_sakrecoer-burner-burner.jpg
-keywords: Simio, kick-n-base, tropical, graffiti music,
+categories: 
+  - simio
+  - kick-n-base
+  - tropical
+  - graffiti
 duration: 229000
 ---
 Wicked And Funky Blockletter Burner Top to Bottom, rolling in to your HIFI system.

_tracks/2014-04-17-phramtiden.md

@@ -4,9 +4,13 @@ title: Phramtiden, Syrliga Spaor
 mp3: https://media.sakrecoer.com/2014-phuture_edited_by_sakrecoer-phramtiden_tracks-phramtiden_syrliga_spar.mp3
 ogg: https://media.sakrecoer.com/2014-phuture_edited_by_sakrecoer-phramtiden_tracks-phramtiden_syrliga_spar.ogg
 uid: phutureohramtid
-category: music
 image: https://media.sakrecoer.com/2014-phuture_edited_by_sakrecoer-phramtiden_tracks-phramtiden_syrliga_spar.jpg
-keywords: Simio, chillout, acid, instrumental, cover,
+categories: 
+  - simio
+  - chillout
+  - acid
+  - instrumental
+  - cover
 ---
 ACID TRAX! By Phuture, The unborn Chillout Zone edit....\\
 99love

_tracks/2014-08-08-tenodef_loudnesswarrior.md

@@ -5,8 +5,13 @@ mp3: https://media.sakrecoer.com/2014-sakrecoer-technocraphy-tonedef_loudnesswar
 ogg: https://media.sakrecoer.com/2014-sakrecoer-technocraphy-tonedef_loudnesswarriors_anthem.ogg
 image: https://media.sakrecoer.com/2014-sakrecoer-technocraphy-tonedef_loudnesswarriors_anthem.jpg
 uid: loudanthemwarior
-category: music
+categories: 
-tag: Simio
+  - techno
-keywords: Techno, Hard, Funky, tropical, kick-n-base, instrumental
+  - hard
+  - funky
+  - tropical
+  - kick-n-base
+  - instrumental
+  - simio
 ---
 A Techno track with alot of dirt, pressure and compression, under the magic desguise of the Anthem of it self

_tracks/2015-11-13-7step.md

@@ -5,8 +5,9 @@ mp3: https://media.sakrecoer.com/2015-sakrecoer-demo-01-7_stepper.mp3
 ogg: https://media.sakrecoer.com/2015-sakrecoer-demo-01-7_stepper.ogg
 image: https://media.sakrecoer.com/2015-sakrecoer-demo-01-7_stepper.png
 uid: 7stepper
-category: music
+categories: 
-tag: Simio
+  - kick-n-base
-keywords: Kick-n-Base, instrumental, 7Step,
+  - instrumental
+  - 7step
 ---
 A Strange track in some sort 7/4 tempo, with a sweet and funky robo-cat singing a ballade.

_tracks/2015-11-16-Vapor-Break.md

@@ -5,8 +5,11 @@ mp3: https://media.sakrecoer.com/2015-sakrecoer--07-vapor_break.mp3
 ogg: https://media.sakrecoer.com/2015-sakrecoer--07-vapor_break.ogg
 image: https://media.sakrecoer.com/2015-sakrecoer--07-vapor_break.png
 uid: vaporbreak
-category: music
+categories: 
-tag: Simio
+  - kick-n-base
-keywords: Kick-n-Base, Vapor Wave, BreakDance, instrumental, Stepper,
+  - vapor
+  - breakdance
+  - instrumental
+  - stepper
 ---
 The story of a dancing Sloth who dreamed about spinning on the head, at the Battle Of The Year.

_tracks/2015-11-18-99GF.md

@@ -5,8 +5,13 @@ mp3: https://media.sakrecoer.com/2015-sakrecoer-demo-07-99gf.mp3
 ogg: https://media.sakrecoer.com/2015-sakrecoer-demo-07-99gf.ogg
 image: https://media.sakrecoer.com/2015-sakrecoer-demo-07-99gf.jpg
 uid: 99gf
-category: music
+categories: 
-tag: Simio
+  - kick-n-base
-keywords: Kick-n-Base, Vapor, Techno, Tropical, instrumental, Stepper,
+  - vapor
+  - techno
+  - tropical
+  - instrumental
+  - stepper
+  - simio
 ---
 Tropical Stomp-Wave for dancing rave-robots of model 99GF, with glitched out Autopilot and sentient rhythm analyzer.

_tracks/2015-11-19-Subway BossanovaF.md

@@ -5,8 +5,14 @@ mp3: https://media.sakrecoer.com/2015%20-%20Sakrecoer%20-%20demo%20-%2007%20-%20
 ogg: https://media.sakrecoer.com/2015%20-%20Sakrecoer%20-%20demo%20-%2007%20-%20Subossa.ogg
 image: https://media.sakrecoer.com/2015%20-%20Sakrecoer%20-%20demo%20-%2007%20-%20Subossa.jpg
 uid: subbossa
-category: music
+categories: 
-tag: Simio
+  - kick-n-base
-keywords: Kick-n-Base, House, Techno, Tropical, instrumental, Subway, Bossa Nova,
+  - house
+  - techno
+  - tropical
+  - instrumental
+  - subway
+  - bossanova
+  - simio
 ---
 This track is so Anoying! There are just too many cats!!!!

_tracks/2015-11-25-PinGnu.md

@@ -5,9 +5,17 @@ mp3: https://media.sakrecoer.com/2015-sakrecoer-demo-07-pingnu.mp3
 ogg: https://media.sakrecoer.com/2015-sakrecoer-demo-07-pingnu.ogg
 image: https://media.sakrecoer.com/2015-sakrecoer-demo-07-pingnu.png
 uid: pinGnu
-category: music
+categories: 
-tag: Simio
+  - kick-n-base
-keywords: Kick-n-Base, Vapor, CyberSoul, Techno, Trap, Milenial, instrumental, GNU, Linux
+  - vapor
+  - cybersoul
+  - techno
+  - trap
+  - milenial
+  - instrumental
+  - gnu
+  - linux
+  - simio
 ---
 I'm a little Pingu, riding on a GNU.\\
 Looking at the world, looking at you.\\

_tracks/2016-08-30-dependency.md

@@ -5,9 +5,16 @@ mp3: https://media.sakrecoer.com/2016-Sakrecoer-07-Unmet-dependencies.mp3
 ogg: https://media.sakrecoer.com/2016-Sakrecoer-07-Unmet-dependencies.ogg
 image: https://media.sakrecoer.com/2016-Sakrecoer-07-Unmet-dependencies.jpg
 uid: dependencytrap
-category: music
+categories: 
-tag: Sakrecoer
+  - kick-n-base
-keywords: Kick-n-Base, Vapor, CyberSoul, Techno, Trap, Milenial, instrumental, GNU, Linux
+  - vapor
+  - cybersoul
+  - techno
+  - trap
+  - milenial
+  - instrumental
+  - gnu
+  - linux
 ---
 -----BEGIN PGP SIGNED MESSAGE-----
 Hash: SHA1

_tracks/2018-12-07-katufedenous.md

@@ -5,9 +5,10 @@ mp3: https://media.sakrecoer.com/2018-setto_-single-007-katu_fait_de_nous-117bpm
 ogg: https://media.sakrecoer.com/2018-setto_-single-007-katu_fait_de_nous-117bpm.ogg
 image: https://media.sakrecoer.com/2018-setto_-single-007-katu_fait_de_nous-117bpm.jpg
 uid: kastufaisdenous2345235
-category: music
+categories: 
-tag: Sakrecoer
+  - cybersoul
-keywords: CyberSoul, Trap, Milenial
+  - trap
+  - milenial
 ---
 Qu'as tu fais de nous?\\
 WTF coucou?\\

_tracks/_2015-11-30-WideOpen.md

@@ -5,9 +5,17 @@ mp3: https://media.sakrecoer.com/2015_-_sakrecoer_-_7th_dimension_-_07_-_wide_op
 ogg: https://media.sakrecoer.com/2015_-_sakrecoer_-_7th_dimension_-_07_-_wide_open.ogg
 image: https://media.sakrecoer.com/2015_-_sakrecoer_-_7th_dimension_-_07_-_wide_open.jpg
 uid: wideopen2
-category: music
+categories: 
-tag: reSet
+  - kick-n-base
-keywords: Kick-n-Base, Vapor, CyberSoul, Techno, Trap, Milenial, Hiphop, instrumental, GNU, Linux
+  - vapor
+  - cyberdoul
+  - techno
+  - trap
+  - milenial
+  - hiphop
+  - instrumental
+  - gnu
+  - linux
 ---
 Your a lover,<br />
 In a world of fuckers.<br />

_tracks/_defaults.md

@@ -7,6 +7,6 @@ ogg:
 image: 
 uid: 
 category:
-tag: 
+categories: 
-keywords: 
+categories: 
 ---

assets/css/style2019-07.scss

@@ -2,3 +2,4 @@
 ---
 @import 'normalize';
 @import 'main';
+@import 'isotope'

music.html

@@ -29,7 +29,7 @@ image: /assets/img/world.svg
       <div class="track" style="background-image:url({{ track.image }});"></div>
       <h3>{{ track.title }}</h3>
     </a>
-    <p>{{ track.keywords }}</p>
+    <p>{{ track.tags }}</p>
   </div>
   {% endfor %}
   <div>{% include cookiemonster.html %}</div>

musicindex.html

@@ -0,0 +1,72 @@
+---
+layout: default
+sitemap: false
+---
+    <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="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>
+            <div class="cartouche">
+                <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>
+            </div>
+      </div>
+
+      {% endfor %}
+    </div>
+ 
+  <script>
+    // external js: isotope.pkgd.js
+
+    // init Isotope
+    var $grid = $('.grid').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>

rss.xml

@@ -62,7 +62,7 @@ layout: null
 <itunes:explicit>No</itunes:explicit>
 <itunes:subtitle>{{ post.content | xml_escape  }}</itunes:subtitle>
 <itunes:summary>{{ post.content | xml_escape  }}</itunes:summary>
-<itunes:keywords>{{ post.tag | xml_escape  }}</itunes:keywords>
+<itunes:keywords>{{ post.tags | xml_escape  }}</itunes:keywords>
 <itunes:image href="{{ post.image }}"/>
 
 </item>