bump to jekyll 4

Gemfile

@@ -1,21 +1,9 @@
-source "https://rubygems.org"
+source 'https://rubygems.org'
 
-# Hello! This is where you manage which Jekyll version is used to run.
+gem 'jekyll', '4.0.0'
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-#     bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# Happy Jekylling!
-gem "jekyll", "~> 3.8.5"
 
-# If you have any plugins, put them here!
 group :jekyll_plugins do
-  gem "jekyll-paginate-v2", "~>1.7"
+  gem 'jekyll-seo-tag', '2.6.1'
-  gem "jekyll-sitemap", "1.2.0"
+  gem 'jekyll-sitemap', '1.4.0'
-  gem "jekyll-seo-tag", "2.6.0"
+  gem 'jekyll-last-modified-at','1.1.0'
-  gem 'jekyll-last-modified-at'
 end
-
-

Gemfile.lock

@@ -4,43 +4,46 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.5)
+    concurrent-ruby (1.1.6)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    ffi (1.12.1)
+    ffi (1.13.1)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
-    i18n (0.9.5)
+    i18n (1.8.3)
       concurrent-ruby (~> 1.0)
-    jekyll (3.8.6)
+    jekyll (4.0.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (~> 0.7)
+      i18n (>= 0.9.5, < 2)
-      jekyll-sass-converter (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 1.14)
+      kramdown (~> 2.1)
+      kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
       mercenary (~> 0.3.3)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 4)
+      rouge (~> 3.0)
       safe_yaml (~> 1.0)
-    jekyll-last-modified-at (1.2.1)
+      terminal-table (~> 1.8)
+    jekyll-last-modified-at (1.1.0)
       jekyll (>= 3.7, < 5.0)
       posix-spawn (~> 0.3.9)
-    jekyll-paginate-v2 (1.9.4)
+    jekyll-sass-converter (2.1.0)
-      jekyll (~> 3.0)
+      sassc (> 2.0.1, < 3.0)
-    jekyll-sass-converter (1.5.2)
+    jekyll-seo-tag (2.6.1)
-      sass (~> 3.4)
+      jekyll (>= 3.3, < 5.0)
-    jekyll-seo-tag (2.6.0)
+    jekyll-sitemap (1.4.0)
-      jekyll (~> 3.3)
+      jekyll (>= 3.7, < 5.0)
-    jekyll-sitemap (1.2.0)
-      jekyll (~> 3.3)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (1.17.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
     liquid (4.0.3)
     listen (3.2.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -48,28 +51,28 @@ GEM
     mercenary (0.3.6)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    posix-spawn (0.3.13)
+    posix-spawn (0.3.15)
-    public_suffix (4.0.3)
+    public_suffix (4.0.5)
-    rb-fsevent (0.10.3)
+    rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rouge (3.15.0)
+    rexml (3.2.4)
+    rouge (3.21.0)
     safe_yaml (1.0.5)
-    sass (3.7.4)
+    sassc (2.4.0)
-      sass-listen (~> 4.0.0)
+      ffi (~> 1.9)
-    sass-listen (4.0.0)
+    terminal-table (1.8.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
+      unicode-display_width (~> 1.1, >= 1.1.1)
-      rb-inotify (~> 0.9, >= 0.9.7)
+    unicode-display_width (1.7.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll (~> 3.8.5)
+  jekyll (= 4.0.0)
-  jekyll-last-modified-at
+  jekyll-last-modified-at (= 1.1.0)
-  jekyll-paginate-v2 (~> 1.7)
+  jekyll-seo-tag (= 2.6.1)
-  jekyll-seo-tag (= 2.6.0)
+  jekyll-sitemap (= 1.4.0)
-  jekyll-sitemap (= 1.2.0)
 
 BUNDLED WITH
-   2.0.2
+   2.1.4

_config.yml

@@ -36,7 +36,6 @@ social:
 plugins:
   - jekyll-sitemap
   - jekyll-seo-tag
-  - jekyll-paginate-v2
 
 ### Plugin settings:
 

_includes/cookiemonster.html

@@ -1,3 +1,4 @@
 <!-- BEGIN cookiemonster.html -->
-<img src="{{ site.baseurl }}/assets/img/cookiemonster_upsidedown.gif" style="position:relative;top:0;right:0;z-index:77777;"/>
+{% include relBase.html %}
+<img src="{{ relBase }}/assets/img/cookiemonster_upsidedown.gif" style="position:relative;top:0;right:0;z-index:77777;"/>
 <!-- END cookiemonster.html -->

_includes/liberapay.html

@@ -1,3 +1,4 @@
 <!-- BEGIN liberapay.html -->
+{% include relBase.html %}
 <a href="https://liberapay.com/Sakrecoer/donate" target="_blank" rel="noopener noreferrer nofollow"><img alt="Donate using Liberapay" src="/assets/img/donate.svg"></a>
 <!-- END liberapay.html -->

_includes/navmenu.html

@@ -1,13 +1,14 @@
 <!-- BEGIN navmenu.html -->
+{% include relBase.html %}
 <div id="navigation">
   {% if page.collection == 'tracks' %}
-  <a href="{{ site.baseurl }}./#{{ page.uid }}" alt="Back" title="Back">
+  <a href="{{ relBase }}./#{{ page.uid }}" alt="Back" title="Back">
   {% elsif page.url != '/music/' %}
-  <a href="{{ site.baseurl }}/music/" alt="Music" title="Music">
+  <a href="{{ relBase }}/music/" alt="Music" title="Music">
   {% else %}
-  <a href="{{ site.baseurl }}/" alt="Back" title="About">
+  <a href="{{ relBase }}/" alt="Back" title="About">
   {% endif %}
-    <img src="{{ site.baseurl }}/assets/img/sakrecoer-logo2.svg" width="125px" height="125px" alt="Sakrecoer Logo" />
+    <img src="{{ relBase }}/assets/img/sakrecoer-logo2.svg" width="125px" height="125px" alt="Sakrecoer Logo" />
   </a>
 </div>
 {% if page.collection != 'tracks' %}

_includes/relBase.html

@@ -0,0 +1,12 @@
+{% assign relBase = '' %}
+{% assign tempDepth = page.url | append: 'hackish-solution' | split: '/' | size | minus: 2 %}
+{% for i in (1..tempDepth) %}
+  {% if forloop.last %}
+    {% assign relBase = relBase | append: ".." %}
+  {% else %}
+    {% assign relBase = relBase | append: "../" %}
+  {% endif %}
+{% endfor %}
+{% if relBase == '' %}
+    {% assign relBase = '.' %}
+{% endif %}

_includes/seo.html

@@ -1,5 +1,5 @@
 <!-- BEGIN seo.html -->
-
+{% include relBase.html %}
 {% if page.collection == 'tracks' %}<title>{{ page.title }} - A musical piece by Sakrecoer</title>{% else %}<title>{{ page.title }} | {{ site.title }}</title>{% endif %}
 
 {% seo title=false %}

_layouts/default.html

@@ -1,13 +1,14 @@
 ---
 ---
+{% include relBase.html %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
-<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
+<link rel="apple-touch-icon" href="{{ relBase }}/apple-touch-icon.png">
-<link rel="icon" type="image/png" href="{{ site.baseurl }}/touch-icon.png" sizes="192x192">
+<link rel="icon" type="image/png" href="{{ relBase }}/touch-icon.png" sizes="192x192">
-<link rel="shortcut icon" href="{{ site.baseurl }}/favicon.png" type="image/png" />
+<link rel="shortcut icon" href="{{ relBase }}/favicon.png" type="image/png" />
-<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style20200128-1.css" />
+<link rel="stylesheet" href="{{ relBase }}/assets/css/style20200128-1.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 %}  

_layouts/music.html

@@ -1,6 +1,7 @@
 ---
 layout: default
 ---
+{% include relBase.html %}
 {% include navmenu.html %}
 <div id="player">
   <div id="info">
@@ -8,14 +9,14 @@ layout: default
       <div class="container">
         <button id="mu_pause">Play</button><br /><br />
         {% if page.previous != nil %}
-        <a href="{{ site.baseurl }}{{ page.previous.url }}" title="Previous Track"> <img
+        <a href="{{ relBase }}{{ page.previous.url }}" title="Previous Track"> <img
-            src="{{ site.baseurl }}/assets/img/icons/rewind.svg" title="Previous Track" /> </a>
+            src="{{ relBase }}/assets/img/icons/rewind.svg" title="Previous Track" /> </a>
         {% endif %}
         <a id="download" title="Download This Track!" href="{{ page.mp3 }}"> <img
-            src="{{ site.baseurl }}/assets/img/icons/download.svg" title="Download Track" /> </a>
+            src="{{ relBase }}/assets/img/icons/download.svg" title="Download Track" /> </a>
         {% if page.next != nil %}
-        <a href="{{ site.baseurl }}{{ page.next.url }}" title="Next Track"> <img
+        <a href="{{ relBase }}{{ page.next.url }}" title="Next Track"> <img
-            src="{{ site.baseurl }}/assets/img/icons/fastforward.svg" title="Next Track" /> </a>{% endif %}
+            src="{{ relBase }}/assets/img/icons/fastforward.svg" title="Next Track" /> </a>{% endif %}
             <br /><br />{% include liberapay.html %}
       </div>
     </div>
@@ -58,7 +59,7 @@ layout: default
     mu.pause();
     mu.currentTime = 0;
     {% if page.previous != nil %}
-    loadUrl('{{ site.baseurl }}{{ page.previous.url }}'); return false;
+    loadUrl('{{ relBase }}{{ page.previous.url }}'); return false;
     {% endif %}
     // qq IE10
     muFade();

_layouts/nil.html

@@ -1,4 +1,5 @@
 ---
 ---
+{% include relBase.html %}
 {{ content }}
 

_sass/main.scss

@@ -44,7 +44,7 @@ a:hover {
   flex-direction: row;
   background-color: transparent;
   position: relative;
-  height: 100vh;
+  min-height: 50vh;
   width: 100%;
   // background: linear-gradient(230deg, rgba(218, 159, 142, 0.8), rgba(236, 0, 228, 0.8), rgba(0, 212, 236, 0.8), rgba(0, 236, 173, 0.8), rgba(110, 0, 236, 0.8));
   // background-size: 1000% 1000%;

about/index.html

@@ -7,7 +7,7 @@ description: What is Sakrecoer about and what does its music stand for?
 
 
   <div class="pivot">
-    <a href="{{ site.baseurl }}/">
+    <a href="{{ relBase }}/">
       <h2>Back</h2>
     </a>
     <h1>{{ page.title }}</h1>
@@ -15,9 +15,9 @@ description: What is Sakrecoer about and what does its music stand for?
     {% include liberapay.html %}
   </div>
   <div class="fullscreen-bg">
-    <video loop muted autoplay poster="{{ site.baseurl }}/assets/img/sakrecoer-logo2.svg" class="fullscreen-bg__video">
+    <video loop muted autoplay poster="{{ relBase }}/assets/img/sakrecoer-logo2.svg" class="fullscreen-bg__video">
-      <source src="{{ site.baseurl }}/assets/vi/0001-0076.webm" type="video/webm">
+      <source src="{{ relBase }}/assets/vi/0001-0076.webm" type="video/webm">
-      <source src="{{ site.baseurl }}/assets/vi/0001-0076.mp4" type="video/mp4">
+      <source src="{{ relBase }}/assets/vi/0001-0076.mp4" type="video/mp4">
       <!-- <source src="video/big_buck_bunny.ogv" type="video/ogg"> -->
     </video>
   </div>

index.html

@@ -11,23 +11,79 @@ webm_path: /assets/vi/0001-0076.webm
     <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="pivot">
+   
-    <h2>You are here</h2>
+    
-    <h1><a href="/about/" alt="About Sakrecoer">Where am I?</a></h1>
-  </div>
-  <div class="pivot">
-    <h2>Stream</h2>
-    <h1><a href="/music/" alt="Music of Sakrecoer">Music</a></h1>
   </div>
   <div class="fullscreen-bg">
-    <video loop muted poster="{{ site.baseurl }}/assets/img/sakrecoer-logo2.svg" class="fullscreen-bg__video">
+    <video loop muted poster="{{ relBase }}/assets/img/sakrecoer-logo2.svg" class="fullscreen-bg__video">
-      <source src="{{ site.baseurl }}{{ page.webm_path }}" type="video/webm">
+      <source src="{{ relBase }}{{ page.webm_path }}" type="video/webm">
-      <source src="{{ site.baseurl }}{{ page.mp4_path }}" type="video/mp4">
+      <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 %}
@@ -35,6 +91,19 @@ webm_path: /assets/vi/0001-0076.webm
 </div>
 <style>
   body {
-    background: url('/siteicon2.png');
+    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>

links.html

@@ -3,27 +3,28 @@ title: Links
 layout: default
 image: /links/linkbg.jpg
 ---
+{% include relBase.html %}
 <div class="editable">
-  <a href="http://leedelicious.com/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/leedelicious.png" /></a> 
+  <a href="http://leedelicious.com/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/leedelicious.png" /></a> 
-  <a href="http://www.powerhousebooks.com/thegospelofhiphop/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/gospelofhiphoplink.png" /></a> 
+  <a href="http://www.powerhousebooks.com/thegospelofhiphop/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/gospelofhiphoplink.png" /></a> 
-  <a href="http://www.goodkarma.ru" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/goodkarma%20copy.banner.png" /></a> 
+  <a href="http://www.goodkarma.ru" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/goodkarma%20copy.banner.png" /></a> 
-  <a href="http://www.artifexbcn.org/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/blazon%20copy.banner.png" /></a> 
+  <a href="http://www.artifexbcn.org/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/blazon%20copy.banner.png" /></a> 
-  <a href="http://www.villamagica.com" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/VILLAMAGICAREBOOT99XX%20copy.banner.png" /></a> 
+  <a href="http://www.villamagica.com" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/VILLAMAGICAREBOOT99XX%20copy.banner.png" /></a> 
-  <a href="http://cytownrecords.com" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/logo_cytown.jpg" /></a> 
+  <a href="http://cytownrecords.com" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/logo_cytown.jpg" /></a> 
-  <a href="http://www.finstafari.com" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/finsta.gif" /> </a> 
+  <a href="http://www.finstafari.com" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/finsta.gif" /> </a> 
-  <a href="http://graphstyle.com/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/graphstyle2011_logo_small6_1.png"  /></a> 
+  <a href="http://graphstyle.com/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/graphstyle2011_logo_small6_1.png"  /></a> 
-  <a href="http://www.olakalnins.com/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/header1_0.png" /></a> 
+  <a href="http://www.olakalnins.com/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/header1_0.png" /></a> 
-  <a href="http://dinisnoise.org/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/din.png" /></a> 
+  <a href="http://dinisnoise.org/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/din.png" /></a> 
-  <a href="http://linhalateur.tumblr.com/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/inhalateur.png" /></a>
+  <a href="http://linhalateur.tumblr.com/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/inhalateur.png" /></a>
-  <a href="http://www.alexunderstands.com/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/alexunderstands.png" /></a> 
+  <a href="http://www.alexunderstands.com/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/alexunderstands.png" /></a> 
-  <a href="http://www.mijnschatje.fr/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/mini-banner-2.gif" /></a> 
+  <a href="http://www.mijnschatje.fr/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/mini-banner-2.gif" /></a> 
-  <a href="http://basspistol.com" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/basspistol_logo3_1mini.png" /></a> 
+  <a href="http://basspistol.com" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/basspistol_logo3_1mini.png" /></a> 
-  <a href="http://alsenet.com" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/logo-alsenet.png" /></a> 
+  <a href="http://alsenet.com" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/logo-alsenet.png" /></a> 
-  <a href="http://www.mrc808.com" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/charles-hieronymi-wave.png" /></a> 
+  <a href="http://www.mrc808.com" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/charles-hieronymi-wave.png" /></a> 
-  <a href="http://www.rabiat.org" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/rabiat.gif" /></a>
+  <a href="http://www.rabiat.org" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/rabiat.gif" /></a>
-  <a href="http://www.linuxaudio.org/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/linuxaudio.png" /></a> 
+  <a href="http://www.linuxaudio.org/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/linuxaudio.png" /></a> 
-  <a href="http://www.ubuntustudio.org/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/us-logo.png" /></a> 
+  <a href="http://www.ubuntustudio.org/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/us-logo.png" /></a> 
-  <a href="http://rastasoft.org/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/rastalion.jpg" /></a> 
+  <a href="http://rastasoft.org/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/rastalion.jpg" /></a> 
-  <a href="https://www.dyne.org/" target="_blank"><img src="{{ site.baseurl }}/assets/img/linkbanners/moebius-band.png" /></a> 
+  <a href="https://www.dyne.org/" target="_blank"><img src="{{ relBase }}/assets/img/linkbanners/moebius-band.png" /></a> 
 </div>
 {% include navmenu.html %}

music.html

@@ -4,14 +4,15 @@ description: Officially released but also exclusive audio-material by Sakrecoer
 layout: default
 image: /assets/img/world2.svg
 ---
+{% include relBase.html %}
 {% include navmenu.html %}
 
-<div id="hero" style="height: 40vh; background:transparent;" >
+<div id="hero" style="min-height: 40vh; background:transparent;" >
     
 
     <div class="pivot">
        
-      <a href="{{ site.baseurl }}/"><h2>Back</h2></a>
+      <a href="{{ relBase }}/"><h2>Back</h2></a>
       <h1>Music</h1>
       <p>{{ page.description }}</p>
       {% include liberapay.html %}

musicindex.html

@@ -2,6 +2,7 @@
 layout: default
 sitemap: false
 ---
+{% include relBase.html %}
 <div class="button-group filters-button-group">
 
   <button class="button is-checked" data-filter="*">show all</button>